FileGizmo glossary
OKLCH
OKLCH describes a colour by perceived lightness, chroma and hue. Its lightness axis tracks human vision closely, so two colours with the same L look about equally bright. HSL claims the same idea and does not deliver it, which is why palettes built in HSL come out uneven.
Colour formats fall into two groups: those that describe how a colour is stored, and those that try to describe how it looks. OKLCH is in the second group and is the first widely available one that succeeds.
The problem it solves
HSL was the earlier attempt. Its three axes are hue, saturation and lightness, which are the right three ideas, and its lightness is computed as a geometric average of the red, green and blue channels, which is not how eyes work.
The consequence is easy to see. Pure yellow and pure blue both have a lightness of 50% in HSL. One of them is dazzling and the other is nearly black. A palette built by holding lightness constant and rotating the hue, which is the obvious way to build one, comes out with some colours dominating and others disappearing.
OKLCH replaces that lightness with one fitted to measurements of human vision. Hold L constant and rotate the hue and the colours look about equally bright, which is what the technique assumed all along.
The three parts
Lightness runs from 0 to 100%, and 50% means what it looks like it means.
Chroma is how colourful the colour is. It has no fixed maximum, because how much chroma is available depends on the lightness and the hue and on the display. A vivid yellow can reach a higher chroma than a vivid blue.
Hue is an angle in degrees, as in HSL, though the angles do not line up between the two formats.
Where it matters
Anywhere lightness is the thing being controlled. Building a scale of tints that step evenly, keeping a set of category colours equally prominent, or adjusting a colour until it passes a contrast requirement are all operations on lightness, and doing them in a format whose lightness is not perceptual means guessing and checking.
Frequently asked questions
How is OKLCH different from HSL?
Both use hue, but their lightness axes are different. HSL lightness is a geometric average of the red, green and blue channels; OKLCH lightness is fitted to how bright a colour looks. Pure yellow and pure blue are both 50% in HSL and are visibly not equally bright.
What is chroma?
How colourful the colour is, roughly what saturation tries to describe. Unlike saturation it is not capped at 100%, because how much chroma is achievable depends on the lightness and hue and on what the screen can show.
Can every OKLCH value be displayed?
No. The format can describe colours outside what a screen can produce, so a value has to be checked against the display gamut and pulled back into it if needed.