#361D7E#361D7E
#361D7E is a dark, vivid violet. Relative luminance 0.032; OKLCH L 33.3% C 0.152 H 286.7°. Best body text is #FFFFFF at 12.85:1 contrast (WCAG AA passes).
Color values
| HEX | #361D7E |
|---|---|
| RGB | rgb(54, 29, 126) |
| HSL | hsl(255, 63%, 30%) |
| HSV | hsv(255, 77%, 49%) |
| CMYK | cmyk(57.1%, 77%, 0%, 50.6%) |
| CIE-LAB | lab(20.71, 37.78, -50.48) |
| CIE-LCH | lch(20.71, 63.05, 306.81°) |
| OKLab | oklab(33.33% 0.0437 -0.1453) |
| OKLCH | oklch(33.33% 0.152 286.7) |
| XYZ | xyz(5.7255, 3.1690, 20.0446) |
| Luminance | 0.0317 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Indigo (survey)
#380282
ΔE00 4.23
Midnight Blue
#191970
ΔE00 4.39
Royal
#0C1793
ΔE00 5.17
Indigo
#4B0082
ΔE00 5.40
Darkblue
#00008B
ΔE00 6.58
Navy
#000080
ΔE00 6.66
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#361D7E #657E1D
analogous
#1D347E #361D7E #661D7E
triadic
#361D7E #7E361D #1D7E36
tetradic
#361D7E #7E1D34 #657E1D #1D7E66
square
#361D7E #7E1D34 #657E1D #1D7E66
split-complementary
#361D7E #7E661D #347E1D
monochromatic
#0B061B #21124C #361D7E #4B28B0 #6742D3
Accessibility & contrast
On white
12.85
#361D7E on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.63
#361D7E on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #361D7E
12.85:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##361D7E | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##361D7E | 1.00 | 12.85 | 1.63 | 12.85 |
| #FFFFFF | 12.85 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.63 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 12.85 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#003481
Deuteranopia (green-blind)
#002F7C
Tritanopia (blue-blind)
#16384C
Achromatopsia (no color)
#323232
Design tokens & code
CSS
--color: #361d7e; /* rgb */ color: rgb(54, 29, 126); /* oklch */ color: oklch(33.3% 0.152 286.7);
Tailwind
colors: {
custom: {
50: '#765ca4',
500: '#361d7e',
950: '#000000',
},
}SCSS
$custom: #361d7e; $custom-light: #765ca4; $custom-dark: #000000;
JSON
{
"hex": "#361d7e",
"rgb": {
"r": 54,
"g": 29,
"b": 126
},
"hsl": {
"h": 255.464,
"s": 62.581,
"l": 30.392
},
"oklch": {
"l": 0.33326,
"c": 0.1517,
"h": 286.7
},
"luminance": 0.03169
}Semantic roles & 50–950 ramp
primary
#361D7E
secondary
#96B145
accent
#E642BC
background
#F7F5FA
surface
#EEE9F4
border
#C9C5CE
text
#09040F
muted
#7B797F