The seven rainbow colors, in order
Read from the outer edge of a primary rainbow toward the inside: red → orange → yellow → green → blue → indigo → violet. The familiar initials are ROYGBIV.
The HEX codes below are illustrative screen choices. A natural rainbow has a continuous spectrum, with no single official HEX code for each named color.
| Order | Color | Sample | HEX |
|---|---|---|---|
| 1 | Red | #FF1616 | |
| 2 | Orange | #FF914D | |
| 3 | Yellow | #FFDE59 | |
| 4 | Green | #7ED957 | |
| 5 | Blue | #5271FF | |
| 6 | Indigo | #8C52FF | |
| 7 | Violet | #7F00FF |
A closer look at the swatches
Red — #FF1616
#FF1616 is a strong red for a small marker or a bold title. Give it some space beside the orange so the two do not compete for the same detail.
Orange — #FF914D
#FF914D is lighter and softer than the red. It bridges the warm end of the palette without making every stripe equally intense.
Yellow — #FFDE59
This yellow is noticeably lighter than the blue and violet samples. Dark lettering is a useful starting choice if it becomes a background.
Green — #7ED957
The yellow-green sample sits between the warm colors and blue. Other hues can make that middle section cooler or more muted.
Blue — #5271FF
Against the yellow-green, this blue gives the sequence a stronger cool turn. Keep the same swatch sizes when comparing it with indigo.
Indigo — #8C52FF
Indigo sits between blue and violet in the conventional seven-color sequence. Here, #8C52FF is a violet-leaning choice that separates the blue and violet samples. The name describes a conventional part of the sequence, not a sharp dividing line in the sky.
Violet — #7F00FF
The final purple color is deeper than the indigo sample. It makes a darker end to a digital strip or background transition.
Why a rainbow appears
Sunlight bends as it enters water droplets. Its different wavelengths spread out, reflect inside the drops and bend again on the way out. You see the bow in the direction opposite the Sun. NOAA’s rainbow definition describes the optical process.
In a double rainbow, the fainter outer bow has its colors reversed. NOAA’s rainbow simulator shows how a second internal reflection produces that reversal.
Turn the sequence into a gradient
A rainbow gradient carries the colors through several stops. Spreading the stops across the full width gives each part of the sequence more room.
- Keep the color order when the design needs to read as a rainbow.
- Place longer text on a plain panel beside the gradient.
- If text sits on the gradient, check the actual colors beneath it. A darker colour at one end does not guarantee readable text over the brighter middle.