Tailwind CSS Colors Palette

Tailwind CSS colors reference with OKLCH, HEX and class names

This page lists all default Tailwind CSS colors, each with shades from 50 to 950. Click a swatch to copy its utility class, OKLCH value, HEX code, RGB value or CSS variable. Use it to pick the right shade fast, compare Tailwind v4 with v3, and export the palette as code. It is free and runs in your browser.

How to copy a Tailwind color from the palette

You copy a Tailwind color by choosing a format tab above the palette and clicking a swatch. The value goes to your clipboard straight away.

1. Type a family, shade or code into Search colors or shades, for example sky, 500, rose-300 or #3b82f6.
2. Pick what to copy with the format tabs: Class, OKLCH, HEX, RGB or CSS var.
3. Choose a Utility class prefix such as bg-*, text-* or border-* so the copied class is ready to paste.
4. Click a swatch. Shift+click copies the alternate format: HEX normally, or the class name when HEX is the selected format.
5. Use Share link to copy a link that restores your current view and selected shade.

With the bg-* prefix, clicking the blue 500 swatch copies bg-blue-500. With the text-* prefix it copies text-blue-500. The prefix list also includes ring, outline, fill, stroke, decoration, shadow, accent, caret, divide, placeholder, from, via and to.

Tailwind color palette features you can use

• Full shade scales: every family shows 11 steps, from 50 (lightest) to 950 (darkest).
• Five copy formats: class name, OKLCH, HEX, RGB and CSS variable.
• v4 and v3 switch: toggle between the OKLCH palette and the original v3.4 HEX palette.
• Colors and Neutrals filter: the Show control narrows the list to All, Colors or Neutrals.
• WCAG text contrast labels: tick Show WCAG text contrast on swatches to see how readable text is on each shade.
• Closest Tailwind Color Finder: enter any HEX, rgb(), hsl() or CSS color name and get the three nearest Tailwind shades, ranked by CIEDE2000 color difference.
• Per-family code: the Code button under each family shows that family in the selected export format.

What do Tailwind color shades 50 to 950 mean?

Tailwind color shades run from 50 to 950, where 50 is the lightest tint and 950 is the darkest. The numbers are labels, not percentages, and each family uses the same 11 steps. The 500 step is the base tone of the family.

The Neutrals filter groups the gray-like families such as slate, gray, zinc, neutral and stone. The Colors filter shows the chromatic families such as red, amber, teal and violet. If you need a scale built from your own brand color, use the Tailwind scale generator.

Tailwind v4 OKLCH values vs v3 HEX values

Tailwind v4 defines its default colors in OKLCH, while Tailwind v3 used HEX. The v4 OKLCH and v3.4 HEX buttons switch the whole page between the two palettes.

Here is blue 500 in both versions. In v3 it is #3B82F6, which equals rgb(59, 130, 246). In v4 it is oklch(62.3% 0.214 259.815), which is slightly more saturated than the v3 value. The OKLCH syntax is described in MDN's OKLCH reference.

Why some v4 swatches carry a P3 badge

A P3 badge marks a v4 color that sits outside the sRGB gamut. Wide-gamut (Display P3) screens show it more vividly, while the HEX shown is the value clipped to sRGB. These HEX values are calculated equivalents, not part of Tailwind itself. Read the sRGB vs Display-P3 comparison to see what the difference means in practice.

Which version should you choose?

Choose v4 for new projects that use the @theme directive. Choose v3.4 when you maintain an older project with a tailwind.config.js file or need plain HEX values. Mauve, olive, mist and taupe exist only in v4.2 and later, so they disappear when you switch to v3.4.

How to export the Tailwind color palette as code

The Tailwind Palette Export Code panel turns the colors currently visible into code. Search or filter first to export a single family, or leave the palette open to export everything.

The quick action buttons Copy palette, Copy CSS and Copy Tailwind copy code to your clipboard. Download CSS and Export JSON save files. Custom properties follow the rules on MDN's custom properties guide. To turn colors into a full token set, try the design token exporter.

Which Tailwind color shades pass WCAG contrast?

Normal text needs a contrast ratio of at least 4.5:1 under WCAG 2.2 level AA, and large text needs 3:1, as defined in WCAG 2.2 Success Criterion 1.4.3. In Tailwind, that usually means shade 600 or darker on a white background.

Using the v3 HEX values against white: blue 500 (#3B82F6) scores 3.68:1 and fails for body text. Blue 600 (#2563EB) scores 5.17:1 and passes AA. Slate 500 (#64748B) scores 4.76:1 and passes AA narrowly. Slate 600 (#475569) scores 7.58:1.

Tick Show WCAG text contrast on swatches for a quick read on every shade. For a precise ratio between any foreground and background pair, use the contrast checker.

Practical uses for the Tailwind CSS colors palette

Developers use the palette to copy exact class names and values without opening documentation. Designers use it to map a mockup color to the nearest Tailwind shade, so the handoff needs no custom values.

• Prototyping: pick a family, copy bg-teal-600 and text-teal-50, and paste both into your markup.
• Custom theme setup: copy a single family from the @theme tab to add it to a design system.
• Plain CSS or SCSS projects: use the CSS variables or SCSS export to reuse Tailwind shades outside Tailwind.
• Gradients: the from, via and to prefixes copy gradient stop classes such as from-sky-400.
• Legacy projects: in v3.4 mode, the CSS var format copies a theme() function call instead of a variable.

How to find the closest Tailwind color to your HEX

Enter your color in Closest Tailwind Color Finder and the tool lists the three nearest Tailwind shades. You can type a HEX code, an rgb() or hsl() value, a CSS color name, or use the color picker. Results follow the version you are viewing, so switch to v3.4 HEX if you need v3 matches.

This helps when you inherit a design with arbitrary colors and want to move it onto the Tailwind scale. For a name that describes any color, the color name finder gives a plain-language label.

Tailwind color palette tips and common mistakes

• Do not mix versions by accident. A v3 HEX copied into a v4 @theme block works, but it will not match the v4 default shade next to it.
• Do not trust 500 for text. Many 500 shades fail 4.5:1 on white. Start at 600 or 700 for body copy.
• Keep neutrals consistent. Pick one neutral family (slate, gray, zinc, neutral or stone) for a project. Mixing them makes surfaces look slightly off.
• Use the right prefix. Copying bg- classes when you need text- or border- costs time. Set the prefix once in the dropdown.
• Check P3 swatches on a standard screen. A vivid P3 color can look flatter on sRGB displays, so test it where your users will see it.

Next, build a CSS variable theme from the shades you picked, or browse tint and shade scales for a color that Tailwind does not include. If you have an OKLCH value and need a HEX fallback, the OKLCH to HEX converter handles it.