KolorPal

Tailwind CSS Colors

22 color families, 242 shades. Click any color to copy.

Copy as:

Slate

50
100
200
300
400
500
600
700
800
900
950

Gray

50
100
200
300
400
500
600
700
800
900
950

Zinc

50
100
200
300
400
500
600
700
800
900
950

Neutral

50
100
200
300
400
500
600
700
800
900
950

Stone

50
100
200
300
400
500
600
700
800
900
950

Red

50
100
200
300
400
500
600
700
800
900
950

Orange

50
100
200
300
400
500
600
700
800
900
950

Amber

50
100
200
300
400
500
600
700
800
900
950

Yellow

50
100
200
300
400
500
600
700
800
900
950

Lime

50
100
200
300
400
500
600
700
800
900
950

Green

50
100
200
300
400
500
600
700
800
900
950

Emerald

50
100
200
300
400
500
600
700
800
900
950

Teal

50
100
200
300
400
500
600
700
800
900
950

Cyan

50
100
200
300
400
500
600
700
800
900
950

Sky

50
100
200
300
400
500
600
700
800
900
950

Blue

50
100
200
300
400
500
600
700
800
900
950

Indigo

50
100
200
300
400
500
600
700
800
900
950

Violet

50
100
200
300
400
500
600
700
800
900
950

Purple

50
100
200
300
400
500
600
700
800
900
950

Fuchsia

50
100
200
300
400
500
600
700
800
900
950

Pink

50
100
200
300
400
500
600
700
800
900
950

Rose

50
100
200
300
400
500
600
700
800
900
950

About Tailwind CSS Colors

Tailwind CSS ships with a carefully curated color palette designed for building modern user interfaces. The palette includes 22 color families — from neutral grays (Slate, Gray, Zinc, Neutral, Stone) to vibrant hues (Red through Rose) — each with 11 shades from 50 (lightest) to 950 (darkest).

Shade 500 serves as the base swatch for each family, while lighter shades (50–200) are ideal for backgrounds and hover states, and darker shades (700–950) work well for text and emphasis. This consistent scale makes it easy to build accessible, well-contrasted interfaces without guesswork.

Click any swatch above to copy its hex, RGB, HSL, or Tailwind utility class. Use the Export button to download the entire palette — or a single family — as CSS custom properties, Tailwind config, SCSS variables, or raw JSON.

Frequently Asked Questions

Quantas cores o Tailwind CSS tem?▾

O Tailwind CSS inclui 22 famílias de cores (Slate, Gray, Zinc, Neutral, Stone, Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose) com 11 tons cada (50–950), totalizando 242 cores.

Qual é a convenção de nomes das cores do Tailwind CSS?▾

O Tailwind usa um padrão família-tom, como bg-blue-500 ou text-red-600. O tom 50 é o mais claro e o 950 é o mais escuro. O tom 500 costuma ser o tom primário 'padrão'.

Posso copiar as cores do Tailwind como códigos hex?▾

Sim. Clique em qualquer amostra de cor acima para copiar seu valor hex. Passe o mouse para ver as opções hex, RGB e HSL. Use o botão Exportar para baixar todas as cores como variáveis CSS, config do Tailwind, SCSS ou JSON.

Como personalizo as cores do Tailwind CSS?▾

Estenda o objeto theme.colors no tailwind.config.js. Você pode adicionar novas famílias de cores, sobrescrever os padrões ou usar as cores desta página como referência para montar sua paleta personalizada.