Why does my sRGB gradient turn grey (or brown, or olive) in the middle?

Interpolating two colors' red, green and blue channels directly averages their gamma-encoded values, which isn't the same as averaging how light they look — the midpoint of pure red and pure lime in sRGB is a dark olive, #808000, not anything either color would suggest. CSS Color 4's `in oklch` walks a perceptually uniform space instead, so the same two stops fade through a much more saturated middle rather than passing through grey. This page renders both so the difference is a picture, not a claim.

What is a 'hue arc', and when does it matter?

OKLCH's hue is an angle, so there are two ways around the circle between any two hues, and picking neither is wrong until you say which. 'Shorter' and 'longer' pick whichever arc is under or over 180 degrees; 'increasing' and 'decreasing' always walk the numeric direction you name, wrapping a full turn if needed. It only matters for OKLCH stops — sRGB interpolation has no hue angle to disagree about.

Why does alpha need to be 'premultiplied'?

A stop fading toward transparent should look like less of that color, not like a color channel drifting toward some other value at full strength. Premultiplying scales the color channels by alpha before interpolating and un-scales after, which is what keeps a fade-to-transparent stop looking like the same color getting fainter instead of tinting grey partway through. This page always premultiplies — there's no honest reason to want the untinted-but-grey version.

Why does the low-chroma demo show visible bands but my saturated gradient doesn't?

8-bit sRGB only has 256 levels per channel. A gradient between two very similar, low-saturation colors covers a small numeric range across a wide area, so each 8-bit step becomes a visible band. A saturated gradient crosses a much larger numeric range over the same width, so the same 256 levels produce steps too small to see. It's the same banding a photo's sky or a dark UI background shows for the same reason.

Which CSS output should I actually ship?

If the gradient's two stops are close in hue (most brand gradients, most UI overlays), sRGB and OKLCH look nearly identical and either is fine — ship sRGB for the smaller, more universally understood syntax. If the stops are far apart in hue (complementary colors, a rainbow-ish sweep), OKLCH avoids the grey middle this page demonstrates. The oklch() color function itself shipped across Chrome, Firefox and Safari during 2023, but the 'in oklch' interpolation-method syntax used here landed later per engine — Chrome 111 (March 2023), Safari 16.4 (March 2023), Firefox 128 (July 2024) — so check the OKLCH preview panel above rather than assuming support if you need to reach visitors on an older Firefox. If you need a pre-sampled sRGB fallback for engines that don't support it yet, the OKLCH gradient generator derives one with a measured error figure instead of a guessed stop count.

This tool runs entirely in your browser. Nothing you paste is uploaded.

How you can check →

CSS Gradient Generator

Color & Design

Build a linear, radial or conic CSS gradient, and see the same stops compared in sRGB and OKLCH side by side — one keeps the color, the other turns grey.

Stops

Any CSS color syntax per stop. Drag a handle on the track, or type an exact position below it. Starts with the classic case: pure red to pure lime, which passes through a dark olive grey in sRGB.

Shape

Kind

Direction

Angle (deg)

OKLCH hue arc

sRGB vs. OKLCH, same stops

In sRGB

In OKLCH

Your browser doesn't support the in oklch interpolation hint, so this panel can't render — the CSS below is still correct for a browser that does.

Author this in OKLCH →

CSS (sRGB)

—

CSS (OKLCH)

—

Banding demo (fixed, low chroma)

A gradient between two similar, low-saturation dark colors — the case where 8-bit output shows its seams, in either space. Not affected by the stops above.

In sRGB

In OKLCH

Your browser doesn't support the in oklch interpolation hint.

Need a tint or shade ramp instead of a two-stop fade? Use the scale generator.

Why sRGB interpolation passes through grey

A CSS gradient with no interpolation hint averages red, green and blue channels directly — arithmetic on a gamma-encoded number, not on how light the color actually looks. The midpoint of pure red (#ff0000) and pure lime (#00ff00) computed that way is #808000, a dark olive, even though neither endpoint has any brown in it. The same midpoint computed in OKLCH space comes out a saturated orange instead. This page renders the exact stops you enter in both spaces side by side, so the difference is something you can see rather than a claim you have to trust.

Hue arcs: there is no single "the" interpolation between two hues

OKLCH's hue is an angle on a circle, so between any two hues there are always two ways around: the short way and the long way. CSS Color 4 makes you pick — shorter and longer choose whichever arc is under or over 180 degrees, while increasing and decreasing always walk in that numeric direction, wrapping a full turn if the target hue is numerically behind the start. This only applies to OKLCH; sRGB interpolation has no polar hue to disagree about.

Premultiplied alpha, and the grey it prevents

A stop that fades to transparent should look like progressively less of that color, not like it's drifting toward some other channel value at full strength. Naive interpolation that ignores alpha does the latter — a red-to-transparent fade built that way visibly passes through a washed-out pink or grey partway through, because the color channels are being averaged with a fully-opaque "nothing" rather than scaled down with it. This page always premultiplies alpha before interpolating and un-premultiplies the result, matching what CSS Color 4 gradients do natively.

Why the banding demo looks different from your own gradient

8-bit sRGB output has only 256 levels per channel. A gradient between two colors that are close together numerically — the fixed low-chroma demo above — covers a small slice of that 256-level range across a wide area, so each 8-bit step becomes a visible band. A saturated gradient between two very different colors covers a much larger numeric range over the same width, so the same 256 levels produce steps too small to see. It's the identical mechanism behind visible banding in a photographed sky or a dark UI background.

Common use cases

Checking whether a brand gradient between two hues will pass through an unwanted grey
Getting CSS output that names its interpolation space explicitly, rather than guessing
Picking the right hue arc for a sweep that should go "the long way" around the wheel
Building a linear, radial or conic gradient with an exact angle
Seeing why a dark, low-saturation gradient bands while a bright one doesn't

Frequently asked questions

Why does my sRGB gradient turn grey (or brown, or olive) in the middle?: Interpolating two colors' red, green and blue channels directly averages their gamma-encoded values, which isn't the same as averaging how light they look — the midpoint of pure red and pure lime in sRGB is a dark olive, #808000, not anything either color would suggest. CSS Color 4's `in oklch` walks a perceptually uniform space instead, so the same two stops fade through a much more saturated middle rather than passing through grey. This page renders both so the difference is a picture, not a claim.
What is a 'hue arc', and when does it matter?: OKLCH's hue is an angle, so there are two ways around the circle between any two hues, and picking neither is wrong until you say which. 'Shorter' and 'longer' pick whichever arc is under or over 180 degrees; 'increasing' and 'decreasing' always walk the numeric direction you name, wrapping a full turn if needed. It only matters for OKLCH stops — sRGB interpolation has no hue angle to disagree about.
Why does alpha need to be 'premultiplied'?: A stop fading toward transparent should look like less of that color, not like a color channel drifting toward some other value at full strength. Premultiplying scales the color channels by alpha before interpolating and un-scales after, which is what keeps a fade-to-transparent stop looking like the same color getting fainter instead of tinting grey partway through. This page always premultiplies — there's no honest reason to want the untinted-but-grey version.
Why does the low-chroma demo show visible bands but my saturated gradient doesn't?: 8-bit sRGB only has 256 levels per channel. A gradient between two very similar, low-saturation colors covers a small numeric range across a wide area, so each 8-bit step becomes a visible band. A saturated gradient crosses a much larger numeric range over the same width, so the same 256 levels produce steps too small to see. It's the same banding a photo's sky or a dark UI background shows for the same reason.
Which CSS output should I actually ship?: If the gradient's two stops are close in hue (most brand gradients, most UI overlays), sRGB and OKLCH look nearly identical and either is fine — ship sRGB for the smaller, more universally understood syntax. If the stops are far apart in hue (complementary colors, a rainbow-ish sweep), OKLCH avoids the grey middle this page demonstrates. The oklch() color function itself shipped across Chrome, Firefox and Safari during 2023, but the 'in oklch' interpolation-method syntax used here landed later per engine — Chrome 111 (March 2023), Safari 16.4 (March 2023), Firefox 128 (July 2024) — so check the OKLCH preview panel above rather than assuming support if you need to reach visitors on an older Firefox. If you need a pre-sampled sRGB fallback for engines that don't support it yet, the OKLCH gradient generator derives one with a measured error figure instead of a guessed stop count.

Color Converter

Convert HEX, RGB, HSL, OKLCH, CMYK and more — and see which values survive the trip back.

Color Scale Generator

Turn one seed color into a 50–950 tint/shade ramp with even OKLCH steps, an explicit chroma taper, and a contrast matrix.

OKLCH Gradient Generator

Author gradients in L, C and H, and see the lightness curve, the chroma against the gamut ceiling and the hue arc the CSS is hiding.