Indigo Color (#4B0082)

#4B0082rgb(75, 0, 130)

Indigo is a CSS named color defined as hex code #4B0082. Indigo is a very dark, blue-leaning violet. Its blue channel is the strongest, with a smaller red part and no green.

Color Overview & Formats

CSS: indigoLuminance: 0.0311
HEX
#4B0082
RGB
rgb(75, 0, 130)
HSL
hsl(275, 100%, 25%)
Indigo (#4B0082) Color Format Conversions
FormatSyntax / ValuesNotesAction
HEX#4B00826-digit hex web code
RGBrgb(75, 0, 130)Red, Green, Blue channels (0-255)
HSLhsl(275, 100%, 25%)Hue (275°), Saturation (100%), Lightness (25%)
HSV / HSBhsv(275, 100%, 51%)Hue, Saturation (100%), Value/Brightness (51%)
CMYKcmyk(42%, 100%, 0%, 49%)Digital mathematical approximation (non-print)
OKLCHoklch(0.339 0.179 301.7)Perceptually uniform color space (CSS Color 4 approximation)
CSS Implementation & Quick Steps
background-color: #4B0082; /* or indigo */
  1. Select color format: Choose the desired format (HEX #4B0082, RGB, or HSL).
  2. Copy the code: Click the copy button or press Tab+Enter to store in clipboard.
  3. Pair with white text: White text on Indigo reaches 12.95:1 (WCAG AAA).

What Colors Go With Indigo?

These 6 colors all go well with Indigo (#4B0082), and each one is a standard CSS named color. The ratio is the WCAG 2.2 contrast of that color on Indigo: at 4.5:1 or above it works for text; below that, use it for backgrounds and accents.

White

#FFFFFF
12.95:1Text-safe

Maximum contrast: the standard text color on indigo.

Gold

#FFD700
9.23:1Text-safe

A warm, regal accent for headings and icons.

Lavender

#E6E6FA
10.52:1Text-safe

A pale tonal partner for text and highlights.

Pink

#FFC0CB
8.42:1Text-safe

A soft, modern contrast against the deep violet.

Silver

#C0C0C0
7.12:1Text-safe

A cool metallic neutral for secondary text.

Turquoise

#40E0D0
7.89:1Text-safe

A bright, techy complement for buttons and links.

Harmonious Palettes & Tints

The palettes below are algorithmically generated across standard intervals based on Indigo (HSL 275°). Each group offers full palette copy and live preview:

Complementary Harmony

Hue rotated 180 degrees on the HSL wheel (275° to 95°), keeping the original saturation and lightness.

Indigo
#4B0082
Complement (95°)
#378200
Live UI Component Mockup
Component Header SampleWhite text on Indigo: 12.95:1 (WCAG AAA).
Button style preview

Analogous Harmony

Hues 30 degrees either side (245° and 305°), keeping the original saturation and lightness.

Analogous (245°)
#0A0082
Indigo
#4B0082
Analogous (305°)
#820078
Live UI Component Mockup
Component Header SampleWhite text on Indigo: 12.95:1 (WCAG AAA).
Button style preview

Triadic Harmony

Hues spaced evenly by 120 degrees (35° and 155°), keeping the original saturation and lightness.

Indigo
#4B0082
Triadic (35°)
#824B00
Triadic (155°)
#00824B
Live UI Component Mockup
Component Header SampleWhite text on Indigo: 12.95:1 (WCAG AAA).
Button style preview

Tints & Shades

Mixed with white (tints) and black (shades) in sRGB at 60% and 30%.

Tint 60%
#B799CD
Tint 30%
#814DA8
Indigo
#4B0082
Shade 30%
#35005B
Shade 60%
#1E0034
Live UI Component Mockup
Component Header SampleWhite text on Indigo: 12.95:1 (WCAG AAA).
Button style preview

WCAG 2.2 Text Readability & Contrast Check

Under WCAG 2.2 criteria, regular body text requires at least 4.5:1 (AA) and large text requires at least 3.0:1. The table below displays calculated contrast ratios:

Text Contrast Ratios on Indigo (#4B0082)
Foreground ColorContrast RatioNormal Text (AA)Large Text (AA)Normal Text AAA (>= 7.0:1)
Pure Black (#000000)
1.62:1FailFailFail
Pure White (#FFFFFF)
12.95:1PassPassPass
Dark Charcoal (#212529)
1.19:1FailFailFail
Mid Gray (#666666)
2.26:1FailFailFail

Interactive Contrast Tester

Enter text foreground and background colors to verify WCAG legibility:

Calculated Ratio:
12.95:1
Normal: Pass AAALarge: Pass AAA
Large Heading Sample (18pt Bold)

This is sample body text rendered directly to verify contrast and readability.

Indigo Background Download

Download standard 1920x1080 solid desktop wallpaper or generate mobile wallpaper:

Indigo 1920x1080 solid color background wallpaper previewStandard Wallpaper: 1920x1080 PNG (#4B0082)

Download Options

All wallpaper files precisely match the W3C standard color value:

Download 1920x1080 PNG

CSS Standard & Usage Notes

indigo = #4b0082 (rgb(75, 0, 130))
W3C CSS Color 4

UI Design & Accessibility Guidelines

Use it for dark headers, footers, night and tech themes, and backgrounds behind light text. On Indigo, white text passes WCAG AAA at every size (12.95:1); black text fails even for large text (1.62:1).

Published: · Modified: · Editorial: SwatchAtlas Editorial Team

Frequently Asked Questions (FAQ)

Can I use black text on Indigo?

No. Black text on Indigo has a WCAG 2.2 contrast ratio of only 1.62:1, below the 3:1 minimum even for large text.

Can I use white text on Indigo?

Yes. White text on Indigo has a WCAG 2.2 contrast ratio of 12.95:1, passing both AA (4.5:1) and AAA (7:1) at every text size.

What colors go with Indigo?

White, Gold, Lavender, Pink, Silver and Turquoise all go well with Indigo. White (12.95:1), Gold (9.23:1), Lavender (10.52:1), Pink (8.42:1), Silver (7.12:1) and Turquoise (7.89:1) have enough contrast for text on Indigo.

Is indigo purple or blue?

Indigo (#4B0082) has a hue of 275°, between blue (240°) and CSS purple (300°) and slightly closer to purple, so it reads as a very dark violet.