#63D7AF#63D7AF
#63D7AF is a light, vivid teal. Relative luminance 0.543; OKLCH L 80.1% C 0.121 H 168.0°. Best body text is #000000 at 11.87:1 contrast (WCAG AA passes).
Color values
| HEX | #63D7AF |
|---|---|
| RGB | rgb(99, 215, 175) |
| HSL | hsl(159, 59%, 62%) |
| HSV | hsv(159, 54%, 84%) |
| CMYK | cmyk(54%, 0%, 18.6%, 15.7%) |
| CIE-LAB | lab(78.66, -42.35, 9.86) |
| CIE-LCH | lch(78.66, 43.49, 166.89°) |
| OKLab | oklab(80.09% -0.1185 0.0253) |
| OKLCH | oklch(80.09% 0.121 168) |
| XYZ | xyz(37.1803, 54.3453, 49.0795) |
| Luminance | 0.5435 (WCAG relative) |
| Temperature | neutral |
| Family | teal |
Closest named colors
Eucalyptus
#44D7A8
ΔE00 2.55
Mediumaquamarine
#66CDAA
ΔE00 2.62
Seafoam
#7FE0B3
ΔE00 3.62
Seafoam Blue
#78D1B6
ΔE00 4.13
Aquamarine (survey)
#04D8B2
ΔE00 4.30
Aqua Marine
#2EE8BB
ΔE00 4.96
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#63D7AF #D7638B
analogous
#63D775 #63D7AF #63C5D7
triadic
#63D7AF #AF63D7 #D7AF63
tetradic
#63D7AF #7563D7 #D7638B #C5D763
square
#63D7AF #7563D7 #D7638B #C5D763
split-complementary
#63D7AF #D763C5 #D77563
monochromatic
#279871 #34C996 #63D7AF #94E3C8 #C4F0E1
Accessibility & contrast
On white
1.77
#63D7AF on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
11.87
#63D7AF on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #63D7AF
11.87:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##63D7AF | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##63D7AF | 1.00 | 1.77 | 11.87 | 11.87 |
| #FFFFFF | 1.77 | 1.00 | 21.00 | 21.00 |
| #000000 | 11.87 | 21.00 | 1.00 | 1.00 |
| ##000000 | 11.87 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#D2CAAD
Deuteranopia (green-blind)
#C1BEB2
Tritanopia (blue-blind)
#2ED8CC
Achromatopsia (no color)
#C3C3C3
Design tokens & code
CSS
--color: #63d7af; /* rgb */ color: rgb(99, 215, 175); /* oklch */ color: oklch(80.1% 0.121 168.0);
Tailwind
colors: {
custom: {
50: '#98e4c6',
500: '#63d7af',
950: '#000000',
},
}SCSS
$custom: #63d7af; $custom-light: #98e4c6; $custom-dark: #000000;
JSON
{
"hex": "#63d7af",
"rgb": {
"r": 99,
"g": 215,
"b": 175
},
"hsl": {
"h": 159.31,
"s": 59.184,
"l": 61.569
},
"oklch": {
"l": 0.80093,
"c": 0.1212,
"h": 168
},
"luminance": 0.54349
}Semantic roles & 50–950 ramp
primary
#63D7AF
secondary
#9D4161
accent
#1F59C7
background
#FCFEFD
surface
#F5FCF9
border
#CFD5D2
text
#0E1513
muted
#7F8482