What is OKLCH and why use it over HSL?

OKLCH is a perceptual colour space: equal numeric steps look like equal perceptual steps. HSL's lightness does not work that way — `hsl(60 100% 50%)` is bright yellow and `hsl(240 100% 50%)` is dark blue, both claiming 50% lightness. If your palette depends on colours matching in brightness, HSL will not give you that and OKLCH will.

Why does it say a colour was reduced?

Because the colour you asked for is outside what sRGB can display. Rather than clipping the channels — which changes the hue — the tool reduces chroma while holding lightness and hue, so you get a duller version of the same colour instead of a different one.

What chroma value should I use?

Around 0.1 to 0.15 for a palette that stays in gamut across every hue. Up to about 0.2 works for a limited hue range. Above 0.25 only blues and magentas can reach it, so most of the palette will be reduced.

Can I use oklch() in CSS today?

Yes, in current versions of every major browser. Hex values are given alongside for older ones, and the usual approach is a hex fallback declaration followed by the `oklch()` one.

Is an OKLCH palette automatically accessible?

No. Equal perceptual lightness helps a palette look balanced, and does not by itself guarantee readable text or distinguishable series. Check text pairings for contrast, and do not rely on colour alone to convey meaning.

OKLCH Colour Palette Generator

Generates palettes in OKLCH rather than HSL, which matters more than it sounds. In HSL, a yellow and a blue at the same stated lightness look nothing alike; in OKLCH they genuinely match. You get hex for compatibility, CSS `oklch()` for modern browsers, and a warning wherever a colour had to be dulled to fit what a screen can show.

Harmony

Colours

Between 2 and 12.

Base hue or hex colour

Degrees from 0 to 360, or a hex colour to take its hue. Leave blank to draw one.

Lightness (×100)

Perceptual lightness. 65 suits a light background; around 75 reads better on a dark one.

Chroma (×1000)

How colourful. sRGB tops out near 320 and only for blues; 140 stays in gamut for every hue.

Your palette will appear here.

What this generator does

Produces a set of colours related by hue, at a lightness and chroma you control, in a colour space built so that equal numbers look like equal amounts. The practical difference from the HSL palette generator is that setting one lightness for the whole palette actually produces a palette of one lightness. It also tells you when a colour you asked for does not exist on screen — most of the OKLCH space is outside sRGB, and reducing chroma to fit is the difference between a duller version of your colour and a completely different one.

How to use this tool

Choose a harmony — analogous, complementary, triadic, tetradic, split complementary or an even spread.
Set the lightness and chroma you want, or accept the defaults.
Choose a base hue, or let one be drawn.
Press Generate palette, then copy the hex or the CSS.

Understanding the controls

Harmony: The hue relationship between the colours. Analogous keeps them neighbouring and calm; complementary puts them opposite for maximum contrast; triadic and tetradic space them evenly; an even spread distributes however many you asked for around the whole wheel.
Lightness: Perceptual lightness from 0 to 1, where 0 is black and 1 is white. Unlike HSL's lightness, this one means the same thing in every hue — 0.65 looks equally light whether the colour is yellow or blue.
Chroma: How colourful, from 0 (grey) upwards. sRGB tops out around 0.32 and only near blue; at most lightnesses and hues the ceiling is much lower, which is why some values get reduced.
Base hue: Where on the hue circle the palette starts, in degrees. Roughly: 30 is orange, 110 yellow-green, 150 green, 200 cyan, 265 blue, 330 pink.

Worked examples

Even, 4 colours, L 0.65 C 0.14: Four colours a quarter-turn apart that read as equally prominent — usable directly as chart series.
Complementary at L 0.55: Two opposite hues at matched lightness, so neither dominates and both take the same text colour.
Chroma 0.3 across the wheel: Several colours reduced, because blue reaches roughly 0.31 at mid lightness while yellow-green reaches barely half that.

Common use cases

A design system where the brand colours must feel equally weighted
A data visualisation that needs colours of matched prominence
A dark and light theme pair, where OKLCH makes flipping lightness predictable
Modern CSS work where `oklch()` is already in the stylesheet
Any palette where an HSL version came out with one colour visually shouting

How this generator works

OKLab, published by Björn Ottosson in 2020, is built so that Euclidean distance in the space approximates perceived colour difference; OKLCH is its polar form, giving lightness, chroma and hue. A palette is generated by holding lightness and chroma constant and stepping hue by the harmony's angles. Every resulting colour is then gamut-mapped: chroma is reduced by binary search, holding lightness and hue, until the colour fits sRGB. That approach is what CSS Color 4 specifies, and it matters because the obvious alternative — clipping the red, green and blue channels — shifts the hue, since the three channels clip by different amounts.

Randomness and fairness

Only the base hue is random, and only when you have not set one; it is drawn with the browser's cryptographic random number generator. Everything after that is deterministic — the harmony angles, the conversion to sRGB and the gamut mapping are all arithmetic. A seed makes the drawn hue reproducible.

For how randomness is produced across the whole site, see how Generate Random works.

Limitations and good to know

OKLCH describes far more colours than a screen can display. Anything outside sRGB is dulled to fit, and the tool marks which ones — the value you asked for is not always the value you get.
A single chroma cannot be equally saturated across all hues, because the sRGB gamut is not a cylinder. Yellows and greens run out of room long before blues do.
Equal OKLCH lightness is not equal WCAG contrast. They are different models built for different purposes, and a palette at one lightness will still vary somewhat in measured contrast ratio.
Colour is only one part of accessibility. Matched lightness is exactly wrong for colour-blind users if lightness is the only thing distinguishing two series — use shape, position or labels as well.
`oklch()` in CSS needs a reasonably current browser. The hex values are given alongside for anywhere that does not support it.

Common mistakes

Asking for a chroma sRGB cannot reach: Values above about 0.2 are out of gamut for most hues at most lightnesses. The tool marks the reduced ones — lower the chroma until nothing is flagged if you want exactly what you asked for.
Assuming equal lightness means equal contrast: It does not, quite. Check any text pairing against the contrast tool rather than assuming a matched-lightness palette is accessible.
Converting an HSL palette by changing the function name: The numbers mean different things. `hsl(200 60% 50%)` and `oklch(0.5 0.6 200)` are unrelated colours — convert through hex or regenerate here.

Practical tips

Start at lightness 0.65 and chroma 0.14 — comfortably inside gamut for every hue, so nothing gets reduced.
For a light and dark theme pair, keep hue and chroma and move lightness. That is the manoeuvre OKLCH makes predictable and HSL does not.
Paste the `oklch()` values rather than the hex if your browser support allows; they are far easier to adjust later.

Privacy and your data

Nothing is entered and nothing is stored. Colours are calculated in your browser and are not uploaded or written into the page address, so copy any palette you want to keep. Analytics records the harmony and count, never the colours.

Frequently asked questions

What is OKLCH and why use it over HSL?: OKLCH is a perceptual colour space: equal numeric steps look like equal perceptual steps. HSL's lightness does not work that way — `hsl(60 100% 50%)` is bright yellow and `hsl(240 100% 50%)` is dark blue, both claiming 50% lightness. If your palette depends on colours matching in brightness, HSL will not give you that and OKLCH will.
Why does it say a colour was reduced?: Because the colour you asked for is outside what sRGB can display. Rather than clipping the channels — which changes the hue — the tool reduces chroma while holding lightness and hue, so you get a duller version of the same colour instead of a different one.
What chroma value should I use?: Around 0.1 to 0.15 for a palette that stays in gamut across every hue. Up to about 0.2 works for a limited hue range. Above 0.25 only blues and magentas can reach it, so most of the palette will be reduced.
Can I use oklch() in CSS today?: Yes, in current versions of every major browser. Hex values are given alongside for older ones, and the usual approach is a hex fallback declaration followed by the `oklch()` one.
Is an OKLCH palette automatically accessible?: No. Equal perceptual lightness helps a palette look balanced, and does not by itself guarantee readable text or distinguishable series. Check text pairings for contrast, and do not rely on colour alone to convey meaning.