#216770#216770
#216770 is a mid, moderate teal. Relative luminance 0.112; OKLCH L 47.5% C 0.069 H 207.3°. Best body text is #FFFFFF at 6.48:1 contrast (WCAG AA passes).
Color values
| HEX | #216770 |
|---|---|
| RGB | rgb(33, 103, 112) |
| HSL | hsl(187, 54%, 28%) |
| HSV | hsv(187, 71%, 44%) |
| CMYK | cmyk(70.5%, 8%, 0%, 56.1%) |
| CIE-LAB | lab(39.90, -18.24, -11.40) |
| CIE-LCH | lch(39.90, 21.51, 212.01°) |
| OKLab | oklab(47.49% -0.0614 -0.0316) |
| OKLCH | oklch(47.49% 0.069 207.3) |
| XYZ | xyz(8.4008, 11.1927, 17.0438) |
| Luminance | 0.1119 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Petrol
#005F6A
ΔE00 3.19
Dark Aqua
#05696B
ΔE00 4.42
Deep Turquoise
#017374
ΔE00 6.39
Deep Aqua
#08787F
ΔE00 6.43
Deep Teal
#00555A
ΔE00 6.63
Dark Turquoise
#045C5A
ΔE00 7.07
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#216770 #702A21
analogous
#217051 #216770 #213F70
triadic
#216770 #702167 #677021
tetradic
#216770 #512170 #702A21 #3F7021
square
#216770 #512170 #702A21 #3F7021
split-complementary
#216770 #70213F #705121
monochromatic
#071618 #133C41 #216770 #2F929F #44B9C8
Accessibility & contrast
On white
6.48
#216770 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.24
#216770 on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #216770
6.48:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##216770 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##216770 | 1.00 | 6.48 | 3.24 | 6.48 |
| #FFFFFF | 6.48 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.24 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.48 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#5E6371
Deuteranopia (green-blind)
#525A70
Tritanopia (blue-blind)
#006C6A
Achromatopsia (no color)
#5E5E5E
Design tokens & code
CSS
--color: #216770; /* rgb */ color: rgb(33, 103, 112); /* oklch */ color: oklch(47.5% 0.069 207.3);
Tailwind
colors: {
custom: {
50: '#689299',
500: '#216770',
950: '#000000',
},
}SCSS
$custom: #216770; $custom-light: #689299; $custom-dark: #000000;
JSON
{
"hex": "#216770",
"rgb": {
"r": 33,
"g": 103,
"b": 112
},
"hsl": {
"h": 186.835,
"s": 54.483,
"l": 28.431
},
"oklch": {
"l": 0.47488,
"c": 0.06911,
"h": 207.3
},
"luminance": 0.11194
}Semantic roles & 50–950 ramp
primary
#216770
secondary
#A45449
accent
#5B4ADE
background
#F6F9F9
surface
#EBF1F2
border
#C6CBCC
text
#070D0D
muted
#7A7E7E