#559CC3#559CC3
#559CC3 is a light, moderate cyan. Relative luminance 0.296; OKLCH L 66.2% C 0.092 H 234.5°. Best body text is #000000 at 6.93:1 contrast (WCAG AA passes).
Color values
| HEX | #559CC3 |
|---|---|
| RGB | rgb(85, 156, 195) |
| HSL | hsl(201, 48%, 55%) |
| HSV | hsv(201, 56%, 76%) |
| CMYK | cmyk(56.4%, 20%, 0%, 23.5%) |
| CIE-LAB | lab(61.35, -10.99, -26.88) |
| CIE-LCH | lch(61.35, 29.04, 247.76°) |
| OKLab | oklab(66.21% -0.0534 -0.075) |
| OKLCH | oklch(66.21% 0.092 234.5) |
| XYZ | xyz(25.4814, 29.6461, 55.9986) |
| Luminance | 0.2965 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Greyblue
#77A1B5
ΔE00 6.28
Azure (survey)
#069AF3
ΔE00 7.57
Dusty Blue
#5A86AD
ΔE00 8.28
Faded Blue
#658CBB
ΔE00 8.46
Dark Sky Blue
#448EE4
ΔE00 8.84
Bluegrey
#85A3B2
ΔE00 8.93
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#559CC3 #C37C55
analogous
#55C3B3 #559CC3 #5565C3
triadic
#559CC3 #C3559C #9CC355
tetradic
#559CC3 #B355C3 #C37C55 #65C355
square
#559CC3 #B355C3 #C37C55 #65C355
split-complementary
#559CC3 #C35565 #C3B355
monochromatic
#295A74 #397DA2 #559CC3 #82B6D3 #AFD1E3
Accessibility & contrast
On white
3.03
#559CC3 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
6.93
#559CC3 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #559CC3
6.93:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##559CC3 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##559CC3 | 1.00 | 3.03 | 6.93 | 6.93 |
| #FFFFFF | 3.03 | 1.00 | 21.00 | 21.00 |
| #000000 | 6.93 | 21.00 | 1.00 | 1.00 |
| ##000000 | 6.93 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#899BC5
Deuteranopia (green-blind)
#7A8FC2
Tritanopia (blue-blind)
#00A6A9
Achromatopsia (no color)
#949494
Design tokens & code
CSS
--color: #559cc3; /* rgb */ color: rgb(85, 156, 195); /* oklch */ color: oklch(66.2% 0.092 234.5);
Tailwind
colors: {
custom: {
50: '#8db9d5',
500: '#559cc3',
950: '#000000',
},
}SCSS
$custom: #559cc3; $custom-light: #8db9d5; $custom-dark: #000000;
JSON
{
"hex": "#559cc3",
"rgb": {
"r": 85,
"g": 156,
"b": 195
},
"hsl": {
"h": 201.273,
"s": 47.826,
"l": 54.902
},
"oklch": {
"l": 0.66208,
"c": 0.09207,
"h": 234.5
},
"luminance": 0.29648
}Semantic roles & 50–950 ramp
primary
#559CC3
secondary
#D1B3A3
accent
#8050D7
background
#F9FBFD
surface
#F1F6FA
border
#CBD0D3
text
#0D1114
muted
#7E8083