#587AB9#587AB9
#587AB9 is a mid, moderate blue. Relative luminance 0.195; OKLCH L 58.2% C 0.105 H 262.0°. Best body text is #000000 at 4.90:1 contrast (WCAG AA passes).
Color values
| HEX | #587AB9 |
|---|---|
| RGB | rgb(88, 122, 185) |
| HSL | hsl(219, 41%, 54%) |
| HSV | hsv(219, 52%, 73%) |
| CMYK | cmyk(52.4%, 34.1%, 0%, 27.5%) |
| CIE-LAB | lab(51.26, 6.17, -36.89) |
| CIE-LCH | lch(51.26, 37.40, 279.50°) |
| OKLab | oklab(58.17% -0.0146 -0.104) |
| OKLCH | oklch(58.17% 0.105 262) |
| XYZ | xyz(19.7380, 19.4951, 48.6124) |
| Luminance | 0.1950 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Cornflower Blue
#5170D7
ΔE00 4.93
Windows Blue
#3778BF
ΔE00 5.09
Off Blue
#5684AE
ΔE00 5.36
Dusty Blue
#5A86AD
ΔE00 5.93
Dull Blue
#49759C
ΔE00 5.95
French Blue
#436BAD
ΔE00 6.01
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#587AB9 #B99758
analogous
#58AAB9 #587AB9 #6658B9
triadic
#587AB9 #B9587A #7AB958
tetradic
#587AB9 #B958AA #B99758 #58B966
square
#587AB9 #B958AA #B99758 #58B966
split-complementary
#587AB9 #B96658 #AAB958
monochromatic
#2C426A #3F5D95 #587AB9 #839CCB #AEBFDD
Accessibility & contrast
On white
4.29
#587AB9 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
4.90
#587AB9 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #587AB9
4.90:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##587AB9 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##587AB9 | 1.00 | 4.29 | 4.90 | 4.90 |
| #FFFFFF | 4.29 | 1.00 | 21.00 | 21.00 |
| #000000 | 4.90 | 21.00 | 1.00 | 1.00 |
| ##000000 | 4.90 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#617FBC
Deuteranopia (green-blind)
#5676B8
Tritanopia (blue-blind)
#288891
Achromatopsia (no color)
#7A7A7A
Design tokens & code
CSS
--color: #587ab9; /* rgb */ color: rgb(88, 122, 185); /* oklch */ color: oklch(58.2% 0.105 262.0);
Tailwind
colors: {
custom: {
50: '#8da0ce',
500: '#587ab9',
950: '#000000',
},
}SCSS
$custom: #587ab9; $custom-light: #8da0ce; $custom-dark: #000000;
JSON
{
"hex": "#587ab9",
"rgb": {
"r": 88,
"g": 122,
"b": 185
},
"hsl": {
"h": 218.969,
"s": 40.928,
"l": 53.529
},
"oklch": {
"l": 0.58171,
"c": 0.105,
"h": 262
},
"luminance": 0.19497
}Semantic roles & 50–950 ramp
primary
#587AB9
secondary
#CBBDA2
accent
#A657D1
background
#F9F9FC
surface
#F1F2F9
border
#CBCCD2
text
#0D0E13
muted
#7E7E82