A brand guide can call a swatch indigo while a developer sees purple and a printer produces navy. That mismatch starts with a loose color name. Indigo is a deep blue-purple color. A common digital reference is the CSS named color #4B0082, but indigo describes a range rather than one universal swatch. Screens, lighting, paper, and nearby colors all affect perception.
Quick answer: Indigo sits between blue and violet. It usually looks darker than a pure blue and more purple than navy. For one reproducible web color, use the CSS keyword indigo, which is #4B0082. Then check contrast and print gamut for that exact swatch.
What color is indigo?
Indigo occupies the blue-violet area of the visible spectrum. In practical design language, it is a dark blue with a clear purple bias. The CSS named color indigo uses #4B0082, which makes it a shared reference for web designers and developers. CSS named colors are standardized keywords, as documented by MDN's named-color reference. The same keyword is on the named color index.
Picture a deep blue heading with enough red added to pull it toward violet. That is the usual visual territory. A lighter blue-purple can still be called indigo in a brand guide. A heavily shaded version can resemble navy or aubergine. Your monitor's profile and the colors beside the swatch can shift the impression.
The full conversion record for this reference — HEX, RGB, HSL, HSV, CMYK, OKLCH, tints, shades, and contrast — lives on the indigo #4B0082 color page. Use that page when you need every model. This article is about what the color looks like and when the name is the wrong label.
When indigo is not the right label
- Choose navy (
#000080) when the swatch reads as blue with little purple. In this site's HSL conversion, navy ishsl(240,100%,25%), the same lightness as CSS indigo but a pure blue hue. - Choose purple (
#800080) when the hue has moved further from blue. Purple ishsl(300,100%,25%). - The CSS keyword violet is
#EE82EE,hsl(300,76%,72%). That is a light purple, not a dark cousin of indigo. If a brand says "violet" and means a deep purple, do not substitute the CSS keyword. - A muted gray-brown is a different hue family. It can sit beside indigo as a neutral. It cannot stand in for indigo.
Indigo is a color family name. A numeric value identifies the exact swatch.
Codes for the CSS indigo reference
These figures are the values Color Mapper shows for #4B0082. They describe that one sRGB reference, not every color a brand calls indigo. Pairwise converters are on the converter hub. The color page is the place to copy the full set, including tints and harmony palettes.
| Model | Value on the indigo color page |
| --- | --- |
| HEX | #4B0082 |
| RGB | rgb(75, 0, 130) |
| HSL | hsl(275,100%,25%) |
| HSV | hsv(275, 100%, 51%) |
| CMYK | cmyk(42,100,0,49) |
| OKLCH | oklch(33.9% 0.179 301.7) |
Hue 275° sits between CSS blue at 240° and CSS purple at 300°. That is the numeric version of "blue with a purple bias." A product palette can still pick a different blue-purple, such as #6366F1. That hex is not the CSS keyword, and it is not in the named-color catalog.
Contrast for this swatch, from the same page: 12.95:1 on white and 1.62:1 on black. White text on #4B0082 passes AAA for normal text. Black text on it fails AA for normal text and for large text.
The CSS Color specification also documents color spaces beyond sRGB, so a value can behave differently across supported devices. Record the source hex, the color space, and the intended output before you hand the swatch to anyone else.
What does indigo look like in print?
Paper reflects ink. A display emits light. The formula conversion of #4B0082 on this site is cmyk(42,100,0,49), from HEX to CMYK. Treat that as a starting conversion, not a press recipe. Paper, ink, and the printer's profile still change the result.
The print gamut checker compares the screen color with a coated-process approximation. For #4B0082 it reports a press preview of #390239 and a ΔE2000 of 14.2, which is above the tool's shift threshold, so the swatch is flagged. Palette swatches use the same flag and show the CMYK string. Read CMYK-safe web palettes before you send a saturated blue-purple to a brochure.
| Print concern | Why the result changes | Practical check |
| --- | --- | --- |
| Color profile | CMYK profiles map RGB colors differently | Convert with the production profile the printer named |
| Paper | Coated and uncoated stock reflect ink differently | Review a proof on the chosen stock |
| Gamut | This reference shifts under the site's press approximation | Open #4B0082 in the print gamut checker |
A screen match proves only that one display can show the color. A print proof tests the actual paper-and-ink combination. Managing color from screen to press covers the rest of that handoff. Primary colors explains why RGB and CMYK primaries are not the same set.
Indigo compared with similar colors
Color names overlap, which is why two teams can approve "indigo" and still choose different swatches. Compare hue and lightness, then compare names.
| Color | CSS keyword on this site | What it looks like next to indigo |
| --- | --- | --- |
| Blue | #0000FF, hue 240° | Purer and lighter. No purple bias. |
| Navy | #000080, hue 240°, lightness 25% | Same lightness family, almost no purple. |
| Indigo | #4B0082, hue 275°, lightness 25% | Dark blue pulled toward purple. |
| Purple | #800080, hue 300°, lightness 25% | Same lightness, further from blue. |
| Violet | #EE82EE, lightness 72% | Light purple. Not a dark indigo. |
Compare colors measures ΔE2000 when two swatches are close enough that the names are not helping. HEX, RGB, and HSL is the notation guide if the argument is about how the value is written rather than which hue it is.
How to use indigo in a color palette
Indigo works as a dark anchor. One dark swatch cannot cover every interface state. Pair it with a warm accent, with neighboring blue-violet hues, or with white and pale neutrals when the text has to be readable.
For a website, build a scale instead of assigning #4B0082 to every component. The tint and shade generator turns one HEX value into a Tailwind-style 50–950 ramp and shows each step's contrast against white and against black. Export from that tool is a Tailwind config snippet or CSS variables. The palette generator is the separate tool for six harmony rules, and it can export CSS, Tailwind, or JSON.
- Generate the 50–950 scale from the chosen indigo.
- Assign roles such as background, border, button, and text. Lighter steps for surfaces, darker steps for headings or navigation.
- Check normal text at 4.5:1 and large text at 3:1 for WCAG AA, based on W3C's contrast guidance. White on
#4B0082is 12.95:1. Black on#4B0082is 1.62:1. - Preview the palette in the color blindness simulator before shipping. It covers protanopia, deuteranopia, and tritanopia.
Use indigo as a button background only after checking the label color. The contrast checker shows AA and AAA badges for normal and large text, suggests a lighter or darker foreground when the pair fails AA for normal text, and can review combinations in a palette matrix. WCAG contrast for brand colors is the audit sequence around those badges.
How to find an indigo candidate in a photo
A photograph is a starting point, not a measurement of the CSS keyword. Palette from image extracts up to eight dominant colors. Processing stays in the browser and does not send the file to a server. The image is scaled down, mostly transparent pixels are skipped, and the remaining pixels are grouped into coarse RGB buckets. The buckets that contain the most pixels are returned. There is no single-pixel eyedropper, so you cannot click the center of a jacket and receive that exact pixel.
A large background will outrank a small logo. Crop to the region you care about before you choose the file. Camera processing, compression, reflections, and lighting can still move the buckets. A dark blue garment under warm light may produce a purple-looking bucket even when the fabric looks indigo in person. After you have a hex, open it on its color page if it is a catalog color, or run it through the print gamut checker and the contrast checker if it is not. What color is this? is the longer version of that identification workflow.
FAQ
Is indigo blue or purple?
Indigo is a deep blue-purple between blue and violet. The CSS keyword indigo is #4B0082, hsl(275,100%,25%) on this site. CSS blue and navy sit at hue 240°. CSS purple sits at hue 300°. The name still covers a range, so a brand guide can use a different swatch.
What is the standard HEX code for indigo?
The CSS named color indigo is #4B0082, which is rgb(75, 0, 130). The indigo color page also lists hsl(275,100%,25%), hsv(275, 100%, 51%), cmyk(42,100,0,49), and oklch(33.9% 0.179 301.7). Other design systems can call a different hex indigo.
Is indigo accessible for text?
Only as a pair. #4B0082 is 12.95:1 on white, which passes AAA for normal text, and 1.62:1 on black, which fails. Test the exact foreground and background in the contrast checker. WCAG 2.1 AA generally requires 4.5:1 for normal text and 3:1 for large text.
Can indigo be printed accurately?
Only within the limits of the selected profile, paper, ink, and press. The formula conversion of #4B0082 is cmyk(42,100,0,49). The print gamut checker flags that hex: its coated-process preview is #390239 at ΔE 14.2. Approve a proof on the final stock before you treat the screen color as the printed color.