Tailwind CSS Color Palette

1. Find the color family you need among the 22, each shown with its 11 steps.
2. Read each swatch's Tailwind v4 oklch() value and its HEX code.
3. Click a swatch to copy it.
4. Use the family and step in a utility class, such as bg-sky-500, or paste the value into plain CSS.

Tailwind's default palette has 17 chromatic families and 5 grays. In wheel order the chromatic ones are red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose. The grays differ by temperature: slate carries the most blue, gray is cool, zinc has only a faint cool tint, neutral is untinted and stone leans warm. Match the gray to the brand, since neutrals cover most of an interface: slate or gray next to blues, stone next to amber, orange and earthy colors.

Every family runs 50, 100, 200 through 900, then 950, for 242 colors in total. The steps line up in lightness across families, so bg-red-100 and bg-blue-100 are similarly pale. Rough roles: 50–100 for tinted surfaces, 200–300 for borders, 400–600 for buttons and icons, 700–900 for text, 950 for dark-mode backgrounds.

Tailwind v4 (2025) redefined the default palette in OKLCH and retuned it, so a v4 value is not a straight conversion of the v3 hex. For example, v3 blue-500 is #3b82f6, while v4 defines it as oklch(62.3% 0.214 259.815), which renders slightly more vivid. Many v4 chromatic colors sit just outside the sRGB gamut: Display P3 screens show them more saturated than any hex code can, and browsers map them into sRGB on standard screens. Use the oklch() values in v4 projects and the HEX codes where hex is required, such as v3 configs, design tools and email templates. The OKLCH guide explains the notation.

Utilities follow the pattern property, family, step: bg-sky-500 sets a background, text-slate-700 a text color and border-gray-200 a border, and the same names work with ring-, outline-, fill- and stroke-. Add an opacity modifier after a slash, as in bg-sky-500/20, for a translucent tint behind content. In v4 each color is also a CSS variable, so plain CSS can use var(--color-sky-500). For a brand color outside the defaults, the Tailwind palette generator builds a matching 50–950 scale.

• Body text on white: text-slate-900, text-gray-800 and text-slate-700 all clear WCAG AA with a wide margin. The 500 grays pass only narrowly, and the 400 grays fail for text, so keep those for disabled states and decoration.
• White text on colored buttons: for red, rose, pink, fuchsia, purple, violet, indigo and blue, the 600 step passes AA. For orange, amber, yellow, lime, green, emerald, teal, cyan and sky, move to 700. White text on most 500 steps fails.
• Badges and alerts: the 800 step as text on the 50 step of the same family passes AA in every family.
• Dark mode: text-slate-300 on bg-slate-900 reads clearly without the glare of pure white.

Pink and rose at 600 pass by a thin margin, so confirm final pairs in the contrast checker.