#2F858D#2F858D
#2F858D is a mid, moderate teal. Relative luminance 0.193; OKLCH L 56.9% C 0.081 H 203.9°. Best body text is #000000 at 4.86:1 contrast (WCAG AA passes).
Color values
| HEX | #2F858D |
|---|---|
| RGB | rgb(47, 133, 141) |
| HSL | hsl(185, 50%, 37%) |
| HSV | hsv(185, 67%, 55%) |
| CMYK | cmyk(66.7%, 5.7%, 0%, 44.7%) |
| CIE-LAB | lab(51.04, -22.62, -11.85) |
| CIE-LCH | lch(51.04, 25.53, 207.64°) |
| OKLab | oklab(56.93% -0.0742 -0.0328) |
| OKLCH | oklch(56.93% 0.081 203.9) |
| XYZ | xyz(14.3655, 19.3009, 28.1625) |
| Luminance | 0.1930 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Dark Cyan
#0A888A
ΔE00 3.86
Darkcyan
#008B8B
ΔE00 4.99
Teal
#008080
ΔE00 5.17
Teal Blue
#01889F
ΔE00 5.42
Deep Aqua
#08787F
ΔE00 5.46
Greenish Blue
#0B8B87
ΔE00 6.24
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#2F858D #8D372F
analogous
#2F8D66 #2F858D #2F568D
triadic
#2F858D #8D2F85 #858D2F
tetradic
#2F858D #662F8D #8D372F #568D2F
square
#2F858D #662F8D #8D372F #568D2F
split-complementary
#2F858D #8D2F56 #8D662F
monochromatic
#102E31 #205A5F #2F858D #3EB0BB #69C5CD
Accessibility & contrast
On white
4.32
#2F858D on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
4.86
#2F858D on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #2F858D
4.86:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##2F858D | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##2F858D | 1.00 | 4.32 | 4.86 | 4.86 |
| #FFFFFF | 4.32 | 1.00 | 21.00 | 21.00 |
| #000000 | 4.86 | 21.00 | 1.00 | 1.00 |
| ##000000 | 4.86 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#7B808E
Deuteranopia (green-blind)
#6D758D
Tritanopia (blue-blind)
#008A87
Achromatopsia (no color)
#7A7A7A
Design tokens & code
CSS
--color: #2f858d; /* rgb */ color: rgb(47, 133, 141); /* oklch */ color: oklch(56.9% 0.081 203.9);
Tailwind
colors: {
custom: {
50: '#74a9ae',
500: '#2f858d',
950: '#000000',
},
}SCSS
$custom: #2f858d; $custom-light: #74a9ae; $custom-dark: #000000;
JSON
{
"hex": "#2f858d",
"rgb": {
"r": 47,
"g": 133,
"b": 141
},
"hsl": {
"h": 185.106,
"s": 50,
"l": 36.863
},
"oklch": {
"l": 0.56925,
"c": 0.08114,
"h": 203.9
},
"luminance": 0.19302
}Semantic roles & 50–950 ramp
primary
#2F858D
secondary
#B46A64
accent
#5A4EDA
background
#F7FAFA
surface
#EDF4F4
border
#C8CECE
text
#090F10
muted
#7B7F7F