Tailwind CSS v4 OKLCH Generator
Enter a brand color and name, get a ready-to-paste @theme block with a full 50–950 scale.
50
#edf9ff
19.6:1 · Pass
sRGB
100
#d3eaff
16.9:1 · Pass
sRGB · ΔE 7.2
200
#a8ceff
13.0:1 · Pass
sRGB · ΔE 9.8
300
#81b4ff
9.9:1 · Pass
sRGB · ΔE 7.7
400
#5e9bff
7.6:1 · Pass
sRGB · ΔE 7.2
500
#3b82f6
5.7:1 · Pass
sRGB · ΔE 8.0
600
#2863c1
5.8:1 · Pass
sRGB · ΔE 12.7
700
#1b4994
8.6:1 · Pass
sRGB · ΔE 9.6
800
#0f326b
12.4:1 · Pass
sRGB · ΔE 8.3
900
#061e45
16.5:1 · Pass
sRGB · ΔE 7.6
950
#031433
18.2:1 · Pass
sRGB · ΔE 3.7
Component preview
Badge
Alert. A card / alert tinted with the generated scale to preview real UI usage.
@import "tailwindcss";
@theme {
--color-brand-50: oklch(0.976 0.015 225.93);
--color-brand-100: oklch(0.926 0.038 247.2);
--color-brand-200: oklch(0.842 0.08 254.37);
--color-brand-300: oklch(0.765 0.121 257.47);
--color-brand-400: oklch(0.695 0.16 259.75);
--color-brand-500: oklch(0.623 0.188 259.81);
--color-brand-600: oklch(0.514 0.161 259.81);
--color-brand-700: oklch(0.419 0.134 259.81);
--color-brand-800: oklch(0.329 0.107 259.81);
--color-brand-900: oklch(0.243 0.079 259.81);
--color-brand-950: oklch(0.2 0.066 259.81);
}Built for Tailwind v4's @theme
Tailwind v4 uses CSS-first configuration: colors live as --color-*custom properties inside an @theme block, and Tailwind's own default palette is already expressed in OKLCH. This generator produces exactly that shape, so bg-brand-500 and text-brand-700 just work.
Copy, preview, ship
- Name validation keeps your utility prefix clean.
- Live preview shows buttons, inputs and alerts in the scale.
- Switch gamut to sRGB, P3 or Rec.2020 for the vividness you need.
Frequently asked questions
How do I use OKLCH in Tailwind v4?
Tailwind v4 defines colors as design tokens in an @theme block. Paste the generated --color-{name}-{step} variables and use them as bg-{name}-500, text-{name}-700, etc.
Does it support Tailwind v3?
Yes — switch the export tab to Tailwind v3 for a tailwind.config.js color object using hex values.
Will the colors work in older browsers?
OKLCH is widely supported. For legacy targets, keep an sRGB fallback; the exported hex in the v3 output is a ready fallback set.