Rainbow Color Codes: Hex and RGB for Every Shade of the Spectrum

Everyone knows what a rainbow looks like. You've been drawing them with crayons since you were old enough to hold one. But ask someone to give you the exact hex code for "rainbow," and you'll run into a problem fast: there isn't one. A rainbow isn't a single color, and it isn't even seven neatly separated colors, no matter what you learned in school. It's a smooth, continuous spectrum of light with no hard edges anywhere in it.

That doesn't mean you can't get real, usable color codes for it, though. Designers and developers use standardized approximations of rainbow colors constantly, and once you know what they are, you can drop them straight into a project. Here's the full breakdown.

Key Takeaways

• The traditional rainbow is made of seven colors, remembered with the acronym ROYGBIV: red, orange, yellow, green, blue, indigo, and violet.
• There's no single, universally "official" hex code for each rainbow color — what you'll find below are the most widely used, standardized approximations.
• A real rainbow is a continuous spectrum, not seven separate blocks of color. ROYGBIV is a simplification, not a scientific boundary.
• One genuinely official, documented rainbow does exist: the Rainbow Pride flag, which has specific, standardized hex codes — and it deliberately uses six colors instead of seven.
• You can recreate a smooth rainbow effect in CSS with a simple linear or conic gradient using the codes below.

Quick Answer: Rainbow Color Codes at a Glance

• Red — #FF0000 · RGB (255, 0, 0)
• Orange — #FF7F00 · RGB (255, 127, 0)
• Yellow — #FFFF00 · RGB (255, 255, 0)
• Green — #00FF00 · RGB (0, 255, 0)
• Blue — #0000FF · RGB (0, 0, 255)
• Indigo — #4B0082 · RGB (75, 0, 130)
• Violet — #8F00FF · RGB (143, 0, 255)

These are the standard values used across most design references when someone says "the seven rainbow colors." Keep reading for exactly how each one behaves and where the whole ROYGBIV idea actually came from.

Wait — Is There Really an "Official" Rainbow Color Code?

Not in the way most people assume. A real rainbow, the kind you see in the sky, is created by sunlight splitting through water droplets into a continuous range of wavelengths. There's no line where red stops and orange begins — it's a gradual fade, millions of shades wide.

The seven-color version everyone learns is a simplification, a human shortcut for describing something that doesn't actually come in neat categories. That's genuinely useful for teaching, art, and design, but it's worth knowing it's a convention, not a law of physics.

A Quick History: Why Seven Colors?

The ROYGBIV breakdown traces back to Isaac Newton, who first split sunlight through a prism in the 1600s and documented the spectrum he saw. Newton originally divided the spectrum into seven colors partly because he wanted it to match the seven notes in a musical scale — he was drawing a connection between light and sound, not just describing what his eyes saw. Indigo, in particular, was added mostly to round the count out to seven, and it's remained the most debated color on the list ever since (more on that in a minute).

That seven-color version stuck, became the standard way rainbows are taught and drawn, and eventually got its now-famous shorthand: ROYGBIV, or "Roy G. Biv" if you prefer to think of it as a name.

The Traditional ROYGBIV Colors, One by One

Red — #FF0000

The color at the very edge of the visible spectrum, with the longest wavelength humans can see. It's the most energetic-feeling color on the list, which is why it sits at one end of nearly every "warm colors" conversation, including our own guide to warm vs. cool colors.

Orange — #FF7F00

A blend of red and yellow that keeps most of red's energy while feeling a little friendlier and less intense. It's a natural fit for anything that wants to feel warm and approachable rather than urgent.

Yellow — #FFFF00

The brightest color the human eye can perceive, which is exactly why it's used constantly for warning signs, highlighters, and anything meant to be impossible to miss.

Green — #00FF00

Technically the midpoint of the visible spectrum. This exact shade is a very saturated, almost neon green — real-world "grass green" is usually a bit deeper and more muted, closer to #228B22.

Blue — #0000FF

A cool, calming color that sits opposite red and orange in almost every emotional sense as well as on the color wheel. It's the anchor of most "cool color" palettes.

Indigo — #4B0082

This is the most argued-about color in the whole list. Indigo sits between blue and violet, and a lot of people genuinely struggle to tell it apart from either one at a glance. Many modern artists and color scientists have suggested dropping it entirely, since it's hard to distinguish and was arguably included mostly to make the total come out to seven.

Violet — #8F00FF

The color at the opposite edge of the spectrum from red, with the shortest wavelength visible to the human eye. It's often confused with purple, though violet is technically a pure spectral color while purple is a mix of red and blue that doesn't actually appear in a rainbow at all.

Real-World Example: The Rainbow (Pride) Flag's Official Colors

Here's a genuinely interesting exception to the "no official rainbow" rule. The Rainbow Pride flag, originally designed in 1978, actually does have specific, documented, standardized colors:

• Red — #E40303
• Orange — #FF8C00
• Yellow — #FFED00
• Green — #008026
• Blue — #004DFF
• Violet — #750787

Notice anything missing? This version uses six colors, not seven — indigo was dropped from the design. That lines up exactly with the debate mentioned above: indigo has always been the hardest of the seven to distinguish visually, and when a real, practical design needed clean, easily distinguishable stripes, it was the one color that didn't make the final cut.

How to Build a Smooth Rainbow Gradient in CSS

If you want an actual smooth, blended rainbow rather than seven flat blocks of color, a gradient is the way to go:

.rainbow-gradient {
  background: linear-gradient(
    90deg,
    #FF0000,
    #FF7F00,
    #FFFF00,
    #00FF00,
    #0000FF,
    #4B0082,
    #8F00FF
  );
}

Want something a little more playful, like a full-circle color wheel instead of a straight line? Try a conic gradient instead:

.rainbow-wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #FF0000,
    #FF7F00,
    #FFFF00,
    #00FF00,
    #0000FF,
    #4B0082,
    #8F00FF,
    #FF0000
  );
}

That second one is essentially a color wheel rendered directly in CSS, and it's a fun way to visualize how these seven colors actually relate to each other in a full circle rather than a straight line.

Where You'll Actually Use Rainbow Colors

Beyond the obvious (weather graphics, kids' educational content, and anything with a literal rainbow in it), the full ROYGBIV spectrum shows up constantly in data visualization — heatmaps, temperature scales, and charts often use a rainbow-style gradient to represent a range of values, since our eyes are naturally good at ordering rainbow colors from "low" to "high." It's also a popular choice for playful, energetic brand identities that want to signal inclusivity, creativity, or fun rather than a single focused personality.

A Word of Caution: Rainbows Aren't Great for Data Visualization

Here's something most articles about rainbow colors never mention, and it's genuinely useful if you work with charts or dashboards: a lot of data visualization experts actively discourage using a full rainbow scale to represent data, even though it's one of the most common choices out there.

There are two real problems with it. First, a rainbow isn't "perceptually uniform" — equal steps in the color spectrum don't look like equal steps to the human eye. Yellow tends to visually jump out far more than it should, while the blue-to-green section can blur together into what looks like one continuous block, even when the underlying numbers are changing steadily. That can genuinely mislead someone reading a chart, making certain ranges of data look more dramatic or more uniform than they actually are.

Second, and just as important: a huge portion of rainbow-based charts lean heavily on the red-to-green transition to show a range of values, and that's exactly the distinction that's hardest for colorblind users to perceive. If you've read our color contrast guide, this will sound familiar — it's the same underlying principle of never relying on color alone to communicate something important, just applied to data instead of text.

None of this means rainbow gradients are bad. For decorative, playful, or purely illustrative use, they're great. Just think twice before reaching for one on a chart where accuracy actually matters — a perceptually uniform palette will serve your readers a lot better.

How to Grab Any of These Colors for Your Own Project

If you want to experiment with any of these shades directly, our color picker lets you fine-tune the exact hue, and our RGB to Hex and Hex to RGB converters make it easy to move between formats if a project hands you one and needs the other. If you're building a full gradient like the ones above, our gradient generator lets you drag your own color stops around and preview the result instantly, without writing any code by hand.

FAQs

What are the 7 colors of the rainbow in order? Red, orange, yellow, green, blue, indigo, and violet — commonly remembered with the acronym ROYGBIV.

Is there an official hex code for rainbow colors? Not for a natural rainbow, since it's a continuous spectrum without hard edges. The main exception is the Rainbow Pride flag, which does have specific, standardized hex codes for its six stripes.

Why do some rainbows only show 6 colors instead of 7? Indigo is the most commonly dropped color, since it sits very close to blue and violet and can be hard to distinguish visually. Several modern designs, including the Pride flag, use a six-color version without it.

What's the hex code for "rainbow" as a single color? There isn't one — a rainbow is a full spectrum of color, not a single shade. Any "rainbow" swatch you see in a design tool is really just a gradient built from the individual ROYGBIV colors.

How do I make a rainbow gradient in CSS? Use a linear-gradient() with each ROYGBIV hex code listed in order as color stops, or a conic-gradient() if you want a full circular color-wheel effect instead of a straight line.

Wrap-Up

A rainbow feels like the simplest thing in the world to describe, right up until you try to pin it down into exact numbers — and that's kind of the charm of it. Seven colors, one flag with six, a debated shade that's been on the chopping block for centuries, and an entire spectrum underneath it all that doesn't actually have any hard lines at all. Now you've got the real codes to work with, whichever version you need.