#393996#393996
#393996 is a dark, vivid blue. Relative luminance 0.060; OKLCH L 40.3% C 0.149 H 277.4°. Best body text is #FFFFFF at 9.55:1 contrast (WCAG AA passes).
Color values
| HEX | #393996 |
|---|---|
| RGB | rgb(57, 57, 150) |
| HSL | hsl(240, 45%, 41%) |
| HSV | hsv(240, 62%, 59%) |
| CMYK | cmyk(62%, 62%, 0%, 41.2%) |
| CIE-LAB | lab(29.41, 29.22, -51.20) |
| CIE-LCH | lch(29.41, 58.95, 299.71°) |
| OKLab | oklab(40.33% 0.0192 -0.1473) |
| OKLCH | oklch(40.33% 0.149 277.4) |
| XYZ | xyz(8.6537, 5.9975, 29.5499) |
| Luminance | 0.0600 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Blueberry
#464196
ΔE00 2.90
Darkslateblue
#483D8B
ΔE00 3.67
Sapphire (survey)
#2138AB
ΔE00 3.91
Ocean Blue
#4F42B5
ΔE00 5.88
Blue Blue
#2242C7
ΔE00 7.37
Cobalt
#0047AB
ΔE00 7.78
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#393996 #969639
analogous
#396796 #393996 #673996
triadic
#393996 #963939 #399639
tetradic
#393996 #963967 #969639 #399667
square
#393996 #963967 #969639 #399667
split-complementary
#393996 #966739 #679639
monochromatic
#17173D #28286A #393996 #5050BC #7C7CCD
Accessibility & contrast
On white
9.55
#393996 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.20
#393996 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #393996
9.55:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##393996 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##393996 | 1.00 | 9.55 | 2.20 | 9.55 |
| #FFFFFF | 9.55 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.20 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 9.55 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#004999
Deuteranopia (green-blind)
#004194
Tritanopia (blue-blind)
#005062
Achromatopsia (no color)
#454545
Design tokens & code
CSS
--color: #393996; /* rgb */ color: rgb(57, 57, 150); /* oklch */ color: oklch(40.3% 0.149 277.4);
Tailwind
colors: {
custom: {
50: '#7a6fb6',
500: '#393996',
950: '#000000',
},
}SCSS
$custom: #393996; $custom-light: #7a6fb6; $custom-dark: #000000;
JSON
{
"hex": "#393996",
"rgb": {
"r": 57,
"g": 57,
"b": 150
},
"hsl": {
"h": 240,
"s": 44.928,
"l": 40.588
},
"oklch": {
"l": 0.40332,
"c": 0.14852,
"h": 277.4
},
"luminance": 0.05998
}Semantic roles & 50–950 ramp
primary
#393996
secondary
#B7B774
accent
#D553D5
background
#F7F6FB
surface
#EEECF6
border
#C9C7D0
text
#0A0711
muted
#7C7A80