Tailwind Colors

Browse the Tailwind palette by family and shade when you need a dependable starting point. Copy the token for utilities or the resolved value when writing plain CSS.

Slate

Gray

Neutral

Red

Blue

Cyan

Sky

Stone

Zinc

Orange

Yellow

Amber

Lime

Green

Emerald

Teal

Indigo

Violet

Purple

Fuchsia

Pink

Rose

01

Choose by role

Start with the job a color needs to do: surface, text, action, border, or status.

  • Keep interaction colors consistent across components.
  • Use neutral shades for structure and content.
  • Reserve stronger colors for clear emphasis.
02

Check the resolved value

A utility token is only useful when the rendered color works against the actual background.

  • Test body text and small labels separately.
  • Check focus and disabled states.
  • Do not use hue alone to communicate status.
Questions
Do I have to use Tailwind utilities?

No. The resolved values are useful in plain CSS, design tokens, and systems that do not use Tailwind.