#5DA4BC#5DA4BC
#5DA4BC is a light, moderate cyan. Relative luminance 0.325; OKLCH L 68.1% C 0.080 H 222.0°. Best body text is #000000 at 7.50:1 contrast (WCAG AA passes).
Color values
| HEX | #5DA4BC |
|---|---|
| RGB | rgb(93, 164, 188) |
| HSL | hsl(195, 41%, 55%) |
| HSV | hsv(195, 51%, 74%) |
| CMYK | cmyk(50.5%, 12.8%, 0%, 26.3%) |
| CIE-LAB | lab(63.76, -15.66, -19.24) |
| CIE-LCH | lch(63.76, 24.81, 230.85°) |
| OKLab | oklab(68.13% -0.0591 -0.0532) |
| OKLCH | oklch(68.13% 0.08 222) |
| XYZ | xyz(26.8633, 32.5067, 52.4260) |
| Luminance | 0.3251 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Greyblue
#77A1B5
ΔE00 4.72
Bluegrey
#85A3B2
ΔE00 7.45
Turquoise Blue
#06B1C4
ΔE00 7.78
Cadetblue
#5F9EA0
ΔE00 8.82
Bluey Grey
#89A0B0
ΔE00 9.45
Bluish Grey
#748B97
ΔE00 11.14
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#5DA4BC #BC755D
analogous
#5DBCA5 #5DA4BC #5D74BC
triadic
#5DA4BC #BC5DA4 #A4BC5D
tetradic
#5DA4BC #A55DBC #BC755D #74BC5D
square
#5DA4BC #A55DBC #BC755D #74BC5D
split-complementary
#5DA4BC #BC5D74 #BCA55D
monochromatic
#2E6070 #40849B #5DA4BC #88BCCE #B4D5E0
Accessibility & contrast
On white
2.80
#5DA4BC on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.50
#5DA4BC on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #5DA4BC
7.50:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##5DA4BC | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##5DA4BC | 1.00 | 2.80 | 7.50 | 7.50 |
| #FFFFFF | 2.80 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.50 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.50 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#96A1BD
Deuteranopia (green-blind)
#8896BC
Tritanopia (blue-blind)
#26ACAC
Achromatopsia (no color)
#9A9A9A
Design tokens & code
CSS
--color: #5da4bc; /* rgb */ color: rgb(93, 164, 188); /* oklch */ color: oklch(68.1% 0.080 222.0);
Tailwind
colors: {
custom: {
50: '#91bfd0',
500: '#5da4bc',
950: '#000000',
},
}SCSS
$custom: #5da4bc; $custom-light: #91bfd0; $custom-dark: #000000;
JSON
{
"hex": "#5da4bc",
"rgb": {
"r": 93,
"g": 164,
"b": 188
},
"hsl": {
"h": 195.158,
"s": 41.485,
"l": 55.098
},
"oklch": {
"l": 0.68133,
"c": 0.07957,
"h": 222
},
"luminance": 0.32509
}Semantic roles & 50–950 ramp
primary
#5DA4BC
secondary
#CEB1A6
accent
#7656D1
background
#F9FBFC
surface
#F2F7F9
border
#CCD0D2
text
#0D1214
muted
#7E8182