Gradient builder
The same two colours, interpolated three ways. The difference between them is the reason CSS added colour spaces to gradients.
Stops
Compare interpolation spaces
OKLCH
Perceptual, follows a hue arc. Best for vivid ramps.
- #1F4FD8
- #694BDB
- #984BCF
- #BE4DB8
- #DC559A
- #F16379
- #FC7958
- #FC943B
- #F2B134
OKLAB
Perceptual, straight line. Never overshoots into a third hue.
- #1F4FD8
- #3A63CC
- #5573C0
- #6F81B2
- #898CA3
- #A39791
- #BDA17C
- #D7A961
- #F2B134
sRGB
What CSS does by default. Often darkens through the middle.
- #1F4FD8
- #6262CC
- #8472BF
- #9E7FB1
- #B38BA2
- #C59690
- #D6A07B
- #E4A960
- #F2B134
Output
Sampled stops (OKLCH)
background-image: linear-gradient(90deg, #1f4fd8 0%, #694bdb 13%, #984bcf 25%, #be4db8 38%, #dc559a 50%, #f16379 63%, #fc7958 75%, #fc943b 88%, #f2b134 100%);Native CSS interpolation
background-image: linear-gradient(in oklch shorter hue, oklch(49.05% 0.2156 264.52), oklch(80.15% 0.1513 78.89));Modern browsers interpolate in OKLCH natively. The sampled version above is the fallback for everything else, and both are generated from the same mathematics.
Values
- #1F4FD8
- #694BDB
- #984BCF
- #BE4DB8
- #DC559A
- #F16379
- #FC7958
- #FC943B
- #F2B134
How this works
A gradient is a path between two colours, and the space you draw that path in decides what you pass through on the way.
The three paths
- sRGB mixes channel by channel. Blue to yellow travels through a muddy grey because the midpoint has low chroma in every channel at once.
- OKLAB draws a straight line through a perceptual space. Lightness stays even and the ramp never overshoots into a third hue.
- OKLCHfollows an arc of hue. Blue to yellow travels through green, which is usually what a designer means by “blend” — and occasionally not, which is why the shorter and longer arcs are both offered.
Powerless hue
When one stop is a neutral, its hue is meaningless, so Colorstruct gives it the other stop’s hue rather than sweeping through arbitrary colours. This matches the CSS Color 4 rule and keeps grey-to-colour ramps clean.
The sampled output is a fallback for browsers without native colour-space interpolation; both versions come from the same mathematics, so they match.