What OKLCH is and why palette tools moved to it

In oklch(55% 0.12 265) the first number is lightness, the second chroma, the third hue. Lightness is the useful one: two colors at the same OKLCH lightness look about as light as each other whatever their hue, so changing only the hue keeps a design's light and dark areas where they were. Chroma says how far from grey the color is, and the hue angle goes round the color wheel. A hover state that is a little darker is one number changed:

.button {
  background: oklch(55% 0.12 265);   /* a mid blue */
}

.button:hover {
  background: oklch(48% 0.12 265);   /* the same blue, 7 points darker */
}

Browsers have supported oklch() widely since May 2023, according to MDN.

HSL also has hue, saturation and lightness, but its lightness is arithmetic, not perception. Pure yellow and pure blue are both "50% lightness" in HSL. In OKLCH they are 96.8% and 45.2%, and against white text they give 1.07:1 and 8.59:1. A palette built by keeping HSL lightness and changing hue swings wildly in contrast; one built in OKLCH does not. Keeping a palette accessible works through what that means for text, and black or white text on a color shows the formula behind the ratios.

Oklab, the space under OKLCH, is built so that the straight-line distance between two colors tracks how different they look. Recolor relies on that twice. When it reads a page, colors closer than 0.04 are reported as one cluster, since nobody tells them apart. When it generates a palette, neighboring swatches are kept at least 0.08 apart, so no two look like the same color.

OKLCH can name colors that an sRGB screen cannot show, and how much chroma fits depends on the lightness and the hue. At 70% lightness sRGB holds a chroma of about 0.220 for a green (hue 145) but only 0.156 for a blue (hue 265). A color outside the gamut is brought back by lowering its chroma while keeping lightness and hue, which is what Recolor does for every color it generates or maps. Wide-gamut displays (Display P3) can show more of the space, and oklch() lets CSS ask for it.

Tailwind CSS v4 writes its default palette in OKLCH, so its shades step evenly in lightness; Tailwind v4 @theme colors shows the values. Recolor generates palettes on a lightness ladder of 25%, 45%, 62%, 80%, 93%, so every palette has a dark, a light and mid-tones, picks hues by color scheme, and fits chroma to what sRGB allows. When it maps a page to a palette it works in OKLCH too: the hue comes from the swatch, chroma and lightness move by the Strength setting, and large lightness shifts are held back, as Strength, neutral tint and overrides explains. Every page in the palette gallery lists its colors in OKLCH.