Why your gradient goes grey in the middle
Because sRGB interpolation runs the midpoint through nowhere. The fix is one keyword, and understanding it fixes half your colour problems.
Hex and rgb describe how much of each phosphor to light up, which has almost nothing to do with how bright a colour looks. #0000ff and #ffff00 have the same nominal maximum and one of them is far darker to a human eye. This is why a ramp built by adjusting hex values by hand always has a step that jumps.
oklch describes lightness, chroma and hue in a way that matches perception. Holding L steady across a set of hues gives you colours that read as equally bright, and stepping L evenly gives you a ramp with no visible jumps. It is the format worth writing your tokens in, and every browser that matters supports it.
The grey gradient is the same problem. Interpolating from blue to yellow through sRGB passes through desaturated mud; adding in oklch to the gradient declaration routes it through colours that stay saturated. One keyword, immediately visible difference.
You should now be able to
- Explain the difference between sRGB and a perceptual space
- Use oklch to build a ramp with even lightness steps
- Interpolate a gradient in a space that keeps its saturation
Loading…