Named color · #4D0082
Pigment Indigo
Pigment Indigo is #4D0082: rgb(77 0 130), hsl(276 100% 25%), oklch(0.342 0.18 302.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Pigment Indigo color name →
#4D0082
oklch(0.342 0.18 302.8)
Color conversions
- HEX
- #4d0082
- RGB
- rgb(77 0 130)
- HSL
- hsl(276 100% 25%)
- HWB
- hwb(276 0% 49%)
- OKLCH
- oklch(0.342 0.18 302.8)
- OKLab
- oklab(0.342 0.097 -0.151)
- CIE Lab
- lab(20.06 47.32 -53.69)
- LCH
- lch(20.06 71.57 311.4)
- CMYK
- cmyk(41% 100% 0% 49%)
Tints · Shades · Tones
Tints
- 5C2890
- 6D429D
- 7D5AAA
- 8F71B7
- A088C3
- B39FD0
- C5B7DC
- D8CEE8
- EBE7F3
Shades
- 420070
- 37005F
- 2C004E
- 22003E
- 18002F
- 0F0020
- 070012
- 020006
- 000001
Tones
- 521B83
- 562B84
- 5B3784
- 604384
- 654E84
- 6A5884
- 706284
- 756C83
- 7A7682
Color harmonies
Complementary +180°
- 4D0082
Pigment Indigo
- 313F00
≈ Dark Olive
Analogous -30° +30°
- 4D0082
Pigment Indigo
- 221F93
≈ Celestial Indigo
- 620059
≈ Clear Plum
Triadic +120° +240°
- 4D0082
Pigment Indigo
- 542E00
≈ Kyoto House
- 00423B
≈ Botanical Night
Split-complementary +150° +210°
- 4D0082
Pigment Indigo
- 453700
≈ Night in the Woods
- 004521
≈ Deep Pond
Tetradic +90° +180° +270°
- 4D0082
Pigment Indigo
- 6B1000
≈ Chestnut Brown
- 313F00
≈ Dark Olive
- 00404B
≈ Cold and Dark
Contrast & accessibility
Ag
AAAOn white
WCAG 12.82:1 · APCA Lc 97
Ag
FailOn black
WCAG 1.63:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 12.82:1 (AAA) · APCA Lc 97
Contrast pairs
Code snippets
CSS
:root {
--pigment-indigo: #4d0082;
--pigment-indigo-rgb: 77 0 130;
--pigment-indigo-oklch: oklch(0.342 0.18 302.8);
}
.element {
color: var(--pigment-indigo);
background-color: hsl(276 100% 25%);
border-color: oklch(0.342 0.18 302.8);
}Tailwind CSS v4
@theme {
--color-pigment-indigo: #4d0082;
--color-pigment-indigo-50: #ffe9ff;
--color-pigment-indigo-100: #f5d9ff;
--color-pigment-indigo-200: #e6c1ff;
--color-pigment-indigo-300: #cd9fff;
--color-pigment-indigo-400: #b480f5;
--color-pigment-indigo-500: #9f60e6;
--color-pigment-indigo-600: #8652c2;
--color-pigment-indigo-700: #6c419c;
--color-pigment-indigo-800: #4e2f76;
--color-pigment-indigo-900: #362053;
--color-pigment-indigo-950: #210f38;
}SCSS
$pigment-indigo: #4d0082;
$pigment-indigo-rgb: 77, 0, 130;
$pigment-indigo-light: mix(#fff, $pigment-indigo, 20%);
$pigment-indigo-dark: mix(#000, $pigment-indigo, 20%);
.element {
color: $pigment-indigo;
box-shadow: 0 0 0 2px rgba($pigment-indigo, 0.35);
}