Gradient
Build a CSS gradient and see the difference between interpolating in sRGB and in oklab.
background-image: linear-gradient(135deg in oklab, #ff7a18 0%, #ffc94a 52%, #e5484d 100%);
Black text survives the whole ramp better. WCAG wants 4.5:1 for body copy and 3:1 for large or bold text — the worst point is usually mid-blend, not at a stop.
The preview is resolved here rather than handed to the browser, so switching between srgb, oklab and oklch changes what you see even where the browser would ignore it. sRGB walks a straight line through gamma-encoded values, which drags complementary pairs through grey — try the dead-zone preset and flip the space. Positions are percentages, and a stop that sits behind the one before it gets pinned, exactly as CSS does. Paste any linear, radial or conic gradient above to pull it apart.
A gradient between two saturated colours in sRGB usually passes through a desaturated grey in the middle. It is the classic muddy blend, and it is a property of the colour space rather than of your stops.
Build the gradient with as many stops as you like and compare both interpolations side by side. The generated CSS is copyable, including the `in oklab` syntax, and the difference on a blue-to-orange blend is not subtle.
What people open it for
- Fixing a gradient that goes grey through the middle
- Generating CSS for a multi-stop linear or radial gradient
- Seeing what modern colour interpolation buys you
In the terminal
tools gradient
Every utility is also a command in the desktop's shell.