Tailwind CSS Color Palette

Tailwind CSS ships a palette of 26 color families, each in 11 steps from 50 (lightest) to 950 (darkest). Version 4 defines them in OKLCH, version 3 in HEX. This tool lists every value in both formats, converts the v4 colors to HEX, and writes ready @theme CSS or tailwind.config.js snippets. In custom mode it builds a full 50–950 scale from your brand color, modeled on the Tailwind family nearest in hue.

How to use this tool

1. Choose "Default Tailwind palette" and a family (or all), or "Custom scale from my color".
2. Pick Tailwind v4 or v3 for the snippet format.
3. For a custom scale, enter your color and a name such as brand.
4. Copy the snippet into your CSS (v4) or config (v3) and use classes like bg-brand-500.

Formula

Custom scale: the base keeps its exact value at the step with the closest lightness; lighter steps use L = 1 − (1 − Lᵢ)(1 − L_b)/(1 − L_k), darker steps L = Lᵢ · L_b/L_k, and chroma C = C_b · Cᵢ/C_k, where Lᵢ, Cᵢ come from the model family.

L_b, C_b are your color's OKLCH lightness and chroma, L_k, C_k the model family's values at that step. Hue follows the model family's small drift between steps. Colors outside sRGB have their chroma reduced.

Example

Blue-500 is oklch(62.3% 0.214 259.815) in v4 and #3b82f6 in v3. Entering #3B82F6 in custom mode places it at step 500 of a blue-modeled ramp, so --color-brand-500 is exactly #3b82f6 and the other ten steps get lighter and darker around it.