#313E8E#313E8E
#313E8E is a dark, vivid blue. Relative luminance 0.061; OKLCH L 40.1% C 0.133 H 272.1°. Best body text is #FFFFFF at 9.50:1 contrast (WCAG AA passes).
Color values
| HEX | #313E8E |
|---|---|
| RGB | rgb(49, 62, 142) |
| HSL | hsl(232, 49%, 37%) |
| HSV | hsv(232, 65%, 56%) |
| CMYK | cmyk(65.5%, 56.3%, 0%, 44.3%) |
| CIE-LAB | lab(29.54, 21.64, -46.10) |
| CIE-LCH | lch(29.54, 50.93, 295.14°) |
| OKLab | oklab(40.09% 0.0048 -0.1324) |
| OKLCH | oklch(40.09% 0.133 272.1) |
| XYZ | xyz(7.8701, 6.0505, 26.3391) |
| Luminance | 0.0605 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Blueberry
#464196
ΔE00 3.78
Darkslateblue
#483D8B
ΔE00 4.69
Sapphire (survey)
#2138AB
ΔE00 5.00
Cobalt (survey)
#1E488F
ΔE00 5.42
Cobalt
#0047AB
ΔE00 6.19
Darkish Blue
#014182
ΔE00 6.63
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#313E8E #8E8131
analogous
#316C8E #313E8E #53318E
triadic
#313E8E #8E313E #3E8E31
tetradic
#313E8E #8E316C #8E8131 #318E53
square
#313E8E #8E316C #8E8131 #318E53
split-complementary
#313E8E #8E5331 #6C8E31
monochromatic
#121633 #212A61 #313E8E #4152BB #6D7ACD
Accessibility & contrast
On white
9.50
#313E8E on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.21
#313E8E on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #313E8E
9.50:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##313E8E | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##313E8E | 1.00 | 9.50 | 2.21 | 9.50 |
| #FFFFFF | 9.50 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.21 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 9.50 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#004A91
Deuteranopia (green-blind)
#00428C
Tritanopia (blue-blind)
#00515F
Achromatopsia (no color)
#464646
Design tokens & code
CSS
--color: #313e8e; /* rgb */ color: rgb(49, 62, 142); /* oklch */ color: oklch(40.1% 0.133 272.1);
Tailwind
colors: {
custom: {
50: '#7473b0',
500: '#313e8e',
950: '#000000',
},
}SCSS
$custom: #313e8e; $custom-light: #7473b0; $custom-dark: #000000;
JSON
{
"hex": "#313e8e",
"rgb": {
"r": 49,
"g": 62,
"b": 142
},
"hsl": {
"h": 231.613,
"s": 48.691,
"l": 37.451
},
"oklch": {
"l": 0.40091,
"c": 0.13253,
"h": 272.1
},
"luminance": 0.06051
}Semantic roles & 50–950 ramp
primary
#313E8E
secondary
#B4A967
accent
#C550D8
background
#F7F6FA
surface
#EDECF5
border
#C8C7CF
text
#090810
muted
#7B7B7F