Wide gamut: what Display P3 changes for web design
Most screens sold in the last five years can show colors sRGB cannot express. Here is how to use them without breaking everything else.
Tag
oklch
4 articles on oklch.
OKLCH, and why it is worth switching
OKLCH is OKLab in cylindrical form: perceptual lightness, chroma as an absolute distance from gray, and hue as an angle. Its useful property is uniformity — equal numeric steps look like equal steps, and changing hue at fixed L and C does not change how light the color appears. HSL gets both of those wrong, which is why an HSL ramp bunches up at the dark end and why HSL yellow at 50% lightness looks nothing like HSL blue at 50% lightness.
Chroma being absolute rather than a percentage is the part that trips people up first, and it is also the point. The maximum chroma available depends on lightness and hue — sRGB simply holds more saturated yellow than saturated blue — so an honest space cannot express saturation as "100%". Ask for more than the gamut has and something must give.
It is a CSS feature now, not a future one: oklch() ships in every current browser, and @supports covers the rest. Generated ramps, hover states, and accessible palettes all get easier when the space you compute in matches the space the eye reports.
All 4 articles
The muddy middle: why your gradients go gray
Blue to yellow should pass through green. In CSS it passes through gray. The cause is one line in the spec and the fix is one keyword.
Building a color ramp that survives contact with real UI
One brand color is not a palette. Here is how the 50–950 scale works, why the ends always look washed out, and which step you should actually be using for text.
Why HSL lies to you, and what to use instead
HSL claims that every hue at 50% lightness is equally light. Look at pure yellow next to pure blue and you can see that it is not true. Here is what that costs you.
Tools for oklch
- OKLCH ExplorerThe color space CSS finally gave us. Learn it here.
- HEX to OKLCH ConverterHEX color code in, OKLCH out — with the working shown.
- Tailwind Palette GeneratorA full 50–950 ramp from one brand color.
- Shades, Tints & TonesToward black, toward white, toward gray.
- Universal Color ConverterEvery notation the web understands, at once.