Skip to content
RGBHex

Tailwind v4 Theme Builder

Turn one brand color into a full Tailwind v4 palette (50–950) authored in oklch(). Hue is fixed, lightness eases for consistent contrast, and chroma is clamped to the chosen gamut (sRGB or Display P3) so every stop is displayable. State lives in the URL to share.

8 stops were chroma-clamped to fit sRGB (hue and lightness preserved).

Lightness curve
Gamut
Tailwind v4 @theme
globals.css
@theme {
  --color-primary-50: oklch(0.971 0.0137 259.81);
  --color-primary-100: oklch(0.8917 0.0527 259.81);
  --color-primary-200: oklch(0.8124 0.0942 259.81);
  --color-primary-300: oklch(0.7331 0.1383 259.81);
  --color-primary-400: oklch(0.6538 0.1837 259.81);
  --color-primary-500: oklch(0.5745 0.188 259.81);
  --color-primary-600: oklch(0.4952 0.1837 259.81);
  --color-primary-700: oklch(0.4159 0.1679 259.81);
  --color-primary-800: oklch(0.3366 0.1359 259.81);
  --color-primary-900: oklch(0.2573 0.1039 259.81);
  --color-primary-950: oklch(0.178 0.0719 259.81);
}
HEX values
primary-50: #f0f6ff
primary-100: #c7ddff
primary-200: #9ec3ff
primary-300: #74a9ff
primary-400: #478cfe
primary-500: #2c73e5
primary-600: #135ac8
primary-700: #0044a5
primary-800: #00317b
primary-900: #001f54
primary-950: #000e30

Color-vision preview

How this palette appears to viewers with each color-vision deficiency. If steps that should read as distinct merge, add a non-color cue or widen their lightness.

How to use the theme builder

Enter your brand color (it anchors the hue and the mid-tone chroma), name the palette, and choose a lightness curve and target gamut. The 11-stop ramp updates live — click any swatch to copy its hex. Copy the @theme block into your Tailwind v4 globals.css and the bg-/text-/border- utilities are generated for you. The full configuration is encoded in the URL, so a palette is a shareable link.

Why OKLCH scales are better

A color scale needs even *perceptual* steps so that, say, 500 on white and 500 on a dark card read with comparable contrast. OKLCH delivers that because its lightness axis matches human perception. This tool fixes the hue, eases lightness across the ramp, and peaks chroma in the mid-tones — then clamps each stop into your chosen gamut with culori so it’s always displayable.

Frequently asked questions

How does Tailwind v4 handle custom colors?

Tailwind v4 defines theme tokens as CSS custom properties inside an `@theme` block in your CSS, rather than in a JavaScript config. A color like `--color-primary-500: oklch(0.62 0.19 256)` automatically generates utilities such as `bg-primary-500` and `text-primary-500`. This tool emits exactly that block — paste it into your `globals.css`.

Why generate the scale in OKLCH instead of HSL?

OKLCH is perceptually uniform: equal lightness steps look equally spaced to the eye, and a fixed chroma keeps saturation consistent across the ramp. HSL's lightness is not perceptual, so an HSL ramp produces uneven contrast — some stops look muddy, others wash out. An OKLCH ramp gives predictable, accessible contrast between stops.

What does the lightness curve do?

It controls how the 11 lightness values are distributed between the lightest (50) and darkest (950) stops. 'Linear' spaces them evenly; 'ease-in' and 'ease-out' bias the steps toward the light or dark end, which can give more usable mid-tones depending on your design. Hue stays fixed and chroma peaks around 500–600 either way.

Why are some stops marked as chroma-clamped?

Vivid colors at mid lightness can request more chroma than a display gamut can show. Rather than clip the RGB channels (which shifts the hue), each stop is chroma-clamped — chroma is reduced just enough to fit sRGB or Display P3 while preserving the hue and lightness. Choosing Display P3 keeps more saturation for P3-capable screens.

Can I use Display P3 colors in Tailwind?

Yes — `oklch()` values can exceed sRGB, and browsers render the wider-gamut color on P3-capable displays while falling back gracefully elsewhere. Pick the P3 gamut here to keep more chroma in the mid-tones; pick sRGB for the most conservative, universally-identical output.

Related tools

References

This tool’s color math is grounded in the following standards and primary sources.

Reviewed by Jimmy Raymond, Engineer
B.S. Environmental Engineering · B.S. Computer Science · Last reviewed June 2, 2026

Spotted an error? Let us know — reader corrections are the best review this site gets.