Rainbow Color Picker
Pick a rainbow color from red through violet and copy any shade of it as HEX, RGB or HSL.
Click any shade to select it, or use Copy HEX for the selected color.
How to use the Rainbow Color Picker
- Pick one of the seven ROYGBIV colors, from red round to violet.
- Click a shade on its ramp to select it and preview the exact color.
- Copy the HEX, with RGB and HSL alongside, for your design or code.
- Want a balanced multi-color set instead? Build one with the Scheme Generator.
The seven rainbow colors and their HEX codes
The rainbow is one continuous spectrum, but it is traditionally split into seven named bands. Here is each one with a representative HEX and its place by wavelength:
What are the rainbow colors?
The rainbow colors are the band of hues sunlight splits into when it passes through rain or a prism, listed as red, orange, yellow, green, blue, indigo and violet. The order never changes because it follows wavelength, from the long, low-energy red down to short, high-energy violet, which is why ROYGBIV is worth memorising.
Rainbow order vs the color wheel
A common mix-up is treating the rainbow like the color wheel, but they are not the same. The rainbow is a straight line of wavelengths with no pink or brown, because those colors do not exist as single wavelengths. The wheel bends that line into a circle and adds the mixes, which is the model the Scheme Generator and Color Picker work from.
Why ROYGBIV still beats a random multi-color palette
When a design needs several bright colors at once, spectral order is the safest backbone there is. Because rainbow colors are evenly spaced by wavelength, a set drawn from them reads as deliberate rather than chaotic, which is exactly why progress bars, data categories and children’s products lean on it. Random bright colors rarely look as intentional as ROYGBIV in sequence.
Where rainbow colors get used
- Category and data color coding, where each item needs an obviously distinct hue.
- Pride and inclusive branding, built on the recognisable rainbow sequence.
- Children’s products, education and games that want bright, friendly color.
- Gradients that sweep through the spectrum, made in the CSS Gradient tool.
Pride flag colors and their meanings
The rainbow Pride flag grew out of ROYGBIV but is not identical to it. Gilbert Baker’s 1978 original had eight stripes; the version flown today uses six, dropping pink and merging the two blues. Each stripe carries a meaning:
Newer designs extend this further. The Progress Pride flag adds a chevron of black, brown, light blue, pink and white for trans people and people of color, and the Color Name Finder can help match any of those stripes to a named shade.
Building a Pride or LGBTQ color picker
To recreate these flags in your own design, pick each stripe in order from the table above and copy its HEX. A few practical tips:
- Use the exact flag HEX codes rather than pure ROYGBIV, since the official stripes are slightly muted.
- Stack the stripes top to bottom in the order listed, with equal heights, to match the flag.
- For a sweeping rainbow background instead of stripes, drop the same colors into the CSS Gradient tool.
- For Progress and trans flags, add the chevron colors black #000000, brown #613915, light blue #5BCEFA, pink #F5A9B8 and white #FFFFFF.
Those colors are mixtures of wavelengths, not single ones, so they never appear as a band in a true spectrum.