#37736F#37736F
#37736F is a mid, moderate teal. Relative luminance 0.142; OKLCH L 51.4% C 0.063 H 189.6°. Best body text is #FFFFFF at 5.46:1 contrast (WCAG AA passes).
Color values
| HEX | #37736F |
|---|---|
| RGB | rgb(55, 115, 111) |
| HSL | hsl(176, 35%, 33%) |
| HSV | hsv(176, 52%, 45%) |
| CMYK | cmyk(52.2%, 0%, 3.5%, 54.9%) |
| CIE-LAB | lab(44.55, -20.50, -3.77) |
| CIE-LCH | lch(44.55, 20.85, 190.42°) |
| OKLab | oklab(51.43% -0.0619 -0.0105) |
| OKLCH | oklch(51.43% 0.063 189.6) |
| XYZ | xyz(10.5743, 14.2205, 17.2234) |
| Luminance | 0.1422 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Dark Aquamarine
#017371
ΔE00 3.94
Deep Turquoise
#017374
ΔE00 4.12
Bluegreen
#017A79
ΔE00 4.58
Dark Aqua
#05696B
ΔE00 5.44
Deep Aqua
#08787F
ΔE00 5.57
Teal
#008080
ΔE00 6.02
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#37736F #73373B
analogous
#377351 #37736F #375973
triadic
#37736F #6F3773 #736F37
tetradic
#37736F #513773 #73373B #597337
square
#37736F #513773 #73373B #597337
split-complementary
#37736F #733759 #735137
monochromatic
#0F201F #234A47 #37736F #4B9C97 #6CB9B3
Accessibility & contrast
On white
5.46
#37736F on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.84
#37736F on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #37736F
5.46:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##37736F | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##37736F | 1.00 | 5.46 | 3.84 | 5.46 |
| #FFFFFF | 5.46 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.84 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.46 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#6D6E6F
Deuteranopia (green-blind)
#636670
Tritanopia (blue-blind)
#137672
Achromatopsia (no color)
#696969
Design tokens & code
CSS
--color: #37736f; /* rgb */ color: rgb(55, 115, 111); /* oklch */ color: oklch(51.4% 0.063 189.6);
Tailwind
colors: {
custom: {
50: '#739b98',
500: '#37736f',
950: '#000000',
},
}SCSS
$custom: #37736f; $custom-light: #739b98; $custom-dark: #000000;
JSON
{
"hex": "#37736f",
"rgb": {
"r": 55,
"g": 115,
"b": 111
},
"hsl": {
"h": 176,
"s": 35.294,
"l": 33.333
},
"oklch": {
"l": 0.51434,
"c": 0.06282,
"h": 189.6
},
"luminance": 0.14221
}Semantic roles & 50–950 ramp
primary
#37736F
secondary
#A26468
accent
#5C64CB
background
#F7F9F9
surface
#EDF2F2
border
#C8CCCC
text
#080E0D
muted
#7B7E7E