OKLCH Color Palette Generator
Learn: Color modes→Set lightness, chroma, and hue directly, see exactly how much chroma sRGB can show, and copy oklch() values for every step.
Inside sRGB. This lightness and hue allow up to 0.249 chroma — 0.079 more than you are using.
Generated scale
8 of 10 steps sit at the sRGB boundary — the most vivid this hue gets at those lightnesses.
#F0F5FF
oklch(97.0% 0.015 263.9)
#C7DAFF
oklch(88.6% 0.056 263.9)
#9DBEFF
oklch(80.2% 0.100 263.9)
#74A1FF
oklch(71.8% 0.147 263.9)
#4A81FF
oklch(63.4% 0.197 263.9)
#3C6AD3
oklch(54.9% 0.170 263.9)
#023AE3
oklch(46.2% 0.255 263.9)
#0026B0
oklch(37.5% 0.215 263.9)
#00167C
oklch(28.7% 0.168 263.9)
#000054
oklch(20.0% 0.140 263.9)
Why build palettes in OKLCH
OKLCH describes a color as three numbers: lightness (how light it looks, 0% to 100%), chroma (how saturated, from 0 to roughly 0.37), and hue(the angle on the color wheel, 0° to 360°).
The reason to prefer it over HSL is that its lightness is perceptual. In HSL, hsl(60 100% 50%) is a bright yellow and hsl(240 100% 50%) is a dark navy — both claiming 50% lightness. Hold HSL lightness constant across a palette and the result looks lopsided, because the number is not measuring what your eye measures. Hold OKLCH lightness constant and it genuinely reads as even.
That is what makes OKLCH the right space for design tokens. A scale stepped evenly in OKLCH lightness produces steps that look evenly spaced, so a component styled against step 600 keeps the same visual weight when you swap the hue underneath it.
The chroma ceiling, and why colors shift
OKLCH can describe colors that no sRGB screen can display. That is a feature — it is a model of human vision, not of a monitor — but it means a value you type may not be a value you can see, and this is the single most common source of “my OKLCH color came out wrong.”
The amount of chroma available depends on bothlightness and hue, and the variation is large. A blue at 50% lightness has around 0.28 chroma to play with. The same hue at 95% lightness has about 0.02 — there is almost no room for saturation near white, because sRGB's blue primary is itself a dark color. Yellow runs the other way, staying vivid well into the light end.
When a value exceeds what fits, this generator reduces chroma and holds lightness and hue fixed. That matters: clamping the red, green, and blue channels instead — the naive approach — shifts the hue, so a light blue drifts toward cyan. Reducing chroma keeps the color recognisably yours and simply less saturated.
It is also why several steps of a saturated scale are usually marked as sitting at the boundary. They are not errors. They are the most vivid colors that hue can reach at those lightnesses — the scale is pressed right up against what sRGB can do.
Using oklch() in CSS
The CSS function takes its three values separated by spaces: oklch(55% 0.17 264). There is no comma-separated form — unlike rgb() and hsl(), which kept a legacy syntax with commas, a comma inside oklch() simply fails to parse. Every value on this page is emitted in the correct form.
Copy CSS variables gives you a :root block keyed 50 through 900, ready for a Tailwind v4 @theme block or any token pipeline.
Frequently asked questions
- What is OKLCH?
- OKLCH is a way of describing color by lightness, chroma, and hue rather than by how much red, green, and blue to mix. Its advantage is perceptual uniformity: two colors with the same L value look equally light, which is not true of HSL. That makes it the right space for building scales, because you can change hue without accidentally changing how light a color appears.
- How is OKLCH different from HSL?
- HSL's lightness is a geometric midpoint, not a perceptual one. hsl(60 100% 50%) is a vivid yellow and hsl(240 100% 50%) is a dark blue, yet both claim 50% lightness — so a palette built by holding HSL lightness constant comes out visually uneven. OKLCH is built on measurements of human vision, so equal L really does mean equally light, and a scale built in it steps evenly.
- Why does my OKLCH color look different from what I typed?
- Because you asked for more chroma than sRGB can display at that lightness and hue. OKLCH can describe colors no screen can show, so the value gets mapped back into the gamut. This generator handles that by reducing chroma while holding lightness and hue exactly — you get the most saturated version that fits, in the same hue, rather than the hue shift you would get from clamping RGB channels.
- How much chroma can I actually use?
- It depends on both lightness and hue, and the range is wider than most people expect. A blue at 50% lightness has roughly 0.28 chroma available; the same blue at 95% lightness has about 0.02. Yellow behaves in the opposite direction, holding chroma well into the light end. The chroma slider on this page shades the region sRGB cannot reach, so the ceiling is visible and moves as you drag.
- Do browsers support the oklch() CSS function?
- Yes — oklch() is supported in every current major browser. The syntax is space-separated, like oklch(55% 0.17 264); there is no comma-separated form, unlike the legacy rgb() and hsl() syntax. Every value on this page is copy-ready.
- Can I use this for Tailwind or design tokens?
- Yes. Copy CSS variables gives you a :root block of oklch() values keyed 50 through 900, which drops straight into a Tailwind v4 @theme block or any design-token pipeline. Sending the scale to Perfect Palette adds role mapping, contrast scoring, and the full export set.