# Rainbow gradients that don't look like a default preset

[Canonical HTML page](https://gradiently.design/guide/rainbow-gradient)

The default rainbow has a glaring yellow stripe and a dark blue hole in it. Fix the lightness, choose your arc and the spectrum becomes one of the most joyful tools you have.

## 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.

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](https://gradiently.design/guide/color-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% |

HSL says these are equally light. Perceived lightness ranges from 45% to 97%, which is why the default rainbow looks striped.

- Default HSL rainbow: `linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)`
- Even-lightness rainbow: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`

The same journey around the hue wheel. The second holds every stop near 72% OKLCH lightness, so no colour jumps out or sinks.

## 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](https://gradiently.design/guide/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.

- Balanced spectrum: `linear-gradient(90deg, #e68485 0%, #d49648 17%, #9bb054 33%, #43bd99 50%, #2fb5d8 67%, #87a0f0 83%, #c68bd3 100%)`
- Pastel rainbow: `linear-gradient(90deg, #fcbfbe 0%, #efca9f 17%, #cbd8a5 33%, #a3e0ca 50%, #9ddcf1 67%, #bfd0ff 83%, #e6c3ee 100%)`
- Spectrum wheel: `conic-gradient(from 0deg at 50% 50%, #e68485, #d49648, #9bb054, #43bd99, #2fb5d8, #87a0f0, #c68bd3, #e68485)`
- Sunrise arc: `linear-gradient(120deg, #ff6b6b 0%, #ff9f43 50%, #feca57 100%)`
- Lagoon arc: `linear-gradient(120deg, #1dd1a1 0%, #0abde3 50%, #5f27cd 100%)`
- Dusk arc: `linear-gradient(120deg, #5f27cd 0%, #c44569 50%, #ff9f43 100%)`
- Prism on black: `radial-gradient(120% 90% at 50% 110%, #c68bd3 0%, #87a0f0 20%, #2fb5d8 35%, #43bd99 48%, #9bb054 60%, #d49648 72%, #e68485 82%, #0b0b10 100%)`
- Pearl shimmer: `linear-gradient(135deg, #f5e1ff 0%, #d8f3ff 35%, #e1ffe9 65%, #fff4d6 100%)`

Eight rainbow gradients. Balanced and pastel keep every stop at one lightness; the arcs choose a corner of the wheel; the last two use the spectrum as light.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) for your audience.

```css
.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));
}
```

The first rule draws a full rainbow from a single colour. The second draws an arc, taking the shorter route between two hues.

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](https://gradiently.design/guide/css-gradient-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](https://gradiently.design/guide/text-on-gradient) goes through the options.

A square post with the words Hello colour running straight across a rainbow gradient, some letters harder to read

Without help, the words cross every hue and their contrast keeps changing.

The same square post where the gradient softens behind the words Hello colour so the text reads clearly

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](https://gradiently.design/guide/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

> **Choose the arc first** Before you reach for the full spectrum, ask which three or four hues carry the mood. Most rainbow designs that feel expensive are really arcs.

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.

## FAQ

### 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.