Gradient Interpolation Comparer
Compare the same gradient interpolated in sRGB, OKLCH and HSL side by side, and see why blue to yellow passes through grey in the default space and how to fix it.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
The grey dead zone
A gradient from blue to yellow in the default sRGB interpolation passes through a muddy grey in the middle. This is not a rendering fault: sRGB mixes by averaging the red, green and blue channels, and the average of a saturated blue and a saturated yellow genuinely is a desaturated grey. Every gradient between two colours on opposite sides of the wheel does it, and it is the most common complaint about CSS gradients.
Interpolating in a perceptual space fixes it
OKLCH interpolates along lightness, chroma and hue separately, so chroma stays high through the middle and the gradient travels around the hue wheel rather than straight through the neutral centre. The same two colours produce a gradient that holds far more of its colour through the middle. It is not a complete fix for every pair: the perceptual midpoint of two very saturated opposite hues can fall outside the sRGB gamut, where it is clipped back to something displayable and loses chroma anyway. The tool measures the actual drop in each space so you can see how much of the improvement survives for your particular colours. CSS supports this with the "in oklch" syntax inside the gradient function, and it needs no fallback beyond declaring the plain gradient first.
Hue interpolation has a direction
Going from red to green can travel through yellow or through blue, and both are valid. The default takes the shorter way round, which is usually right and occasionally not. The longer hue keyword takes the other route, which is how a two-colour gradient can be made to sweep through most of the spectrum. Choosing deliberately matters most when the two hues are close to opposite, where shorter and longer produce completely different gradients.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Why does my gradient go grey in the middle?
Because sRGB interpolation averages the red, green and blue channels, and the average of two colours from opposite sides of the wheel genuinely is a desaturated grey. It is arithmetic rather than a rendering fault.
How do I fix it?
Add "in oklch" to the gradient function. The colour stops stay the same and only the path between them changes, which holds far more chroma through the middle. For two very saturated opposite hues the midpoint can still fall outside the sRGB gamut and be clipped, so the improvement is large rather than total.
What does the longer hue keyword do?
It sends the gradient the other way around the hue wheel. The default takes the shorter route, which is usually right; longer is how a two-colour gradient can be made to sweep through most of the spectrum.
Do I need a fallback?
Declaring the plain gradient first is enough. A browser that does not understand the interpolation syntax discards that declaration and keeps the earlier one, so the gradient still renders.
Which space should I use?
OKLCH for most gradients, since it keeps saturation and reads as even. sRGB when you specifically want the desaturated middle, which happens for subtle overlays. HSL is rarely the right answer, since its lightness is not perceptual.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Enter two colours to compare how the gradient between them looks in each colour space.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.