ROYGBIV or VIBGYOR Rainbow Color Codes: HEX, RGB, CSS & Print

ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More

ROYGBIV and VIBGYOR name the same seven traditional rainbow colors in reverse order. ROYGBIV runs from red to violet; VIBGYOR runs from violet to red. There is no single official HEX or RGB code for a physical rainbow because the visible spectrum is continuous, but the vivid seven-color palette below is a practical choice for websites, graphics, worksheets, and presentations.

#	Preview	Product	Price
1		JimKing Creative Color Wheel, Paint Mixing Learning Guide, Art Class Teaching Tool for Makeup...	$4.99	Buy on Amazon
2		Creative Color Wheel, Paint Mixing Learning Guide Art Class Teaching Tool for Makeup Blending Board...	$6.66	Buy on Amazon
3		Cox 3389 Creative Color Wheel-	$9.99	Buy on Amazon
4		Outus 2 Pcs Creative Color Wheel,5.5 Inch/ 14 Cm	$6.99	Buy on Amazon
5		Nezyo 4 Pcs Color Wheel Paint Mixing Learning Guide Art Class Teaching Tool	$8.99	Buy on Amazon

As an Amazon Associate I earn from qualifying purchases.

Use the palette as a digital design convention—not as a claim that each color is a sharply defined physical band. For CSS named colors, printing, accessibility, and the difference between a primary and secondary rainbow, see the sections below.

ROYGBIV and VIBGYOR mean the same colors

ROYGBIV is a mnemonic for Red, Orange, Yellow, Green, Blue, Indigo, and Violet. It lists the conventional colors from the long-wavelength red end toward the short-wavelength violet end of the visible spectrum. NASA uses ROYGBIV as an educational way to remember this sequence in its rainbow and wavelength lesson.

#1 Best Overall

JimKing Creative Color Wheel, Paint Mixing Learning Guide, Art Class Teaching Tool for Makeup Painting Tattoo,Blending Board Chart Color Mixed Guide Hardboard(9.25inch)

• Helps organise colours to make choices and combinations easier;Defines common terms and helps the artist to understand colour uses and interactions.
• Designed for all artists, including: Painters, crafters, interior, graphic, garden, and landscape designers;Perfect gift for creative people!
• Two-sided rotating wheel shows colour relationships;230mm diameter,2 packs Convenient and portable.
• UV coated to minimise fading and protect from moisture.Paper cover makes it;Paper evelope cover makes it difficult to break during transportation.
• Good for beginners to identify any of the colors easily and recognize the middle of the color simply.

$4.99

Buy on Amazon

VIBGYOR is the reverse mnemonic: Violet, Indigo, Blue, Green, Yellow, Orange, and Red. The term is particularly familiar in Indian educational materials, including an activity book from the Delhi State Council of Educational Research and Training and an official Employees’ State Insurance Corporation reference.

So the acronyms do not represent different color sets, different wavelengths, or different HEX values. Choose the acronym based on the direction in which you are listing the colors:

• ROYGBIV: red → orange → yellow → green → blue → indigo → violet
• VIBGYOR: violet → indigo → blue → green → yellow → orange → red

Recommended seven-color rainbow palette

The following is a practical, vivid digital palette. It is convenient for copying into CSS, illustration software, presentations, or a worksheet, and follows the commonly used seven-value convention documented in this rainbow color-code reference. These are selected sRGB swatches, not unique measurements inherent to the natural rainbow.

ROYGBIV HEX sequence

#FF0000 → #FF7F00 → #FFFF00 → #00FF00 → #0000FF → #4B0082 → #9400D3

VIBGYOR HEX sequence

#9400D3 → #4B0082 → #0000FF → #00FF00 → #FFFF00 → #FF7F00 → #FF0000

For a design with seven separate bands, use the colors in one of those sequences. For a smoother illustration, interpolate between them with a gradient. Either approach is a design choice rather than a standardized reconstruction of sunlight.

Which color comes first in a real rainbow?

The answer depends on the optical situation and on what direction you are reading the image. Avoid an unqualified rule such as “red is always on top.”

Primary rainbow

In the usual primary rainbow, red appears at the outer edge of the arc and violet at the inner edge. Orange, yellow, green, blue, and the traditional indigo region lie between them. This bow results from light entering a water droplet, being internally reflected once, and then leaving the droplet. The National Weather Service explanation of rainbow optics describes the primary bow’s red-outside, violet-inside arrangement.

Secondary rainbow

A secondary rainbow is produced by two internal reflections inside the droplets. Its order is reversed: violet is toward the outside and red toward the inside. That is why a double-rainbow illustration should reverse the primary sequence for the outer bow.

A prism projection can be oriented in different directions depending on how the prism and screen are arranged, while a horizontal CSS graphic can run either left-to-right or right-to-left. “Top to bottom,” “outside to inside,” and “first to last” therefore need context.

Rank #2

Creative Color Wheel, Paint Mixing Learning Guide Art Class Teaching Tool for Makeup Blending Board Chart Color Mixed Guide Mix Colours (9.25inch)

• This package include one Creative Color Mixing Board with one regular Color Wheel (9.25 inch).
• Easy-to-use tool that visually illustrates relationships between colors and demonstrates the results Features a grayscale, tints and tones, definitions of color terms, and illustrations of color.
• Color Wheel helps show which colors are complimentary, and how they go (or don't go) together.
• Some people know instinctively, and others need a visual tool to help them choose.
• Two sided wheel with indicators for complementary, split complementary and triad color schemes, how to tint and shade, primary, secondary and tertiary references, and more.

$6.66

Buy on Amazon

Why there are no single exact rainbow HEX codes

Light dispersed by a prism does not arrive as seven isolated stripes with hard borders. Wavelength changes continuously, and the colors blend into one another. NASA describes the visible spectrum as approximately 380 to 700 nanometres and notes that the named colors merge smoothly rather than forming perfectly separate bands. The number seven is a conventional way of dividing and teaching that continuum.

Isaac Newton’s historical seven-color classification helped establish the familiar sequence of violet, indigo, blue, green, yellow, orange, and red. At the same time, Newton described “all their intermediate Degrees in a continual Succession,” acknowledging the transitions between the named colors in Opticks. Historical context is also discussed by the University of Chicago Library.

That distinction matters because a wavelength is a property of light, whereas a HEX value is a coordinate in a digital color space. A single-wavelength light, a mixture of wavelengths, and a screen pixel can produce related visual sensations without having the same physical description. There is no direct rule saying that one wavelength range must convert to one universal HEX swatch.

Is indigo a separate spectral color?

Indigo belongs in the traditional seven-color ROYGBIV/VIBGYOR teaching model, but it does not have a universally agreed sharp boundary that separates it from blue or violet. Different references divide the visible spectrum differently, and some modern explanations omit indigo when simplifying the spectrum. The Physics of Color reference discusses both the varying boundaries and indigo’s conventional status.

For a classroom worksheet or a traditional seven-band rainbow, include indigo and label it clearly. For a scientific visualization, a continuous spectrum or a simpler six-color design may be more honest. Neither choice is automatically an error if the purpose is stated.

Approximate wavelength ranges

These commonly used educational ranges show why the color names are useful labels but not exact digital specifications:

The boundaries in this table are approximate and reference-dependent. A commonly used seven-band educational chart supplies these divisions in this LASP spectrum resource, while NASA gives the overall visible-light range as approximately 380–700 nm. The difference is a reminder not to treat the ranges as universal cut points or as instructions for converting directly to HEX.

What RGB and HEX codes mean

In ordinary web and screen workflows, RGB describes a color using red, green, and blue channel values. In the standard 8-bit form, each channel runs from 0 to 255:

Rank #3

Cox 3389 Creative Color Wheel-

• Creative color wheel-9.25"
• This item Belongs to craft supplies, arts-and-crafts-supplies
• This item is manufactured in United States
• No batteries required

$9.99

Buy on Amazon

• 0 means none of that channel.
• 255 means the channel is at full intensity.
• Mixing the three channel values produces the displayed sRGB color.

A six-digit HEX value writes those same three channels in hexadecimal notation as #rrggbb. Each pair represents one channel. For example:

RGB(255, 127, 0)
255 = FF
127 = 7F
0   = 00

HEX = #FF7F00

In CSS, HEX digits are case-insensitive, so #ff7f00 and #FF7F00 represent the same value. An eight-digit form such as #FF7F0080 adds an alpha channel for transparency; 80 is approximately half opacity. See MDN’s explanation of CSS color values for the notation and available formats.

These familiar CSS RGB and HEX values are based on the sRGB color space and should be understood as screen-oriented color specifications, not as wavelength labels. The W3C CSS Color specification defines the relevant color representations.

Vivid rainbow colors versus CSS named colors

The practical palette above and CSS’s built-in color keywords are not interchangeable. CSS names were standardized for web use; they were not designed to create seven equally vivid rainbow bands.

These keyword values are defined in the CSS named-color specification. The most important differences are:

• The vivid palette’s #00FF00 is formally CSS lime, not CSS green. CSS green is the darker #008000.
• The vivid palette’s #9400D3 is formally CSS darkviolet, not CSS violet. CSS violet is the lighter #EE82EE.
• The vivid palette’s #FF7F00 is a convenient orange swatch, while CSS orange is #FFA500.

Use the vivid table when you want strong, recognizable bands. Use the CSS keyword values when semantic names and browser-defined colors matter more than matching the visual intensity of a traditional rainbow.

Simple CSS rainbow gradients

This example defines the vivid seven-color palette as reusable CSS custom properties:

:root {
  --rainbow-red:    #FF0000;
  --rainbow-orange: #FF7F00;
  --rainbow-yellow: #FFFF00;
  --rainbow-green:  #00FF00;
  --rainbow-blue:   #0000FF;
  --rainbow-indigo: #4B0082;
  --rainbow-violet: #9400D3;
}

.rainbow-roygbiv {
  background: linear-gradient(
    to right,
    var(--rainbow-red),
    var(--rainbow-orange),
    var(--rainbow-yellow),
    var(--rainbow-green),
    var(--rainbow-blue),
    var(--rainbow-indigo),
    var(--rainbow-violet)
  );
}

.rainbow-vibgyor {
  background: linear-gradient(
    to right,
    var(--rainbow-violet),
    var(--rainbow-indigo),
    var(--rainbow-blue),
    var(--rainbow-green),
    var(--rainbow-yellow),
    var(--rainbow-orange),
    var(--rainbow-red)
  );
}

Apply rainbow-roygbiv for a red-to-violet horizontal graphic or rainbow-vibgyor for violet-to-red. The CSS gradient is a design gradient. It is not a calibrated physical spectrum, and the result can vary with the display’s profile, gamut, brightness, and calibration.

Rank #4

Outus 2 Pcs Creative Color Wheel,5.5 Inch/ 14 Cm

• Package include: 2 creative color wheel, 5.5 inch in diameter, the artist wheel helps show which colors are complimentary, and how they go (or don't go) together, suitable for learning how to color; Two identical color wheels, with different designs on the front and back
• Color mixing guide: the color wheel shows color, from basic principles and color mixing results on the front side; Spin around the paint wheel, then you will find the color mixture results in the windows, to learn the color theory in a fun way
• Color leaning tool: the backside of the color artist wheel that visually illustrates relationships between colors and demonstrates the results features a grayscale, and triad colors tints and tones, definitions of color terms, and illustrations of color, such as complementary colors, and triad colors
• Easy to use: this color mix guide consists of 3 layers, made of reliable cardboard with smooth surface and smooth rotation; And the size is moderate, easy to operate and carry
• Wide application: the relationship wheel is suitable to use when painting, quilting, interior design, having creative craft projects, and home decorating; Suitable for artists, teachers, kids, painters, designers, and tattoo learners

$6.99

Buy on Amazon

Violet is not the same as purple

In the traditional spectrum model, violet is the short-wavelength endpoint of visible light. Purple is generally a perceived composite produced by combining red with blue or violet light; it does not correspond to one single wavelength in the same way. The distinction is explained in the Physics of Color reference.

That is why a digital violet swatch may look purple, especially when it uses a saturated value such as #9400D3. For a traditional rainbow chart, label the endpoint violet even if its appearance resembles purple. A color wheel is different again: it commonly connects violet back to red through purples as a design construct, whereas a rainbow spectrum does not naturally wrap around in a circle. The W3C CSS Color specification distinguishes the rainbow-like hue arrangement from the added purples of a color wheel.

Which palette should you use?

Accessibility for rainbow graphics

Bright yellow and vivid green can be difficult backgrounds for text, while the contrast between neighboring rainbow bands may not be sufficient to communicate information. Under WCAG’s minimum-contrast criterion, normal-size text generally needs a contrast ratio of at least 4.5:1, and large text needs at least 3:1. Check the actual text-and-background combination rather than assuming that black or white will always work. See the WCAG contrast guidance.

Do not use color as the only way to communicate a category, status, instruction, or difference. Add text labels, position, borders, patterns, icons, or other visual cues. This helps people with color-vision deficiencies and people viewing the design on monochrome, low-quality, or limited-color displays. WCAG’s use-of-color guidance explains this requirement.

For a labeled rainbow chart, write the color names directly or provide an accessible text list in the same order. For a decorative gradient, include an appropriate alternative description if the gradient itself carries meaning.

Using HEX and RGB colors for print or painting

HEX and RGB are primarily digital color specifications. Screens create color with additive light, while commercial printing normally uses CMYK or another managed color workflow. Some bright sRGB colors cannot be reproduced exactly with process inks, so a printed rainbow may look duller or otherwise different from the screen.

For reliable print output:

1. Start with the intended digital palette and the intended viewing conditions.
2. Convert or proof the colors using the printer’s actual ICC or CMYK profile.
3. Check which colors are outside the printer’s reproducible gamut.
4. Inspect a proof on the intended paper before committing to a large run.

Adobe’s explanation of RGB, CMYK, color spaces, gamut, and device differences covers why the same numeric values do not guarantee the same appearance everywhere. Adobe also provides guidance on making colors printable.

If you are painting a physical rainbow, treat these codes as screen references rather than paint formulas. A HEX value does not specify a pigment, mixing ratio, surface, lighting condition, or varnish. Select and test physical paints under the lighting in which the finished work will be viewed.

Best Value

Nezyo 4 Pcs Color Wheel Paint Mixing Learning Guide Art Class Teaching Tool

• Package Include: you will receive 4 pieces of color wheels in 2 sizes, measuring about 5.5 inches and 9 inches in diameter, the artist wheels help show which colors are complimentary, and how they go (or do not go) together, ideal for learning how to color
• Color Mixing Guide: the color wheel chart shows color, from basic principles and color mixing results on the front side; Spin around the paint wheel, then you will find the color mixture results in the windows, to learn the color theory in a fun way
• Color Leaning Tool: the backside of the painters color wheel that visually illustrates relationships between colors and demonstrates the results features a grayscale, and triad colors tints and tones, definitions of color terms, and illustrations of color, such as complementary colors, and triad colors
• Easy to Use: this artist color wheel and mixing guide consists of 3 layers, made of quality cardboard with smooth surface and smooth rotation; And the size is moderate, easy to operate and carry
• Wide Application: our color wheel make up is suitable to use when painting, quilting, tattoo design, interior design, having creative craft projects, and home decorating; Suitable for artists, teachers, kids, painters, designers, tattoo learners and so on

$8.99

Buy on Amazon

Common mistakes to avoid

• Calling the table exact: describe it as a selected digital palette because natural rainbow colors have continuous transitions.
• Confusing green and lime: #00FF00 is the vivid green used here, but CSS calls that value lime; CSS green is #008000.
• Confusing violet and darkviolet: the selected vivid endpoint #9400D3 is CSS darkviolet, while CSS violet is #EE82EE.
• Assuming red is always on top: red is on the outside of a primary bow, but a secondary bow reverses the order, and digital graphics can run in any direction.
• Treating indigo as a hard physical band: indigo is traditional and useful pedagogically, but its boundaries are not universal.
• Using a rainbow as a color wheel: a spectrum runs from red to violet; a circular color wheel adds a purple connection between the endpoints.
• Using color alone: add labels or another visual distinction whenever the graphic communicates information.
• Assuming screen colors will print identically: proof through the target print profile instead of publishing one universal CMYK conversion.

Further reading

• NASA: ROYGBIV, wavelengths, and frequency
• NASA: visible light and approximate wavelength range
• NASA: why spectrum colors merge smoothly
• National Weather Service: primary and secondary rainbow order
• W3C CSS Color specification
• MDN: CSS named colors

Frequently Asked Questions

Is ROYGBIV the same as VIBGYOR?

Yes. They contain the same seven traditional color names in reverse order. ROYGBIV runs red to violet, while VIBGYOR runs violet to red.

What are the seven traditional rainbow colors?

They are red, orange, yellow, green, blue, indigo, and violet. This is a conventional educational division of a continuous spectrum, not seven sharply separated physical bands.

What is the HEX code for violet?

There is no single universal rainbow-violet HEX value. The vivid palette in this article uses #9400D3, which CSS formally names darkviolet. CSS’s named color violet is #EE82EE.

Is #00FF00 green or lime?

It is the vivid green value used in the practical rainbow palette, but the CSS keyword for #00FF00 is lime. CSS green is the darker #008000.

Is indigo really a separate rainbow color?

Indigo is part of the traditional seven-color ROYGBIV and VIBGYOR mnemonics, but the visible spectrum has no universally agreed sharp indigo boundary. Include it for a traditional seven-color chart; omit it or use a continuous gradient when scientific smoothness is the priority.

What is the order of a double rainbow?

The primary rainbow has red on the outside and violet on the inside. The secondary rainbow reverses that order: violet is outside and red is inside.

Are rainbow HEX and RGB codes standardized?

No. HEX and RGB specify selected digital colors, usually in sRGB; they do not encode a unique physical wavelength for each named rainbow color. Different palettes choose different swatches and boundaries.

Can these rainbow colors be used for printing?

They can be used as starting colors, but RGB/HEX values do not guarantee identical CMYK output. Convert and proof them using the printer’s actual color profile, paper, and ink conditions.

What is the difference between violet and purple?

Violet is conventionally associated with the short-wavelength end of the visible spectrum. Purple is generally a composite perceptual color made from red with blue or violet light and does not correspond to one single wavelength in the same way.

The Bottom Line

Use #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, and #9400D3 for a vivid seven-color digital rainbow. Call the sequence ROYGBIV when it runs red to violet and VIBGYOR when it runs violet to red. Remember that the codes are design conventions, not exact physical measurements; CSS names use some different values, and print output requires color-managed conversion and proofing.

Quick Recap

Bestseller No. 1

JimKing Creative Color Wheel, Paint Mixing Learning Guide, Art Class Teaching Tool for Makeup Painting Tattoo,Blending Board Chart Color Mixed Guide Hardboard(9.25inch)

$4.99

Bestseller No. 2

Creative Color Wheel, Paint Mixing Learning Guide Art Class Teaching Tool for Makeup Blending Board Chart Color Mixed Guide Mix Colours (9.25inch)

Some people know instinctively, and others need a visual tool to help them choose.

$6.66

Bestseller No. 3

Cox 3389 Creative Color Wheel-

Creative color wheel-9.25"; This item Belongs to craft supplies, arts-and-crafts-supplies; This item is manufactured in United States

$9.99

Bestseller No. 4

Outus 2 Pcs Creative Color Wheel,5.5 Inch/ 14 Cm

$6.99

Bestseller No. 5

Nezyo 4 Pcs Color Wheel Paint Mixing Learning Guide Art Class Teaching Tool

$8.99

ThatPainter Team

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.