Colors EncyclopediaNamed color
Indigo
Indigo color #4B0082: RGB 75, 0, 130 and HSL 275°, 100%, 25%. Explore its cool purple profile, contrast, CSS, palettes and harmonies.
Use this color
Create with Indigo
Open a professional color tool with #4B0082 already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Indigo and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-indigo: #4B0082;
.bg-indigo { background-color: #4B0082; }
.text-indigo { color: #4B0082; }Color history, meaning and use · Editorially reviewed
About Indigo Color
Indigo is rooted in dyeing traditions rather than a single flat swatch. Plant-derived indigo has been used across many cultures, and textile makers build depth through repeated immersion in a dye bath. Resist methods such as wax application can preserve lighter areas while successive baths deepen the exposed cloth.
This process history explains why Indigo often suggests layered cloth, workwear, and crafted surfaces. Digitally, it occupies the dark blue-violet region and can function as a near-neutral background or a serious alternative to navy. Fine text still needs measured contrast because a visually rich dark blue is not automatically accessible.
The page defines a digital Indigo; dyed textiles vary with plant source, preparation, fiber, number of baths, and wear.
WCAG Accessibility
Contrast checks for Indigo against black and white text.
Black text1.62:1AA Fail
White text12.95:1AA Pass
Downloadable color reference infographic
Indigo Color Reference Infographic
Save a high-resolution infographic of Indigo, including its color values, coordinated palette, and black and white text contrast.
Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
Luminance0.0311
Black text1.62:1AA Fail
White text12.95:1AA Pass
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#4B0082",
"rgb": [
75,
0,
130
],
"hsl": [
275,
100,
25
],
"cmyk": [
42,
100,
0,
49
],
"luminance": 0.0311,
"contrast": {
"black": 1.62,
"white": 12.95
}
}WCAG
{
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
}Harmonies
{
"complementary": "#358000",
"analogous": [
"#0B0080",
"#800075"
],
"triadic": [
"#804A00",
"#00804A"
],
"tetradic": [
"#800B00",
"#358000",
"#007580"
],
"splitComplementary": [
"#758000",
"#00800B"
],
"monochromatic": [
"#8000DB",
"#4B0082",
"#150024"
]
}Variants
{
"light": "#8000DB",
"dark": "#150024",
"saturated": "#4A0080",
"desaturated": "#480E71",
"pastel": "#9213EC",
"neon": "#6200A8"
}Pairings
{
"best": [
"#FFFFFF",
"#358000",
"#0B0080",
"#800075"
],
"avoid": [
"#480E71",
"#8000DB"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#8000DB",
"#480E71"
]
}Knowledge graph
{
"nearestColors": [
"purple",
"imperial-purple",
"midnight-blue",
"ultramarine",
"mardi-gras"
],
"generatedPalettes": [
"indigo"
],
"generatedComparisons": [
"indigo-vs-imperial-purple",
"indigo-vs-purple"
],
"relatedFamilies": [
"/colors/by-family/purple",
"/colors/by-temperature/cool",
"/colors/by-tone/jewel-tone"
],
"relatedTools": [
"/harmonies/indigo",
"/wcag/indigo",
"/css/colors/indigo",
"/hex/4b0082",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/purple",
"/colors/by-temperature/cool",
"/colors/by-tone/jewel-tone"
],
"narrower": [
"/palettes/indigo"
],
"related": [
"/colors/purple",
"/colors/imperial-purple",
"/colors/midnight-blue",
"/colors/ultramarine",
"/colors/mardi-gras",
"/compare/indigo-vs-imperial-purple",
"/compare/indigo-vs-purple",
"/harmonies/indigo",
"/wcag/indigo",
"/css/colors/indigo",
"/hex/4b0082",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "indigo",
"name": "Indigo",
"cssName": "indigo",
"hex": "#4B0082",
"family": "purple",
"temperature": "cool",
"tone": [
"jewel-tone"
],
"uses": [
"web design",
"CSS color systems",
"UI prototyping"
],
"psychology": {
"associations": [
"context dependent"
],
"contexts": [
"web interfaces",
"design systems",
"technical color references"
],
"avoidIn": [
"claims that require brand or cultural specificity"
]
},
"aliases": [
"indigo"
],
"sourceType": "standard",
"confidence": "high",
"sourceUrl": "https://www.w3.org/TR/css-color-4/#named-colors",
"origin": {
"type": "css",
"notes": "Standard CSS named color."
},
"reviewStatus": "auto",
"editorialNotes": "Generated from CSS named color data and computed color-system properties.",
"tags": [
"purple",
"cool",
"jewel-tone",
"web-design",
"css-color-systems",
"ui-prototyping",
"context-dependent"
],
"popularity": 67,
"rgb": [
75,
0,
130
],
"hsl": [
275,
100,
25
],
"cmyk": [
42,
100,
0,
49
],
"luminance": 0.0311,
"contrast": {
"black": 1.62,
"white": 12.95
},
"harmonies": {
"complementary": "#358000",
"analogous": [
"#0B0080",
"#800075"
],
"triadic": [
"#804A00",
"#00804A"
],
"tetradic": [
"#800B00",
"#358000",
"#007580"
],
"splitComplementary": [
"#758000",
"#00800B"
],
"monochromatic": [
"#8000DB",
"#4B0082",
"#150024"
]
},
"variants": {
"light": "#8000DB",
"dark": "#150024",
"saturated": "#4A0080",
"desaturated": "#480E71",
"pastel": "#9213EC",
"neon": "#6200A8"
},
"wcag": {
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
},
"css": {
"variable": "--color-indigo: #4B0082;",
"utility": ".bg-indigo { background-color: #4B0082; }",
"textUtility": ".text-indigo { color: #4B0082; }"
},
"nearestColors": [
"purple",
"imperial-purple",
"midnight-blue",
"ultramarine",
"mardi-gras"
],
"generatedPalettes": [
"indigo"
],
"generatedComparisons": [
"indigo-vs-imperial-purple",
"indigo-vs-purple"
],
"relatedFamilies": [
"/colors/by-family/purple",
"/colors/by-temperature/cool",
"/colors/by-tone/jewel-tone"
],
"relatedTools": [
"/harmonies/indigo",
"/wcag/indigo",
"/css/colors/indigo",
"/hex/4b0082",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/purple",
"/colors/by-temperature/cool",
"/colors/by-tone/jewel-tone"
],
"narrower": [
"/palettes/indigo"
],
"related": [
"/colors/purple",
"/colors/imperial-purple",
"/colors/midnight-blue",
"/colors/ultramarine",
"/colors/mardi-gras",
"/compare/indigo-vs-imperial-purple",
"/compare/indigo-vs-purple",
"/harmonies/indigo",
"/wcag/indigo",
"/css/colors/indigo",
"/hex/4b0082",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#FFFFFF",
"#358000",
"#0B0080",
"#800075"
],
"avoid": [
"#480E71",
"#8000DB"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#8000DB",
"#480E71"
]
}
}