Scandinavian gradient
A smooth OKLCH gradient generated from the scandinavian palette, with 5 stops. Copy the CSS, download it, or extract its colors.
The palette
Color stops
Code
CSS
?
OKLCH
A modern, perceptually uniform color space with three axes: lightness, chroma, and hue. Equal steps in OKLCH look equal to the eye, which makes it the best space for generating shade scales and harmonies.Full glossary entry →
?
OKLCH
A modern, perceptually uniform color space with three axes: lightness, chroma, and hue. Equal steps in OKLCH look equal to the eye, which makes it the best space for generating shade scales and harmonies.Full glossary entry →background: linear-gradient(180deg in oklch, #5c2a15 0%, #764d22 25%, #8a733b 50%, #999b5f 75%, #a4c38d 100%);
FAQ
Common questions
- How do I use this gradient in CSS?
- Copy the background rule above into any element's styles. Browsers without OKLCH support fall back to the same stops in sRGB.
- Why does it blend so smoothly?
- The stops interpolate in OKLCH, a perceptual color space, so midpoints never turn muddy the way default sRGB blends can.
- Can I change the colors?
- Yes: open it in the editor to adjust stops and angle, or extract the palette into the generator and remix from there.
Explore