Layout

Color Palette

22 pre-defined colors based on Tailwind CSS expertly-crafted color palette.

Default colors

Choosing the right colors can be a never-ending story. We struggled with the same problem which is why we stuck to Tailwind CSS' carefully designed color palette and never wanted to try anything else after using it.

As speed is one of our core principles, we have further narrowed the selection of Tailwind's color palette. Users can choose between all major color variants (e.g. blue, indigo, amber), but do not need to take care of any shades of a major color. This means if a component has a second color related to the primary color, the second color will be adjusted accordingly by our default shades when the primary color is changed.

Whenever there is a color parameter available in a component, the following color types can be used:

• Slate

  #64748b

• Gray

  #6b7280

• Zinc

  #71717a

• Neutral

  #737373

• Stone

  #78716c

• Red

  #ef4444

• Orange

  #f97316

• Amber

  #f59e0b

• Yellow

  #eab308

• Lime

  #84cc16

• Green

  #22c55e

• Emerald

  #10b981

• Teal

  #14b8a6

• Cyan

  #06b6d4

• Sky

  #0ea5e9

• Blue

  #3b82f6

• Indigo

  #6366f1

• Violet

  #8b5cf6

• Purple

  #a855f7

• Fuchsia

  #d946ef

• Pink

  #ec4899

• Rose

  #f43f5e

Usage example

The following example shows a color parameter of a component, in which the background color is configured automatically by our defaults based on the input of the color parameter.

import { Card, ProgressBar } from '@tremor/react';
export function ColorPaletteUsageExample() {  return (    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">        ProgressBar with color fuchsia      </p>      <Card className="mx-auto max-w-sm">        <div className="flex justify-between">          <p className="flex items-center space-x-1">            <span className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">$9,000</span>            <span className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">(45%)</span>          </p>          <span className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">Goal: 20,000</span>        </div>        <ProgressBar value={45} className="mt-2" color="fuchsia" />      </Card>    </div>  );}

Custom Charts Colors

The Area, Bar, Line, Donut, and Scatter Chart allow you to set a custom color, e.g. #FFCC33. To ensure Tailwind generates classNames at build time to mirror classNames calculated at run time, you have to include your custom colors in your tailwind.config.js file.

For example, here is a BarChart with a customised yellow:

As you can see, in the code example, we pass the custom color to the colors array.

// ...  <Card className="max-w-2xl mx-auto">      <BarChart        className="h-72 mt-4"        data={...}        index="date"        categories={["Distance Running", "Road Cycling"]}        colors={["purple", "#ffcc33"]} // <-- Custom color        yAxisWidth={30}      />  </Card>

Now, we have to update the safelist in the tailwind.config.js with the custom color, to make it work. After you updated the config, make sure to restart the server.

// ...{  pattern:    /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,},// We add this flatMap to the safelist. You can pass more than one color if needed. E.g. "[#ffcc33]","[#161616]"...["[#ffcc33]"].flatMap((customColor) => [  `bg-${customColor}`,  `border-${customColor}`,  `hover:bg-${customColor}`,  `hover:border-${customColor}`,  `hover:text-${customColor}`,  `fill-${customColor}`,  `ring-${customColor}`,  `stroke-${customColor}`,  `text-${customColor}`,  `ui-selected:bg-${customColor}`,  `ui-selected:border-${customColor}`,  `ui-selected:text-${customColor}`,]),],plugins: [// ...