Rainbow gradient
A rainbow gradient runs through the spectrum in order: red, orange, yellow, green, blue and violet. Blending it in OKLCH keeps every band equally bright, so you avoid the muddy olive and grey patches a plain sRGB rainbow can show. Below are 12 rainbow gradients — copy the CSS, download a PNG, or open one in the editor.
Quick copy — rainbow classic:
background: linear-gradient(90deg, #fa6a59 0%, #f96c53 1.4%, #f86e4d 2.8%, #f67047 4.3%, #f57241 5.7%, #f3743a 7.1%, #f17634 8.5%, #ef782d 9.9%, #ed7a27 11.3%, #eb7c1f 12.8%, #e87f17 14.2%, #e6810d 15.6%, #e38300 17%, #df8600 18.3%, #db8900 19.7%, #d78c00 21%, #d38e00 22.3%, #cf9100 23.7%, #cc9300 25%, #c89500 26.3%, #c49700 27.7%, #c09900 29%, #bc9b00 30.3%, #b89d00 31.7%, #b49f00 33%, #afa100 34.4%, #a9a400 35.8%, #a3a600 37.3%, #9ca807 38.7%, #95ab12 40.1%, #8dad1c 41.5%, #84af25 42.9%, #7bb22e 44.3%, #70b436 45.8%, #64b63f 47.2%, #56b847 48.6%, #45ba50 50%, #1ebc64 51.4%, #00bb79 52.8%, #00ba8a 54.3%, #00b997 55.7%, #00b7a2 57.1%, #00b6ac 58.5%, #00b5b5 59.9%, #00b4bd 61.3%, #00b2c6 62.8%, #00b1cf 64.2%, #00afd9 65.6%, #00ade4 67%, #1cabe8 68.3%, #2ca9ec 69.7%, #39a7f0 71%, #44a5f4 72.3%, #4fa3f7 73.7%, #59a0f9 75%, #629efb 76.3%, #6b9bfd 77.7%, #7498fe 79%, #7c96ff 80.3%, #8493ff 81.7%, #8c90ff 83%, #928eff 84.4%, #988bfe 85.8%, #9e89fd 87.3%, #a487fb 88.7%, #aa84f9 90.1%, #af82f7 91.5%, #b580f5 92.9%, #ba7df2 94.3%, #bf7bef 95.8%, #c479eb 97.2%, #c976e7 98.6%, #ce74e3 100%);
background: linear-gradient(in oklch 90deg, #fa6a59 0%, #e38300 17%, #b49f00 33%, #45ba50 50%, #00ade4 67%, #8c90ff 83%, #ce74e3 100%);- Aa · 6.5:1
Black text: Passes AA
- Aa · 6.5:1
Black text: Passes AA
- Aa · 13.6:1
Black text: Passes AA
- Aa · 7.7:1
Black text: Passes AA
- Aa · 8.0:1
White text: Passes AA
- Aa · 6.8:1
Black text: Passes AA
- Aa · 7.0:1
Black text: Passes AA
- Aa · 7.9:1
Black text: Passes AA
- Aa · 5.5:1
Black text: Passes AA
- Aa · 3.1:1
Black text: Fails AA — large text only (3:1)
- Aa · 10.3:1
Black text: Passes AA
- Aa · 6.5:1
Black text: Passes AA
Using rainbow gradients well
Good for: Pride and celebration graphics, progress bars, playful hero sections, colour pickers and loading indicators.
Pairing: A rainbow already uses every hue, so pair it with neutrals: near-black, white or a soft grey. Use it in small doses (a border, a bar, a headline underline) rather than behind long text.
Readable text: A classic sRGB rainbow (#ff0000 → #ffff00 → #0000ff) has no text colour that passes AA everywhere: pure yellow is almost as light as white and pure blue is very dark. The rainbows here are built at one even OKLCH lightness, so dark text passes on most of them; the dark rainbow takes white text. The ratio on each swatch is the worst point across the gradient (WCAG 2: 4.5:1 for body text, 3:1 for large text). Check custom pairs in the contrast checker.
These gradients are blended in OKLCH so the middle stays clean; the copied CSS includes a pre-blended fallback line for older browsers.
Questions
What is the CSS code for a rainbow gradient?
A simple rainbow gradient is background: linear-gradient(in oklch 90deg, #fa6a59 0%, #e38300 17%, #b49f00 33%, #45ba50 50%, #00ade4 67%, #8c90ff 83%, #ce74e3 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.
What colours go well with rainbow in a gradient?
A rainbow already uses every hue, so pair it with neutrals: near-black, white or a soft grey. Use it in small doses (a border, a bar, a headline underline) rather than behind long text.
What text colour is readable on a rainbow gradient?
A classic sRGB rainbow (#ff0000 → #ffff00 → #0000ff) has no text colour that passes AA everywhere: pure yellow is almost as light as white and pure blue is very dark. The rainbows here are built at one even OKLCH lightness, so dark text passes on most of them; the dark rainbow takes white text. Each swatch on this page shows the better of black or white text, its worst-case WCAG contrast ratio, and whether it passes AA (4.5:1), is only good for large text (3:1), or fails — for failing swatches, add a darker scrim behind the text or pick a deeper variant.
How do I download a rainbow gradient image?
Press “PNG” under any gradient to download a 1600×900 image, rendered in your browser. Open it in the editor to change size-independent details first, such as angle or colours.
Where are rainbow gradients typically used?
Common uses: Pride and celebration graphics, progress bars, playful hero sections, colour pickers and loading indicators.