#254BA3#254BA3
#254BA3 is a dark, vivid blue. Relative luminance 0.081; OKLCH L 43.9% C 0.149 H 263.7°. Best body text is #FFFFFF at 8.03:1 contrast (WCAG AA passes).
Color values
| HEX | #254BA3 |
|---|---|
| RGB | rgb(37, 75, 163) |
| HSL | hsl(222, 63%, 39%) |
| HSV | hsv(222, 77%, 64%) |
| CMYK | cmyk(77.3%, 54%, 0%, 36.1%) |
| CIE-LAB | lab(34.13, 19.10, -51.46) |
| CIE-LCH | lch(34.13, 54.89, 290.36°) |
| OKLab | oklab(43.89% -0.0162 -0.1483) |
| OKLCH | oklch(43.89% 0.149 263.7) |
| XYZ | xyz(9.8875, 8.0687, 35.6795) |
| Luminance | 0.0807 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Cobalt
#0047AB
ΔE00 2.11
Cobalt (survey)
#1E488F
ΔE00 3.08
Sapphire
#0F52BA
ΔE00 3.73
Dusk Blue
#26538D
ΔE00 4.72
Denim Blue
#3B5B92
ΔE00 5.91
Darkish Blue
#014182
ΔE00 5.97
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#254BA3 #A37D25
analogous
#258AA3 #254BA3 #3E25A3
triadic
#254BA3 #A3254B #4BA325
tetradic
#254BA3 #A3258A #A37D25 #25A33E
square
#254BA3 #A3258A #A37D25 #25A33E
split-complementary
#254BA3 #A33E25 #8AA325
monochromatic
#0E1D3F #1A3471 #254BA3 #3464D1 #668ADC
Accessibility & contrast
On white
8.03
#254BA3 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.61
#254BA3 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #254BA3
8.03:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##254BA3 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##254BA3 | 1.00 | 8.03 | 2.61 | 8.03 |
| #FFFFFF | 8.03 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.61 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 8.03 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#0656A6
Deuteranopia (green-blind)
#004BA1
Tritanopia (blue-blind)
#00606F
Achromatopsia (no color)
#505050
Design tokens & code
CSS
--color: #254ba3; /* rgb */ color: rgb(37, 75, 163); /* oklch */ color: oklch(43.9% 0.149 263.7);
Tailwind
colors: {
custom: {
50: '#737cbf',
500: '#254ba3',
950: '#000000',
},
}SCSS
$custom: #254ba3; $custom-light: #737cbf; $custom-dark: #000000;
JSON
{
"hex": "#254ba3",
"rgb": {
"r": 37,
"g": 75,
"b": 163
},
"hsl": {
"h": 221.905,
"s": 63,
"l": 39.216
},
"oklch": {
"l": 0.43886,
"c": 0.14915,
"h": 263.7
},
"luminance": 0.0807
}Semantic roles & 50–950 ramp
primary
#254BA3
secondary
#C2A562
accent
#B442E6
background
#F7F7FB
surface
#EEEEF7
border
#C9C9D0
text
#090912
muted
#7B7B81