Gradient Interpolation
Compare the same gradient interpolated in sRGB, HSL, LAB and OKLAB.
Same two stops, seven interpolations
Watch the middle of each band: dull midpoints mean the space is losing light on the way across.
OKLabmidpoint lightness 65.8%
Perceptually even — the modern default.
OKLCHmidpoint lightness 65.8%
Like OKLab but travels around the hue circle.
CIE Labmidpoint lightness 65.7%
Even lightness, slightly less even hue.
LCHmidpoint lightness 66.8% · brightest
Vivid mid-tones, can swing through odd hues.
Linear sRGBmidpoint lightness 66.6% · brightest
Physically correct light mixing.
sRGBmidpoint lightness 61.2%
The CSS default — muddy through the middle.
HSLmidpoint lightness 65.6%
Rainbow detours between distant hues.
Stops
0
CSS
Modern browsers interpolate in the space you name.
OKLab
background: linear-gradient(in oklab, #2563eb, #f59e0b);
OKLCH
background: linear-gradient(in oklch, #2563eb, #f59e0b);
CIE Lab
background: linear-gradient(in lab, #2563eb, #f59e0b);
Fallback first
background: linear-gradient(90deg, #2563eb, #f59e0b);
background: linear-gradient(in oklab 90deg, #2563eb, #f59e0b);