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
color spaces
3 articles on color spaces.
The spaces, and what each is for
A color space is a coordinate system, and choosing the wrong one makes easy problems hard. sRGB describes what a display emits and is device-referred: its numbers are gamma-encoded, so averaging two of them does not give you the color halfway between. HSL is sRGB in polar form — convenient to type, perceptually dishonest, because its L is not lightness in any sense your eye agrees with.
CIE Lab and LCH are the classical perceptual spaces, built from color-matching experiments in the 1930s and refined for decades. They are device-independent and roughly uniform, which is what makes ΔE a meaningful measure of "how different do these look". OKLab and OKLCH are the modern revision: same idea, substantially better hue uniformity, and no blue-purple shift when you interpolate.
CMYK is the odd one out. It is subtractive, it describes ink on paper, and without an ICC profile for a specific press and stock any RGB→CMYK conversion — including the one on this site — is an approximation good enough for a mockup and no more.
All 3 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.
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 color spaces
- Universal Color ConverterEvery notation the web understands, at once.
- OKLCH ExplorerThe color space CSS finally gave us. Learn it here.
- HEX to OKLCH ConverterHEX color code in, OKLCH out — with the working shown.
- RGB to Lab ConverterRGB in, CIE Lab out — with the working shown.
- HEX to CMYK ConverterHEX color code in, CMYK out — with the working shown.