Gradient Interpolator
See the same gradient interpolated in sRGB, OKLCH, and OKLab. Spot muddy midpoints and pick the right CSS interpolation hint.
Why Your Two-Color Gradients Have a Muddy Middle
Pick a vivid blue and a vivid yellow, drop them into any CSS gradient builder that does not specify an interpolation method, and look at the middle. It turns gray. This is not a browser bug; it is the inevitable result of interpolating in sRGB, where the midpoint between two saturated colors of opposite hues is the closest grayish color, not a saturated intermediate. The problem becomes obvious on any gradient with a strong hue rotation, and it is the reason hand-tuned design systems always add intermediate color stops to keep the middle from going muddy. CSS Color Module Level 4 added a fix: the in oklch and in oklab keywords on the linear-gradient and radial-gradient functions tell the browser to interpolate in a perceptually uniform space instead of sRGB. The midpoint stays saturated and the hue moves smoothly around the wheel, which is what most people actually want from a gradient. The change is one line of CSS and the result is dramatically better gradients with zero intermediate stops.
Four Interpolation Modes Side by Side
The tool renders the same two-color gradient four times: the default sRGB interpolation that has been the web standard since CSS gradients shipped, plus three modern modes available in CSS today. OKLCH interpolation moves through the perceptually uniform polar space, which gives the most vivid midpoints because hue is interpolated as an angle rather than mixing the red, green, and blue channels separately. OKLab interpolation moves through the cartesian version of the same space, which gives less vivid midpoints than OKLCH but smoother lightness transitions and is the better choice when you want to avoid hue rotation through unintended colors. HSL interpolation moves through the older HSL hue wheel, which has the same vividness benefits as OKLCH but suffers the perceptual non-uniformity that HSL inherits across hues. For most modern web work OKLCH is the default best choice; OKLab is the right pick for gradients between similar hues where you want strict lightness control. The CSS output panel shows the exact one-line declaration to copy.
Practical Recipes for the Most Common Gradient Types
Brand gradient with two complementary colors: use in oklch shorter hue to keep the midpoint vivid without taking the long way around the wheel. Subtle hero background between two close hues: use in oklab to avoid any hue rotation. Rainbow or full-spectrum gradient: use in oklch longer hue and let the gradient sweep across the full wheel. Neutral fade like white to gray: any interpolation space works because there is no chroma to muddy. Brand color to its dark mode equivalent: use in oklch with the lightness and chroma adjusted separately, since the perceptual uniformity means the midpoints look like consistent dark-mode-friendly versions of the same hue. Each of these recipes is one line of CSS and works in every browser that supports OKLCH, which is the same 95 percent coverage as the OKLCH function itself.
Frequently Asked Questions
What does in oklch mean in a CSS gradient?+
It is an interpolation method specifier added in CSS Color Module Level 4. By default CSS gradients interpolate in sRGB, which produces gray midpoints for vivid color pairs. Writing linear-gradient(in oklch, blue, yellow) tells the browser to interpolate in the OKLCH perceptually uniform color space, which preserves saturation and produces a more visually pleasing transition.
Which browsers support in oklch gradient syntax?+
Chrome and Edge 111 and later, Safari 16.2 and later, and Firefox 113 and later support the new interpolation method specifier. Combined coverage is approximately 94 percent of users worldwide in 2026. For older browsers the gradient falls back to standard sRGB interpolation, which is functional but produces the muddy-midpoint problem.
Why does the same gradient look so different in OKLCH versus sRGB?+
The difference is concentrated in the middle of the gradient. sRGB interpolation mixes red, green, and blue channels independently, which produces colors that average to gray when the endpoints are saturated and far apart in hue. OKLCH interpolation moves through the perceptually uniform polar space, which means the midpoint is a color of equal lightness with a hue between the endpoints, not a gray average.
What is the difference between OKLCH and OKLab interpolation?+
OKLCH interpolates hue as an angle on a wheel, so the midpoint of red and green can take either the short way (through yellow) or the long way (through blue). OKLab interpolates in cartesian space, which always takes the geometrically shortest path and never rotates through an unintended hue. Use OKLCH for vivid intentional gradients and OKLab when you specifically want to suppress hue rotation.
What do shorter hue and longer hue mean?+
When interpolating in OKLCH or another polar color space, two colors on opposite sides of the hue wheel can be connected by going either direction. Shorter hue takes the geometrically shorter arc; longer hue takes the longer one. For most aesthetic gradients shorter is the default and looks right, but rainbow or spectrum effects sometimes need longer hue to sweep through more of the wheel.
Can I use this with radial and conic gradients too?+
Yes. The same in oklch syntax works for radial-gradient, conic-gradient, and linear-gradient. The CSS output panel shows the linear form but the syntax transfers identically. The interpolation difference is most visible on long horizontal linear gradients where the midpoint sits in the visual center of the page.
Does in oklch make gradients slower to render?+
No measurable performance impact. The browser computes the gradient texture once when the element is painted and caches it; interpolation method is a per-paint cost on the order of microseconds. Animation performance is unaffected because the gradient texture is reused across frames.
How does this differ from the existing Gradient Builder?+
The existing Gradient Builder lets you compose multi-stop gradients with full control over stop positions and is the right tool for designing a finished gradient. The Gradient Interpolator focuses specifically on the interpolation-space question between two endpoints, which is the variable most people miss when their two-color gradient looks muddy. Use this tool to pick the right space, then use the Gradient Builder to design the final multi-stop result.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service