OKLCH color palette generator for Tailwind CSS v4

Generate an 11 step OKLCH color scale from any hex or hue, gamut mapped to sRGB with contrast checks. Export Tailwind CSS v4 @theme variables or hex values.

Start from a hex

Color name

Hue262°

Chroma0.200

Peak saturation at step 500. Steps outside sRGB are pulled in automatically.

globals.csscss

@theme {
  --color-brand-50: oklch(0.975 0.012 262);
  --color-brand-100: oklch(0.945 0.026 262);
  --color-brand-200: oklch(0.89 0.053 262);
  --color-brand-300: oklch(0.81 0.095 262);
  --color-brand-400: oklch(0.71 0.151 262);
  --color-brand-500: oklch(0.62 0.2 262);
  --color-brand-600: oklch(0.54 0.192 262);
  --color-brand-700: oklch(0.46 0.172 262);
  --color-brand-800: oklch(0.38 0.144 262);
  --color-brand-900: oklch(0.29 0.112 262);
  --color-brand-950: oklch(0.21 0.084 262);
}

How to use it

1Paste a brand hex or drag the hue and chroma sliders.
2Check each step's contrast against white and black text.
3Name the color, then copy the Tailwind v4 @theme block or the hex list.

Why OKLCH for palettes

In OKLCH, lightness is perceptual, so a 500 blue and a 500 yellow look equally bright. That makes scales predictable: step 600 reliably carries white text, step 100 reliably works as a tint, whatever the hue. HSL cannot promise that.

Very saturated colors do not exist in sRGB at every lightness, so the generator reduces chroma where needed and keeps hue and lightness fixed. Every swatch you see is a real, displayable color.

Using the scale in Tailwind CSS v4

css

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.62 0.19 250);
  --color-brand-600: oklch(0.54 0.18 250);
}

/* then: bg-brand-500 text-white hover:bg-brand-600 */

For product UI, map the scale to semantic tokens such as --accent and --accent-hover rather than using steps directly. The OKLCH in Tailwind v4 guide shows a full light and dark token set.

Frequently asked questions

What is OKLCH?

OKLCH is a color space with lightness, chroma and hue axes designed to match human perception. Tailwind CSS v4 uses it for its default palette.

Can I convert OKLCH to hex?

Yes. Every swatch shows its hex value, converted after gamut mapping to sRGB, so the hex matches what the browser renders.

Which step should I use for buttons?

Steps 500 to 600 usually carry white text at 4.5:1 or better. The contrast badges on each swatch tell you for your exact color.