The short version
- A rainbow gradient blends through the hues of the spectrum, and the default version looks cheap because its colours have very different lightness.
- In OKLCH, pure yellow has a lightness of about 97% while pure blue sits near 45%, which is why a default rainbow shows a bright stripe and a dark band.
- Rainbow gradients look designed when you keep every stop at a similar lightness, lower the chroma a little and use only the part of the spectrum you need.
- CSS can blend a rainbow for you with
linear-gradient(in oklch longer hue, ...), which travels all the way around the hue wheel between two colours. - Text on a rainbow needs a calm area or a band behind it, because the contrast changes along the whole gradient.
On this page
A rainbow gradient blends through the hues of the spectrum, from red through orange, yellow, green, blue and violet. The version most tools give you looks like a default because it jumps in brightness: a glaring yellow stripe, a dark blue band and hard edges between them. A rainbow that looks designed keeps every colour at a similar lightness, uses a little less saturation, and often covers only part of the spectrum.
This guide shows why the preset looks wrong, three ways to fix it, copyable rainbow codes and the CSS that makes smooth rainbows in modern browsers. If hue, lightness and chroma are new to you, colour codes explained covers them first.
Why the default rainbow looks cheap
The classic rainbow is built in HSL by stepping the hue while holding saturation and lightness fixed. HSL's lightness is a formula, not a measure of how bright colours look. To your eye, pure yellow is far brighter than pure blue, even though HSL calls them both 50%. OKLCH measures perceived lightness, and the numbers show the problem clearly.
| Colour | Hex | HSL lightness | OKLCH lightness |
|---|---|---|---|
| Red | #ff0000 | 50% | 62.8% |
| Yellow | #ffff00 | 50% | 96.8% |
| Green | #00ff00 | 50% | 86.6% |
| Cyan | #00ffff | 50% | 90.5% |
| Blue | #0000ff | 50% | 45.2% |
| Magenta | #ff00ff | 50% | 70.2% |
How to make a rainbow gradient look designed
- 1
Even out the lightness
Pick a single perceived lightness, such as 72% in OKLCH, and hold every stop there. This one change removes the yellow stripe and the blue hole.
- 2
Lower the chroma a little
Fully saturated screen colours fight each other. A chroma around 0.12 in OKLCH keeps every hue vivid and still inside what normal screens can show.
- 3
Use an arc, not the whole wheel
Three or four neighbouring hues, such as coral to gold or teal to violet, read as a considered choice. The full spectrum reads as a test pattern unless it is the point.
- 4
Give it a ground
A rainbow on white feels like a children's toy; the same rainbow rising out of near-black feels like light through a prism. Decide which one you want.
- 5
Add texture or softness
Grain, blur or a slow radial fall-off turns bands of colour into light. See grainy gradients for the grain side.
Rainbow gradient codes you can copy
The first three cover the whole spectrum at different lightness levels. The rest are arcs: a part of the rainbow chosen for a mood, which is how most rainbow identities actually work.
Smooth rainbows in CSS with OKLCH hue interpolation
Modern CSS can travel around the hue wheel for you. Setting the interpolation to oklch and the hue method to longer hue makes the browser go the long way between two colours, so two stops at the same hue produce a full, even rainbow. It works in current versions of Chrome, Edge, Safari and Firefox; check MDN's compatibility table for your audience.
.rainbow {
/* Fallback: hand-picked stops at even lightness */
background: linear-gradient(90deg, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3);
/* One colour, all the way round the hue wheel, at one lightness */
background: linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20));
}
.rainbow-arc {
/* Only the short way from coral to teal, still perceptually even */
background: linear-gradient(in oklch 90deg, oklch(72% 0.12 20), oklch(72% 0.12 170));
}Keep chroma modest when you do this. At high chroma some hues, especially blue and violet, fall outside what an ordinary sRGB screen can show, and the browser has to squash them back, which brings back uneven bands. More on this in smoother CSS gradients with OKLCH.
Putting text on a rainbow gradient
A rainbow is the hardest background for text because contrast changes along its whole length. Dark text that reads well over teal can vanish over violet. Place words over the calmest part, set them on a quiet band or card, or use a pastel rainbow with dark type and check the lightest and darkest points behind every line. Text on a gradient goes through the options.
Without help, the words cross every hue and their contrast keeps changing.
With the field calming behind the words, the rainbow stays joyful and the line reads.
Where rainbow gradients fit
- Creative tools and colour products, where the spectrum shows range
- Children's brands and education, usually in the pastel version
- Music, festivals and nightlife, as a prism on a dark ground
- Holographic and iridescent looks, as a pale pearl shimmer; see holographic gradients
- Pride campaigns, where the rainbow flag has its own meaning and its own six stripes, so use it with intent rather than as decoration
A Gradiently Mark can hold up to eight colours, which is enough for a full, even rainbow with a material and grain on top. You can build one control by control in the Forge.
Questions people ask
How do I make a rainbow gradient in CSS?
Use linear-gradient(in oklch longer hue 90deg, oklch(72% 0.12 20), oklch(72% 0.12 20)) for a smooth, even rainbow, with a hex-stop gradient before it as a fallback.
Why does my rainbow gradient have a bright yellow stripe?
Yellow is perceived as far lighter than blue or red at the same HSL lightness. Hold every stop at one perceived lightness, such as 72% in OKLCH, to remove the stripe.
What are the hex codes for a pastel rainbow gradient?
Try #fcbfbe, #efca9f, #cbd8a5, #a3e0ca, #9ddcf1, #bfd0ff and #e6c3ee, which all sit at a similar high lightness.
Can you put text on a rainbow gradient?
Yes, but the contrast changes across the gradient. Put text over the calmest area, on a band or card, or use a pastel rainbow with dark text and check every point behind the words.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
