Monochrome gradient
A smooth OKLCH gradient generated from the monochrome 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(120deg in oklch, #271e00 0%, #5a4800 25%, #937700 50%, #d0aa00 75%, #ffe389 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