#5F82BD#5F82BD
#5F82BD is a mid, moderate blue. Relative luminance 0.221; OKLCH L 60.6% C 0.099 H 260.5°. Best body text is #000000 at 5.41:1 contrast (WCAG AA passes).
Color values
| HEX | #5F82BD |
|---|---|
| RGB | rgb(95, 130, 189) |
| HSL | hsl(218, 42%, 56%) |
| HSV | hsv(218, 50%, 74%) |
| CMYK | cmyk(49.7%, 31.2%, 0%, 25.9%) |
| CIE-LAB | lab(54.10, 4.29, -34.70) |
| CIE-LCH | lch(54.10, 34.97, 277.05°) |
| OKLab | oklab(60.55% -0.0164 -0.0975) |
| OKLCH | oklch(60.55% 0.099 260.5) |
| XYZ | xyz(21.8842, 22.0708, 51.2411) |
| Luminance | 0.2207 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Faded Blue
#658CBB
ΔE00 3.69
Off Blue
#5684AE
ΔE00 4.32
Dusty Blue
#5A86AD
ΔE00 4.59
Cool Blue
#4984B8
ΔE00 5.26
Soft Blue
#6488EA
ΔE00 5.53
Steel Blue
#4682B4
ΔE00 5.76
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#5F82BD #BD9A5F
analogous
#5FB1BD #5F82BD #6B5FBD
triadic
#5F82BD #BD5F82 #82BD5F
tetradic
#5F82BD #BD5FB1 #BD9A5F #5FBD6B
square
#5F82BD #BD5FB1 #BD9A5F #5FBD6B
split-complementary
#5F82BD #BD6B5F #B1BD5F
monochromatic
#2F4872 #41649E #5F82BD #8AA4CF #B6C6E1
Accessibility & contrast
On white
3.88
#5F82BD on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.41
#5F82BD on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #5F82BD
5.41:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##5F82BD | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##5F82BD | 1.00 | 3.88 | 5.41 | 5.41 |
| #FFFFFF | 3.88 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.41 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.41 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#6B86C0
Deuteranopia (green-blind)
#607DBC
Tritanopia (blue-blind)
#358F97
Achromatopsia (no color)
#818181
Design tokens & code
CSS
--color: #5f82bd; /* rgb */ color: rgb(95, 130, 189); /* oklch */ color: oklch(60.6% 0.099 260.5);
Tailwind
colors: {
custom: {
50: '#92a6d1',
500: '#5f82bd',
950: '#000000',
},
}SCSS
$custom: #5f82bd; $custom-light: #92a6d1; $custom-dark: #000000;
JSON
{
"hex": "#5f82bd",
"rgb": {
"r": 95,
"g": 130,
"b": 189
},
"hsl": {
"h": 217.66,
"s": 41.593,
"l": 55.686
},
"oklch": {
"l": 0.6055,
"c": 0.09884,
"h": 260.5
},
"luminance": 0.22072
}Semantic roles & 50–950 ramp
primary
#5F82BD
secondary
#CFC1A8
accent
#A456D1
background
#F9FAFC
surface
#F2F4F9
border
#CCCED2
text
#0D0F14
muted
#7E7F82