Indigo carries the hex code #4B0082, which resolves to rgb(75, 0, 130) and hsl(275, 100%, 26%). The green channel sits at zero while blue leads red by 55 points, which places it at 275° on the color wheel, in the stretch between blue and violet.
Indigo is the only color in this cluster that passes AAA as body text on white. At 12.95:1 it clears every threshold in the spec, and it fails against black at 1.62:1, which inverts the constraint every light color in this cluster carries. This page covers every code format, the computed palettes, the four elements where indigo performs, and the dark-mode problem that comes with a color this deep.
What Is the Color Indigo?
Indigo sits at 275° on the color wheel with 100% saturation and just 26% lightness. The CSS keyword indigo maps to #4B0082 exactly, and that low lightness is what separates it from every other saturated hue in the named web palette.
The full code set for #4B0082:
- HEX: #4B0082
- RGB: rgb(75, 0, 130)
- RGBA: rgba(75, 0, 130, 1)
- HSL: hsl(275, 100%, 26%)
- HSB: 275, 100, 51
- CMYK: 42, 100, 0, 49
The CMYK reading tells the practical story. At 49% key coverage there’s substantial black in the mix, which is why indigo prints as a deep, dense color rather than a bright one.
Indigo’s identity has been contested since Newton named it. He placed it between blue and violet in the spectrum, and many modern color scientists argue the band is too narrow to warrant its own name, which is why some rainbow diagrams show six colors rather than seven.
The web keyword sidestepped that debate. #4B0082 is a specified value regardless of where the spectral band sits, and design work only needs the number.
Why Is Indigo the Rare Saturated Color That Passes AAA?
Indigo’s 12.95:1 on white comes from its low luminance, and its low luminance comes from having zero green. Relative luminance weights green at 71.52%, so a color with none of it starts from a very low base regardless of how saturated it looks.
Three consequences follow, and they shape every decision on this page:
- Indigo works as body text on white: at 12.95:1 it clears AAA at any size
- White text on indigo works equally well: the same ratio in reverse
- Indigo fails on dark surfaces: 1.62:1 on black leaves it invisible
That first point is genuinely unusual. Most saturated hues force a choice between brand expression and readable type, and indigo removes it, which is why so many products use it for links and headings simultaneously.
By contrast, cyan at the same 100% saturation reaches only 1.25:1 on white, because it carries both green and blue at maximum. The two colors sit at opposite ends of the luminance scale despite sharing a saturation value.
The trade appears the moment a dark theme enters the picture. Indigo’s advantage in light mode becomes a liability in dark mode, and a separate token is unavoidable.
How Does Indigo Appear on Digital Screens?
Indigo renders as a deep, slightly purple blue on most panels. With green at zero, the color depends entirely on red and blue subpixel output, which keeps it stable across displays.
The measured values are the inverse of most colors in this cluster:
- #4B0082 on white: 12.95:1, passes AAA
- White text on #4B0082: 12.95:1, passes AAA
- #4B0082 on black: 1.62:1, fails
- Dark variant #380062 on white: 15.62:1, passes AAA
- Bright variant #6A00B6 on #160C1D: 2.07:1, fails
Dark mode is indigo’s weak point rather than its strength, which reverses the pattern every pale color follows. A color this dark has nowhere to go against a near-black surface, and lightening it enough to pass changes the hue toward violet.
The tint ramp is the only route through. #9602FF and lighter reach usable ratios on dark surfaces, though they read as violet rather than indigo, so the dark-mode token is a different color in practice.
Panel gamma affects it more than most. On an uncalibrated display indigo can flatten toward near-black, which is why a large indigo surface should be checked before it ships.
What Are the Shades and Tints of Indigo?
Shades come from mixing black into #4B0082, and the ramp compresses fast because there’s so little lightness left:
- #420072
- #380062
- #2F0051
- #260041
- #1C0031
- #130020
- #090010
By #260041 the color is functionally near-black. Indigo’s shade ramp is therefore short in practical terms, and most design systems only need one or two steps below the base.
Tints carry the real range for indigo, which is the opposite of how most colors behave:
- #6500AC
- #7D00D7
- #9602FF
- #A72DFF
- #B957FF
- #CB81FF
- #DCACFF
- #EED6FF
The step at #9602FF is where indigo crosses into dark-mode territory. Everything above it in the ramp works against near-black surfaces, and everything below it belongs in light mode.
Named neighbors sit across the blue-purple range:
- Purple (#6A0DAD): lighter and more violet, 8.9:1 on white
- Patriarch (#800080): the CSS purple value, redder, 9.5:1
- Dark violet (#9400D3): considerably lighter, 6.4:1
- Navy (#000080): bluer and equally deep, 16.0:1
- Ultramarine (#4166F5): far bluer and brighter, 4.3:1
What UI Elements Work Best with Indigo?
Indigo belongs anywhere on a light surface that needs both contrast and character. At 12.95:1 in both directions it’s one of the few saturated colors that never fails a text check in light mode.
Dark surfaces are where it falls apart, so dark-mode accents, near-black backgrounds, and any element on a dark theme need a lighter token. Four element types are where indigo genuinely performs.
Body Text and Links
Text is indigo’s most valuable job, and almost no other saturated hue can claim it. Body copy set in #4B0082 on white clears AAA at every size and weight, so an entire article can carry the brand color without a single contrast failure.
Links benefit most of all. An indigo link at 12.95:1 stands apart from near-black body copy while remaining fully readable, which solves the problem that forces most products toward a desaturated blue.
The shade #380062 gives a second hierarchy step at 15.62:1. Two levels of indigo type cover primary and secondary without introducing a neutral.
Primary Buttons and CTAs
Buttons work in both directions with indigo, which is rare. White on #4B0082 hits 12.95:1, so a filled button carries any label size, and an outlined variant on white clears the non-text requirement several times over.
Hover states come from the shade ramp rather than from opacity. A step to #380062 keeps the hue stable, where a transparency change alters the effective contrast against whatever sits behind the button.
Indigo also carries weight that lighter accents lack. A single indigo button reads as the primary action without needing size or position to make the point.
Navigation Bars
Navigation is where indigo covers real surface area safely. An indigo top bar or sidebar hosts white labels at 12.95:1, and every icon placed on it clears AAA automatically.
The boundary against a dark page needs attention. Indigo and a near-black background sit close enough in luminance that the navigation edge can disappear, so a lightened border at #6500AC does the separation work better than a shadow.
Brand expression comes free here. A navigation bar in a saturated hue is unusual precisely because most saturated hues fail their label contrast, and indigo doesn’t.
Data Visualizations
Charts use indigo as the anchor series in a comparison. Its depth means it reads as the primary line or bar without any additional weight, and it separates cleanly from warm categorical colors.
The tint ramp supplies the rest of the family. A three-series chart in #4B0082, #7D00D7, and #B957FF reads as one coherent group, which suits the same metric measured across periods.
Small text on an indigo fill stays legible, unlike most saturated chart colors. Data labels can sit directly on the bar rather than beside it.
What Are the Best Indigo Color Palettes for UI?
Every palette below comes from rotating hue around #4B0082 at fixed saturation and lightness. Because lightness sits at 26%, these schemes produce deep values rather than the bright sets a mid-lightness base generates.
Monochromatic
The monochromatic scheme holds hue at 275° and moves lightness: #4B0082, #2E004E, and #6A00B6. All three are deep, and the lightest of them still passes AA on white.
Mapping is straightforward. #2E004E handles the darkest text, the base carries fills and links, and #6A00B6 works as a hover or a chart variant.
Analogous
Analogous pulls neighbors 30° in each direction: #4B0082, #820077, and #0B0082. A magenta-purple and a near-navy flanking the indigo, all at matched depth.
This is the most usable analogous set in the cluster. All three pass AA on white, so any of them can carry text, which is rarely true of an analogous scheme.
Complementary
Indigo’s complement sits opposite at 95°: #4B0082 paired with #368200, a deep forest green. Both are dark and saturated, so the pairing produces hue tension without the luminance clash that a light complement creates.
The green at #368200 reaches 5.4:1 on white and passes AA. Two complementary colors that both carry text is an unusual and useful property.
Triadic
The triadic scheme gives you #4B0082, #824C00, and #00824C: indigo, a deep amber-brown, and a forest green. Evenly spaced and uniformly dark, which makes it the strongest categorical set here.
All three pass AA on white. A chart built from this triad supports data labels directly on the series, which most categorical palettes can’t manage.
Split-Complementary
Split-complementary softens the pairing: #4B0082, #778200, and #00820B. Indigo with an olive and a deep green, giving a third value for secondary actions.
This scheme is the most flexible of the five for a full interface. Visily’s theme tools can generate the tint and shade ladder for each value so hover and dark-mode variants come out accessible rather than hand-mixed.
Which Colors Are Similar to Indigo?
Five named colors sit close enough to #4B0082 to substitute for it, and each moves the contrast in a useful direction:
- Purple (#6A0DAD): lighter and more violet, 8.9:1 on white
- Patriarch (#800080): the CSS purple keyword, redder, 9.5:1
- Dark violet (#9400D3): brighter, 6.4:1
- Navy (#000080): bluer and slightly deeper, 16.0:1
- Ultramarine (#4166F5): far bluer and much lighter, 4.3:1
Navy is the closest functional relative. At 16.0:1 it behaves almost identically in an interface while reading as conservative where indigo reads as distinctive.
Ultramarine sits at the other extreme. It looks like a natural indigo substitute and drops to 4.3:1, which means it fails body-text AA where indigo comfortably passes, so the swap isn’t neutral.
Which Colors Pair Best with Indigo?
White and off-white are indigo’s essential partners. At 12.95:1 and near-identical figures, they let the color carry text, fills, and navigation without a single compromise.
Deep green from the complementary scheme is the strongest accent. #368200 sits opposite at matched depth and passes AA on white, so both colors can do real work rather than one supporting the other.
Warm metallics soften indigo’s formality. Muted gold, brass, and warm sand read as considered against a deep purple-blue, which is the combination editorial and premium products reach for.
Coral and warm pink give it energy. The warm side of the wheel counterbalances indigo’s coolness without competing for the interactive role.
The 60-30-10 split applies as follows:
- 60% white or off-white: page surfaces and reading areas
- 30% indigo: navigation, headings, links, and primary actions
- 10% accent: the green or warm metallic carrying secondary emphasis
Indigo tolerates a 30% share comfortably. Its contrast is strong enough that a large presence stays readable rather than becoming a strain.
Which Colors Should You Avoid Pairing with Indigo?
Black and near-black surfaces fail first. At 1.62:1 an indigo element on black is effectively invisible, which is the single most common indigo mistake when a dark theme gets added to an existing product.
Two computed near-clashes cause trouble in light mode: #820082 and #160082. Both sit 25° away at identical lightness, offering a hue difference with no luminance difference to define the edge.
Deep navy is the subtler problem. Indigo and navy sit close in both hue and luminance, so placing them adjacent produces a boundary users can’t see, even though each color works well alone.
Mid-tone purples flatten it. A #955195 beside indigo reads as a faded version of the same color rather than as a second value, so the shade ramp serves better than a neighboring hue.
Does Indigo Meet Accessibility Standards?
Indigo passes WCAG AAA on white in both directions, which no other saturated color in this cluster manages. The 12.95:1 measurement clears the 4.5:1 AA and 7:1 AAA thresholds set by the W3C with substantial margin.
Indigo lands as follows across the common pairings:
- #4B0082 on white: 12.95:1, passes AAA
- White on #4B0082: 12.95:1, passes AAA
- #380062 on white: 15.62:1, passes AAA
- #4B0082 on black: 1.62:1, fails
- #6A00B6 on #160C1D: 2.07:1, fails
The dark-mode failures are the part that catches teams out. A design system built around indigo in light mode needs a genuinely different value for dark mode, taken from the tint ramp at #9602FF or above.
Color vision deficiency treats indigo reasonably well. Under protanopia and deuteranopia it shifts toward a deep blue rather than converging with anything else, since its luminance stays low regardless of how the hue is perceived.
Tritanopia is the harder case. Blue-yellow deficiency pushes indigo toward a dark red-brown, which preserves its contrast and loses its identity, so brand recognition suffers even though readability doesn’t.
How Can You Convert Indigo Between HEX, RGB, HSL, CMYK, and Other Color Formats?
Each format describes the same indigo from a different angle:
- HEX #4B0082: the default in design files and CSS
- RGB rgb(75, 0, 130): red and blue with green at zero
- RGBA rgba(75, 0, 130, 1): adds alpha for scrims and tinted overlays
- HSL hsl(275, 100%, 26%): full saturation at low lightness
- HSB 275, 100, 51: the picker model, reporting brightness at 51%
- CMYK 42, 100, 0, 49: magenta-heavy over a substantial black plate
The HSL and HSB disagreement is worth noting in handoff. Lightness reports 26% and brightness reports 51% for the same color, so a number copied between the two models produces a visibly different result.
HSL makes the tint ramp predictable, and for indigo the tints matter more than the shades. Stepping lightness upward from 26% generates the dark-mode family, which is the part of the ramp indigo actually needs.
CMYK reproduces indigo reasonably well, with a caveat. The 49% key coverage means a large part of the color comes from black ink, so the printed version reads slightly flatter than the screen, and a spot color is worth considering for brand-critical work.
Wrapping Up
Indigo is the saturated color that reads like a neutral. #4B0082 carries body text, links, buttons, and navigation on white at AAA in both directions, #380062 gives a second type level at 15.62:1, and the dark-mode token has to come from #9602FF or lighter, because the base value disappears entirely against near-black.
Those two token sets don’t need to be built by hand. Open Visily and use its AI-powered design tools to generate the indigo tint and shade ladder, separate light and dark theme values, and matched accent pairings across the entire design in one pass.
