#2FBA9A#2FBA9A
#2FBA9A is a light, vivid teal. Relative luminance 0.381; OKLCH L 70.9% C 0.124 H 173.2°. Best body text is #000000 at 8.61:1 contrast (WCAG AA passes).
Color values
| HEX | #2FBA9A |
|---|---|
| RGB | rgb(47, 186, 154) |
| HSL | hsl(166, 60%, 46%) |
| HSV | hsv(166, 75%, 73%) |
| CMYK | cmyk(74.7%, 0%, 17.2%, 27.1%) |
| CIE-LAB | lab(68.06, -43.85, 5.85) |
| CIE-LCH | lch(68.06, 44.24, 172.40°) |
| OKLab | oklab(70.9% -0.1236 0.0148) |
| OKLCH | oklch(70.9% 0.125 173.2) |
| XYZ | xyz(24.5609, 38.0523, 36.6160) |
| Luminance | 0.3805 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Greeny Blue
#42B395
ΔE00 2.25
Tealish
#24BCA8
ΔE00 3.98
Turquoise (survey)
#06C2AC
ΔE00 4.25
Green Blue
#01C08D
ΔE00 4.94
Mediumaquamarine
#66CDAA
ΔE00 6.35
Greenblue
#23C48B
ΔE00 6.47
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#2FBA9A #BA2F4F
analogous
#2FBA54 #2FBA9A #2F94BA
triadic
#2FBA9A #9A2FBA #BA9A2F
tetradic
#2FBA9A #542FBA #BA2F4F #94BA2F
square
#2FBA9A #542FBA #BA2F4F #94BA2F
split-complementary
#2FBA9A #BA2F94 #BA542F
monochromatic
#165849 #238972 #2FBA9A #53D3B6 #84E0CB
Accessibility & contrast
On white
2.44
#2FBA9A on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
8.61
#2FBA9A on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #2FBA9A
8.61:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##2FBA9A | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##2FBA9A | 1.00 | 2.44 | 8.61 | 8.61 |
| #FFFFFF | 2.44 | 1.00 | 21.00 | 21.00 |
| #000000 | 8.61 | 21.00 | 1.00 | 1.00 |
| ##000000 | 8.61 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#B4AE98
Deuteranopia (green-blind)
#A2A09C
Tritanopia (blue-blind)
#00BCB1
Achromatopsia (no color)
#A6A6A6
Design tokens & code
CSS
--color: #2fba9a; /* rgb */ color: rgb(47, 186, 154); /* oklch */ color: oklch(70.9% 0.124 173.2);
Tailwind
colors: {
custom: {
50: '#7dcfb7',
500: '#2fba9a',
950: '#000000',
},
}SCSS
$custom: #2fba9a; $custom-light: #7dcfb7; $custom-dark: #000000;
JSON
{
"hex": "#2fba9a",
"rgb": {
"r": 47,
"g": 186,
"b": 154
},
"hsl": {
"h": 166.187,
"s": 59.657,
"l": 45.686
},
"oklch": {
"l": 0.709,
"c": 0.1245,
"h": 173.2
},
"luminance": 0.38055
}Semantic roles & 50–950 ramp
primary
#2FBA9A
secondary
#C97C8E
accent
#4569E3
background
#F8FCFB
surface
#EFF9F6
border
#CAD2D0
text
#0B1411
muted
#7C8280