#22859E#22859E
#22859E is a mid, moderate cyan. Relative luminance 0.196; OKLCH L 57.3% C 0.094 H 219.2°. Best body text is #000000 at 4.92:1 contrast (WCAG AA passes).
Color values
| HEX | #22859E |
|---|---|
| RGB | rgb(34, 133, 158) |
| HSL | hsl(192, 65%, 38%) |
| HSV | hsv(192, 78%, 62%) |
| CMYK | cmyk(78.5%, 15.8%, 0%, 38%) |
| CIE-LAB | lab(51.36, -18.86, -21.28) |
| CIE-LCH | lch(51.36, 28.43, 228.45°) |
| OKLab | oklab(57.31% -0.073 -0.0595) |
| OKLCH | oklch(57.31% 0.094 219.2) |
| XYZ | xyz(15.2162, 19.5819, 35.3189) |
| Luminance | 0.1958 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Teal Blue
#01889F
ΔE00 2.06
Dirty Blue
#3F829D
ΔE00 3.58
Ocean
#017B92
ΔE00 4.15
Sea Blue
#047495
ΔE00 7.03
Cerulean
#007BA7
ΔE00 7.28
Deep Aqua
#08787F
ΔE00 9.19
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#22859E #9E3B22
analogous
#229E79 #22859E #22479E
triadic
#22859E #9E2285 #859E22
tetradic
#22859E #79229E #9E3B22 #479E22
square
#22859E #79229E #9E3B22 #479E22
split-complementary
#22859E #9E2247 #9E7922
monochromatic
#0C3039 #175B6C #22859E #2DAFD0 #5EC3DC
Accessibility & contrast
On white
4.27
#22859E on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
4.92
#22859E on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #22859E
4.92:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##22859E | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##22859E | 1.00 | 4.27 | 4.92 | 4.92 |
| #FFFFFF | 4.27 | 1.00 | 21.00 | 21.00 |
| #000000 | 4.92 | 21.00 | 1.00 | 1.00 |
| ##000000 | 4.92 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#75819F
Deuteranopia (green-blind)
#65759E
Tritanopia (blue-blind)
#008D8D
Achromatopsia (no color)
#7A7A7A
Design tokens & code
CSS
--color: #22859e; /* rgb */ color: rgb(34, 133, 158); /* oklch */ color: oklch(57.3% 0.094 219.2);
Tailwind
colors: {
custom: {
50: '#72a8ba',
500: '#22859e',
950: '#000000',
},
}SCSS
$custom: #22859e; $custom-light: #72a8ba; $custom-dark: #000000;
JSON
{
"hex": "#22859e",
"rgb": {
"r": 34,
"g": 133,
"b": 158
},
"hsl": {
"h": 192.097,
"s": 64.583,
"l": 37.647
},
"oklch": {
"l": 0.57307,
"c": 0.09417,
"h": 219.2
},
"luminance": 0.19584
}Semantic roles & 50–950 ramp
primary
#22859E
secondary
#C16F5B
accent
#6240E8
background
#F7FAFB
surface
#EDF4F6
border
#C8CED0
text
#090F11
muted
#7B7F80