Gradient lab / CSS Color 4

Blue to yellow, and halfway the gradient is pure grey

Two bright colours go in. A dead patch comes out. The default gradient mixes numbers, not colours. See how much colour your own pair loses, and which fix keeps it.

Colour kept at the dullest point
0%
sRGB (CSS default)

Guess first. Blue (#0000ff) to yellow (#ffff00), CSS default. How much colour is left at the dullest point?

50%

Try your own pair

Pick two colours. Four strips, same endpoints, four ways of mixing. The white tick marks each strip's dullest point.

Vertical axis: OKLab chroma, how colourful each step is. Dips are where the gradient goes muddy.


  




Where it hurts most


Twelve pairs, four spaces. Each cell is colour kept at the dullest point (100% means no dip). Tap a cell to load that pair and space above.





What is happening


The default sRGB gradient averages the red, green and blue numbers. Opposite colours cancel out: blue (0, 0, 255) and yellow (255, 255, 0) average to (128, 128, 128). OKLab was built so that equal steps look like equal steps, and OKLCH goes around the hue wheel instead of through the middle, so it keeps chroma. The price: OKLCH can leave the sRGB screen gamut, and this page clips those colours to the nearest displayable one.


Fix in one line: add in oklch (or in oklab) right after linear-gradient(.



Sources