Tailwind CSS colors

Tailwind CSS 4.3.3 writes every default color as an oklch() value in its theme file, one --color-<hue>-<shade> variable each, and the utilities read those: bg-blue-600 sets the background to var(--color-blue-600). Tailwind CSS v3 wrote the same names as hex codes, and its docs give blue-600 as #2563eb and slate-900 as #0f172a. Version 4.0 moved the palette to OKLCH and, as its announcement puts it, to a modernized P3 palette, more vivid where sRGB had held a color back. So a v3 hex and a v4 hex of one name can differ: v4's blue-600 converts to #155dfc, and slate-900 to #0f172b. The grays mauve, olive, mist and taupe joined the default theme in Tailwind CSS 4.2.0, released February 18, 2026.

A hex code can only name sRGB colors, and 95 of the 286 values lie outside sRGB. For those, any hex is an approximation whose digits depend on how a tool maps the color in; the pages here use CSS Color 4's gamut mapping, which lowers chroma and keeps lightness and hue close, and each page says how far its hex moved. Tailwind's own docs copy a color's nearest hex value on shift+click. How OKLCH works is in What OKLCH is, and how a palette becomes an @theme block in Tailwind v4 @theme colors.

Each color page gives the value as Tailwind writes it, the hex, RGB and HSL, its contrast with white and black text, five tints and five shades, a palette Recolor's generator draws around it, and a link that opens Recolor's landing sample in that palette. To try a Tailwind color on your own site, open it in Recolor and load your address; previewing a palette on a real website explains the steps.