Named color · #4B0082
Indigo
Indigo is #4B0082: rgb(75 0 130), hsl(275 100% 25%), oklch(0.339 0.179 301.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Indigo color name →
#4B0082
oklch(0.339 0.179 301.7)
Color conversions
- HEX
- #4b0082
- RGB
- rgb(75 0 130)
- HSL
- hsl(275 100% 25%)
- HWB
- hwb(275 0% 49%)
- OKLCH
- oklch(0.339 0.179 301.7)
- OKLab
- oklab(0.339 0.094 -0.153)
- CIE Lab
- lab(19.72 47.03 -54.28)
- LCH
- lch(19.72 71.82 310.9)
- CMYK
- cmyk(42% 100% 0% 49%)
Tints · Shades · Tones
Tints
- 5A2890
- 6B429D
- 7C5AAA
- 8D71B7
- 9F88C3
- B19FD0
- C4B7DC
- D7CEE8
- EBE7F4
Shades
- 400070
- 35005F
- 2B004E
- 21003E
- 17002F
- 0E0020
- 060012
- 020006
- 000001
Tones
- 501B83
- 542B84
- 593784
- 5F4385
- 644E85
- 695884
- 6F6284
- 746C83
- 7A7682
Color harmonies
Complementary +180°
- 4B0082
Indigo
- 313E00
≈ Dark Olive
Analogous -30° +30°
- 4B0082
Indigo
- 1F1F92
≈ Celestial Indigo
- 60005A
≈ Clear Plum
Triadic +120° +240°
- 4B0082
Indigo
- 542D00
≈ Kyoto House
- 00423A
≈ Botanical Night
Split-complementary +150° +210°
- 4B0082
Indigo
- 453600
≈ Night in the Woods
- 00441E
≈ Deep Pond
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 12.95:1 · APCA Lc 97
Ag
FailOn black
WCAG 1.62:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 12.95:1 (AAA) · APCA Lc 97
Contrast pairs
Code snippets
CSS
:root {
--indigo: #4b0082;
--indigo-rgb: 75 0 130;
--indigo-oklch: oklch(0.339 0.179 301.7);
}
.element {
color: var(--indigo);
background-color: hsl(275 100% 25%);
border-color: oklch(0.339 0.179 301.7);
}Tailwind CSS v4
@theme {
--color-indigo: #4b0082;
--color-indigo-50: #ffe9ff;
--color-indigo-100: #f4daff;
--color-indigo-200: #e4c1ff;
--color-indigo-300: #cb9fff;
--color-indigo-400: #b281f6;
--color-indigo-500: #9d61e7;
--color-indigo-600: #8553c3;
--color-indigo-700: #6a429d;
--color-indigo-800: #4d3076;
--color-indigo-900: #352153;
--color-indigo-950: #210f38;
}SCSS
$indigo: #4b0082;
$indigo-rgb: 75, 0, 130;
$indigo-light: mix(#fff, $indigo, 20%);
$indigo-dark: mix(#000, $indigo, 20%);
.element {
color: $indigo;
box-shadow: 0 0 0 2px rgba($indigo, 0.35);
}