#586B89#586B89
#586B89 is a mid, muted blue. Relative luminance 0.144; OKLCH L 52.4% C 0.053 H 259.4°. Best body text is #FFFFFF at 5.41:1 contrast (WCAG AA passes).
Color values
| HEX | #586B89 |
|---|---|
| RGB | rgb(88, 107, 137) |
| HSL | hsl(217, 22%, 44%) |
| HSV | hsv(217, 36%, 54%) |
| CMYK | cmyk(35.8%, 21.9%, 0%, 46.3%) |
| CIE-LAB | lab(44.80, 0.72, -18.80) |
| CIE-LCH | lch(44.80, 18.82, 272.20°) |
| OKLab | oklab(52.42% -0.0097 -0.052) |
| OKLCH | oklch(52.42% 0.053 259.4) |
| XYZ | xyz(13.7962, 14.3956, 25.7138) |
| Luminance | 0.1440 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Cadet Blue
#4E7496
ΔE00 5.86
Dusky Blue
#475F94
ΔE00 6.24
Denim (survey)
#3B638C
ΔE00 6.32
Metallic Blue
#4F738E
ΔE00 6.46
Dull Blue
#49759C
ΔE00 6.84
French Blue
#436BAD
ΔE00 7.12
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#586B89 #897658
analogous
#588489 #586B89 #5E5889
triadic
#586B89 #89586B #6B8958
tetradic
#586B89 #895884 #897658 #58895E
square
#586B89 #895884 #897658 #58895E
split-complementary
#586B89 #895E58 #848958
monochromatic
#28313E #404E64 #586B89 #778AA7 #9CAABF
Accessibility & contrast
On white
5.41
#586B89 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.88
#586B89 on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #586B89
5.41:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##586B89 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##586B89 | 1.00 | 5.41 | 3.88 | 5.41 |
| #FFFFFF | 5.41 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.88 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.41 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#616D8A
Deuteranopia (green-blind)
#5B6888
Tritanopia (blue-blind)
#497175
Achromatopsia (no color)
#6A6A6A
Design tokens & code
CSS
--color: #586b89; /* rgb */ color: rgb(88, 107, 137); /* oklch */ color: oklch(52.4% 0.053 259.4);
Tailwind
colors: {
custom: {
50: '#8995ab',
500: '#586b89',
950: '#000000',
},
}SCSS
$custom: #586b89; $custom-light: #8995ab; $custom-dark: #000000;
JSON
{
"hex": "#586b89",
"rgb": {
"r": 88,
"g": 107,
"b": 137
},
"hsl": {
"h": 216.735,
"s": 21.778,
"l": 44.118
},
"oklch": {
"l": 0.52417,
"c": 0.05286,
"h": 259.4
},
"luminance": 0.14396
}Semantic roles & 50–950 ramp
primary
#586B89
secondary
#ADA290
accent
#9D69BE
background
#F8F9FA
surface
#F0F1F4
border
#CBCBCE
text
#0B0D10
muted
#7C7E7F