Des dégradés OKLCH qui ne virent jamais au gris

Mix blue and orange in sRGB and the middle of the gradient turns a muddy grey. That is not your palette's fault — it is the colour space.

Why sRGB goes grey

sRGB interpolates the red, green and blue channels in a straight line. Between two saturated colours on opposite sides of the wheel, that line passes close to the neutral axis, so chroma collapses at the midpoint.

Interpolate in OKLCH instead

background: linear-gradient(in oklch 115deg, var(--c1), var(--c2));

OKLCH keeps lightness and chroma moving smoothly and rotates the hue around the wheel. Amethyst to apricot passes through pink, like a sunset, instead of through grey.

Check contrast at every point

A gradient used for text has to pass contrast everywhere, not just at its ends. This site samples 21 points along each c1→c2 gradient, converts them to sRGB and checks each one against the background. The weakest point in all ten palette modes is 4.67:1, so gradient text passes WCAG AA.

Register your tokens

Declaring colour tokens with @property (syntax: '<color>') makes them animatable and type-checked by the browser — a small line of CSS that pays for itself.