#318E75#318E75
#318E75 is a mid, moderate teal. Relative luminance 0.213; OKLCH L 58.5% C 0.095 H 171.8°. Best body text is #000000 at 5.26:1 contrast (WCAG AA passes).
Color values
| HEX | #318E75 |
|---|---|
| RGB | rgb(49, 142, 117) |
| HSL | hsl(164, 49%, 37%) |
| HSV | hsv(164, 65%, 56%) |
| CMYK | cmyk(65.5%, 0%, 17.6%, 44.3%) |
| CIE-LAB | lab(53.26, -33.53, 5.36) |
| CIE-LCH | lch(53.26, 33.95, 170.91°) |
| OKLab | oklab(58.51% -0.0944 0.0136) |
| OKLCH | oklch(58.51% 0.095 171.8) |
| XYZ | xyz(14.1489, 21.2818, 20.1883) |
| Luminance | 0.2128 (WCAG relative) |
| Temperature | neutral |
| Family | teal |
Closest named colors
Viridian
#1E9167
ΔE00 5.05
Ocean Green
#3D9973
ΔE00 5.30
Teal (survey)
#029386
ΔE00 5.38
Dusty Teal
#4C9085
ΔE00 5.97
Dark Sea Green
#11875D
ΔE00 6.27
Blue Green
#0F9B8E
ΔE00 6.78
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#318E75 #8E314A
analogous
#318E47 #318E75 #31788E
triadic
#318E75 #75318E #8E7531
tetradic
#318E75 #47318E #8E314A #788E31
square
#318E75 #47318E #8E314A #788E31
split-complementary
#318E75 #8E3178 #8E4731
monochromatic
#12332A #216150 #318E75 #41BB9A #6DCDB3
Accessibility & contrast
On white
3.99
#318E75 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.26
#318E75 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #318E75
5.26:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##318E75 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##318E75 | 1.00 | 3.99 | 5.26 | 5.26 |
| #FFFFFF | 3.99 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.26 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.26 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#8A8574
Deuteranopia (green-blind)
#7D7B77
Tritanopia (blue-blind)
#008F87
Achromatopsia (no color)
#7F7F7F
Design tokens & code
CSS
--color: #318e75; /* rgb */ color: rgb(49, 142, 117); /* oklch */ color: oklch(58.5% 0.095 171.8);
Tailwind
colors: {
custom: {
50: '#74af9c',
500: '#318e75',
950: '#000000',
},
}SCSS
$custom: #318e75; $custom-light: #74af9c; $custom-dark: #000000;
JSON
{
"hex": "#318e75",
"rgb": {
"r": 49,
"g": 142,
"b": 117
},
"hsl": {
"h": 163.871,
"s": 48.691,
"l": 37.451
},
"oklch": {
"l": 0.58505,
"c": 0.09542,
"h": 171.8
},
"luminance": 0.21283
}Semantic roles & 50–950 ramp
primary
#318E75
secondary
#B4677B
accent
#5074D8
background
#F7FAF9
surface
#EDF5F2
border
#C8CFCC
text
#09100E
muted
#7B7F7E