#376E73#376E73
#376E73 is a mid, muted teal. Relative luminance 0.132; OKLCH L 50.3% C 0.059 H 203.3°. Best body text is #FFFFFF at 5.77:1 contrast (WCAG AA passes).
Color values
| HEX | #376E73 |
|---|---|
| RGB | rgb(55, 110, 115) |
| HSL | hsl(185, 35%, 33%) |
| HSV | hsv(185, 52%, 45%) |
| CMYK | cmyk(52.2%, 4.3%, 0%, 54.9%) |
| CIE-LAB | lab(43.06, -16.64, -8.38) |
| CIE-LCH | lch(43.06, 18.63, 206.75°) |
| OKLab | oklab(50.28% -0.0538 -0.0231) |
| OKLCH | oklch(50.28% 0.059 203.3) |
| XYZ | xyz(10.2448, 13.2010, 18.2245) |
| Luminance | 0.1320 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Dark Aqua
#05696B
ΔE00 5.27
Deep Aqua
#08787F
ΔE00 5.27
Deep Turquoise
#017374
ΔE00 5.61
Dark Aquamarine
#017371
ΔE00 6.44
Petrol
#005F6A
ΔE00 6.61
Bluegreen
#017A79
ΔE00 7.16
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#376E73 #733C37
analogous
#37735A #376E73 #375073
triadic
#376E73 #73376E #6E7337
tetradic
#376E73 #5A3773 #733C37 #507337
square
#376E73 #5A3773 #733C37 #507337
split-complementary
#376E73 #733750 #735A37
monochromatic
#0F1F20 #23464A #376E73 #4B969C #6CB2B9
Accessibility & contrast
On white
5.77
#376E73 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.64
#376E73 on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #376E73
5.77:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##376E73 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##376E73 | 1.00 | 5.77 | 3.64 | 5.77 |
| #FFFFFF | 5.77 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.64 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.77 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#676A73
Deuteranopia (green-blind)
#5D6373
Tritanopia (blue-blind)
#10726F
Achromatopsia (no color)
#666666
Design tokens & code
CSS
--color: #376e73; /* rgb */ color: rgb(55, 110, 115); /* oklch */ color: oklch(50.3% 0.059 203.3);
Tailwind
colors: {
custom: {
50: '#73979b',
500: '#376e73',
950: '#000000',
},
}SCSS
$custom: #376e73; $custom-light: #73979b; $custom-dark: #000000;
JSON
{
"hex": "#376e73",
"rgb": {
"r": 55,
"g": 110,
"b": 115
},
"hsl": {
"h": 185,
"s": 35.294,
"l": 33.333
},
"oklch": {
"l": 0.50284,
"c": 0.05859,
"h": 203.3
},
"luminance": 0.13202
}Semantic roles & 50–950 ramp
primary
#376E73
secondary
#A26964
accent
#665CCB
background
#F7F9F9
surface
#EDF2F2
border
#C8CCCC
text
#080D0E
muted
#7B7E7E