You are sorting through a client's existing color system and find color: ivory on a background div. You check the computed style and see #FFFFF0. It looks essentially white on screen, but it is not white — there is a fractional difference in the blue channel that matters to someone, somewhere, for some reason. The Color Name Finder would have told you immediately: paste in #FFFFF0 and get ivory back. But that still leaves the question of why ivory, why not white, and what the other I colors are.
The answer to that last question is short. Only three CSS named colors start with I: indigo, indianred, and ivory. Three colors, but three with history substantial enough to fill out the picture.
You can find all the other letter groups in colors that start with A and colors that start with C, but the I group stands on its own as one of the smallest in the CSS color list.
The Three CSS Named Colors That Start with I
The complete list of I-starting CSS colors:
| CSS Name | HEX | RGB | Character |
|---|---|---|---|
| indigo | #4B0082 | R:75, G:0, B:130 | Deep blue-purple |
| indianred | #CD5C5C | R:205, G:92, B:92 | Muted reddish-brown |
| ivory | #FFFFF0 | R:255, G:255, B:240 | Near-white with warm yellow tint |
Three colors covering three different parts of the spectrum: the dark end (indigo), the warm mid-tones (indianred), and the near-white end (ivory). No two of them are remotely similar, which is unusual for a letter group.
Indigo: The Color Newton Added to Make Seven
CSS indigo is #4B0082, a deep blue-purple that sits at the dark end of the named color list. Its RGB values are R:75, G:0, B:130. The green channel is completely off. The red channel at 75 and blue channel at 130 combine to produce a color that is distinctly more purple than blue, with the blue dominant enough to keep it from reading as a pure violet.
The word indigo comes from the Latin "indicum," meaning "from India," which reflects the geographic origin of the dye that gave the color its name. But the name itself has an older story connected to Isaac Newton's rainbow.
When Newton described the visible spectrum in his 1672 experiments with prisms, he named seven colors: red, orange, yellow, green, blue, indigo, and violet. This produced the mnemonic ROYGBIV still taught in schools today. The problem is that Newton chose seven colors partly to match the seven notes of the musical scale, a mystical numerology that drove the categorization as much as optical observation did.
Many physicists since Newton have argued that indigo is not a distinct perceptual category. The visible spectrum transitions continuously from blue to violet with no obvious boundary where indigo begins or ends. Most observers, when asked to point to indigo on a spectrum, either mark something very close to blue or very close to violet. The color between them is difficult to isolate perceptually.
CSS indigo at #4B0082 is definitively purple on any modern screen. It reads as a dark, rich purple-blue, which is a reasonable interpretation of the zone between blue and violet. But it is not an accurate representation of spectral indigo, which appears as a very dark, deep blue-navy at around 420-450nm wavelength.
The discrepancy exists because CSS colors are defined for screen rendering in RGB color space, not for spectral accuracy. When someone needed to give CSS indigo a HEX value, a purple-blue was chosen that communicates "between blue and violet" on screen, which is the conceptual position of indigo regardless of spectral precision.
How CSS Indigo Differs from Real Spectral Indigo
If you mixed spectral indigo on a monitor using its approximate wavelength position, you would get something closer to #3F00FF or a deep navy-blue — a color that most people would call dark blue or blue-violet, not purple. CSS indigo (#4B0082) is more purple than that, with a higher relative contribution from the red channel.
This matters if you are working on something that requires spectral accuracy, like education content about light and color, scientific visualization, or replicating natural phenomena. For those use cases, CSS indigo is a poor choice. The color you actually want for spectral indigo is closer to a deep navy or blue-violet value that you would need to specify by HEX directly.
For ordinary design use, CSS indigo works fine as a deep, dramatic purple-blue. It pairs well with light lavender (#E6E6FA), gold (#FFD700), and white backgrounds. Its darkness — luminance is very low due to the near-zero green channel — means it needs sufficient contrast checking against any text placed on it. The contrast checker confirms whether any text color passes WCAG AA or AAA against indigo as a background.
The History of Indigo Dye and Why It Was Worth More Than Gold
The indigo dye extracted from Indigofera tinctoria and related plants has been used since at least 4000 BCE in South Asia and Egypt. The dye produces a stable, deep blue that does not fade readily — a property that made it extremely valuable before synthetic dyes existed.
By the medieval period, natural indigo was one of the most expensive commodities in international trade. At certain points in history, indigo commanded prices per weight that exceeded gold, silver, and spices. The term "blue gold" was used in European trade records. Portuguese and Dutch trading companies built major routes specifically around the indigo trade from India.
The demand for indigo drove colonial plantation agriculture in the Americas and India. In the American colonies, indigo farming was heavily subsidized by the British Crown as an alternative to tobacco. South Carolina's colonial economy depended significantly on indigo exports.
Synthetic indigo, developed by German chemist Adolf von Baeyer in 1882, collapsed the market for natural indigo within decades. The chemical synthesis is now used to produce the indigo dye for denim fabric worldwide. Every pair of blue jeans is dyed with a synthetic version of the same compound that once reshaped global trade routes.
The CSS color named indigo carries this entire history in its name, even if the HEX value on screen is a different color than the dye that inspired it.
Indianred: What the Name Actually Refers To
Indianred (#CD5C5C) is a muted, medium red with brownish undertones. Its RGB values are R:205, G:92, B:92. The relatively equal green and blue channels at 92 each, combined with a red channel of 205, produce a desaturated red that reads as brownish-pink or rose-red rather than vivid crimson or fire-engine red.
The name is frequently misunderstood. Indianred does not refer to Native Americans. It refers to a red iron oxide pigment historically sourced from India. Iron oxide reds — rust, ochre, sienna, and related pigments — come from iron-rich clay deposits, and South Asia was a significant source of these materials in historical trade. The pigment named "Indian red" in European art supply contexts was a specific variety of red iron oxide known for its consistency and permanence.
The CSS color at #CD5C5C is lighter and more muted than the traditional art pigment named Indian red, which tends toward a darker, more saturated reddish-brown. The CSS version is closer to the lighter, more coral-adjacent end of the iron oxide red family.
Indianred differs from its CSS neighbors in the red family. Crimson (#DC143C) is more vivid and saturated, with a stronger blue component. Firebrick (#B22222) is darker and more intense. Lightcoral (#F08080) is lighter and more pastel. Indianred sits in the desaturated middle range, useful for muted earth-tone accents where a full red would be too intense. It appears in the color families guide in the warm red-to-brown transition zone.
Ivory: The Warmest Near-White in CSS
Ivory (#FFFFF0) is the warmest near-white in the CSS named color list. Its HEX has a blue channel of F0 (240) instead of the maximum FF (255), while both the red and green channels are at full brightness (255). This slight reduction in the blue channel produces a barely perceptible warm yellow tint — the color of elephant tusk ivory, which is not perfectly white but has a slight cream warmth to it.
On most screens, ivory and white (#FFFFFF) look identical at a glance. The difference becomes apparent only in direct side-by-side comparison, where the ivory swatch shows a very slight warmth compared to the pure white. This is the same experience as comparing antiquewhite (#FAEBD7) and white: the differences exist at the HEX level but require deliberate comparison to perceive on screen.
Ivory has a specific use in design. Pure white (#FFFFFF) can feel cold or sterile on warmer color palettes. Ivory adds warmth without crossing into the obvious creaminess of antiquewhite or the visible yellow of lightyellow (#FFFFE0). It is a subtle choice that affects the feel of a page without announcing itself as a color decision.
The name comes directly from the color of elephant tusk ivory. The material itself has a characteristic warm white caused by the organic composition of dentine. Ivory has been used as a luxury material for thousands of years, which is why the color name carries cultural associations with antique objects, formal occasions, and traditional aesthetics.
Putting the I Colors to Work in CSS
The three I colors cover very different use cases despite their small number.
Indigo (#4B0082) is a strong, dark color suited to headers, accent elements, and backgrounds where you want a dramatic blue-purple statement. Its darkness means any text on an indigo background needs high contrast — white or light yellow work; mid-tones will fail WCAG standards. Indigo pairs well with gold, white, and light purple.
Indianred (#CD5C5C) is a muted, warm red useful for secondary accents, tags, labels, and earth-tone design systems. It is warm enough to feel energetic but soft enough to avoid the urgency of a full red. It works on cream and off-white backgrounds and pairs with greens, tans, and warm browns.
Ivory (#FFFFF0) is a background color, not an accent. It works as a page background, card background, or container fill wherever white feels too stark. The warmth is subtle enough that it does not read as a colored choice — it reads as a refined white. If you want to match a specific near-white shade from a source image or brand guide, paste the HEX into the Color Name Finder to confirm whether ivory is the closest match or whether a different near-white like seashell, floralwhite, or antiquewhite is closer.
The I colors are few, but each covers territory that no other letter group duplicates. Indigo's purple-blue depth, indianred's warm muted red, and ivory's refined warmth each fill a distinct role in the CSS color system. Explore the full color section for the complete range of tools to test, convert, and build with any of these colors.
