Gradients that don't go gray in the middle.
Interpolate in OKLCH so blue → yellow stays vivid through the midpoint instead of muddying to gray the way sRGB does. Multi-stop, four hue strategies, CSS / SVG / Tailwind export.
Above: gradient rendered with OKLCH-interpolated stops, baked into sRGB so every browser shows the same thing.
Why OKLCH
Crosses through desaturated/muddy gray when hues differ. Click a cell to copy its hex.
Maintains perceptual chroma - midpoint stays vivid. Click a cell to copy its hex.
background-image: linear-gradient(90deg in oklch, #6b8af2 0%, #f26b5e 100%);
in oklch. Chrome 111+, Safari 16.4+, Firefox 128+.linear-gradient(blue, yellow) goes through muddy gray. linear-gradient(in oklch, blue, yellow) stays vivid. The Color Tools lets you author once and ship both - modern browsers get the OKLCH path; older browsers get a pre-sampled fallback that looks identical.What is the oklch gradient generator?
An OKLCH gradient interpolates between colors in the OKLCH color space, which keeps lightness and saturation even through the transition and avoids the gray band that sRGB gradients produce.
Why interpolate in OKLCH
sRGB mixes light values, so halfway between blue and yellow is a dull gray. OKLCH mixes perceived lightness, chroma and hue separately, so the midpoint keeps its saturation and the gradient looks like a real transition of paint. CSS supports this natively with linear-gradient(in oklch, ...). The tool previews both versions side by side and writes the CSS with a fallback for older browsers.
OKLCH Gradient Generator FAQ
Do browsers support OKLCH gradients?
Yes. Chrome, Edge, Safari and Firefox all support the in oklch interpolation hint. The generator adds an sRGB fallback for anything older.
Should I use the longer or shorter hue path?
Shorter is the default and usually right. Use longer hue to go the long way around the wheel, which produces a rainbow between two nearby hues.