#1F3383#1F3383
#1F3383 is a dark, vivid blue. Relative luminance 0.043; OKLCH L 35.9% C 0.137 H 268.0°. Best body text is #FFFFFF at 11.29:1 contrast (WCAG AA passes).
Color values
| HEX | #1F3383 |
|---|---|
| RGB | rgb(31, 51, 131) |
| HSL | hsl(228, 62%, 32%) |
| HSV | hsv(228, 76%, 51%) |
| CMYK | cmyk(76.3%, 61.1%, 0%, 48.6%) |
| CIE-LAB | lab(24.63, 22.22, -47.29) |
| CIE-LCH | lch(24.63, 52.25, 295.17°) |
| OKLab | oklab(35.87% -0.0048 -0.1365) |
| OKLCH | oklch(35.87% 0.137 268) |
| XYZ | xyz(5.8442, 4.2970, 21.9897) |
| Luminance | 0.0430 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Sapphire (survey)
#2138AB
ΔE00 5.98
Marine
#042E60
ΔE00 6.49
Darkslateblue
#483D8B
ΔE00 6.71
Blueberry
#464196
ΔE00 6.73
Marine Blue
#01386A
ΔE00 6.84
Darkish Blue
#014182
ΔE00 6.85
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#1F3383 #836F1F
analogous
#1F6583 #1F3383 #3D1F83
triadic
#1F3383 #831F33 #33831F
tetradic
#1F3383 #831F65 #836F1F #1F833D
square
#1F3383 #831F65 #836F1F #1F833D
split-complementary
#1F3383 #833D1F #65831F
monochromatic
#080C20 #132052 #1F3383 #2B46B4 #4964D4
Accessibility & contrast
On white
11.29
#1F3383 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.86
#1F3383 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #1F3383
11.29:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##1F3383 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##1F3383 | 1.00 | 11.29 | 1.86 | 11.29 |
| #FFFFFF | 11.29 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.86 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 11.29 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#003F86
Deuteranopia (green-blind)
#003681
Tritanopia (blue-blind)
#004755
Achromatopsia (no color)
#3A3A3A
Design tokens & code
CSS
--color: #1f3383; /* rgb */ color: rgb(31, 51, 131); /* oklch */ color: oklch(35.9% 0.137 268.0);
Tailwind
colors: {
custom: {
50: '#6a6aa8',
500: '#1f3383',
950: '#000000',
},
}SCSS
$custom: #1f3383; $custom-light: #6a6aa8; $custom-dark: #000000;
JSON
{
"hex": "#1f3383",
"rgb": {
"r": 31,
"g": 51,
"b": 131
},
"hsl": {
"h": 228,
"s": 61.728,
"l": 31.765
},
"oklch": {
"l": 0.35872,
"c": 0.13659,
"h": 268
},
"luminance": 0.04298
}Semantic roles & 50–950 ramp
primary
#1F3383
secondary
#B6A048
accent
#C443E5
background
#F6F6FA
surface
#ECEBF4
border
#C7C6CE
text
#070610
muted
#7A7A7F