#63E1AE#63E1AE
#63E1AE is a very light, vivid teal. Relative luminance 0.596; OKLCH L 82.5% C 0.135 H 164.0°. Best body text is #000000 at 12.91:1 contrast (WCAG AA passes).
Color values
| HEX | #63E1AE |
|---|---|
| RGB | rgb(99, 225, 174) |
| HSL | hsl(156, 68%, 64%) |
| HSV | hsv(156, 56%, 88%) |
| CMYK | cmyk(56%, 0%, 22.7%, 11.8%) |
| CIE-LAB | lab(81.60, -46.89, 14.55) |
| CIE-LCH | lch(81.60, 49.10, 162.76°) |
| OKLab | oklab(82.48% -0.1298 0.0373) |
| OKLCH | oklch(82.48% 0.135 164) |
| XYZ | xyz(39.7070, 59.5553, 49.4390) |
| Luminance | 0.5956 (WCAG relative) |
| Temperature | neutral |
| Family | teal |
Closest named colors
Seafoam
#7FE0B3
ΔE00 2.83
Eucalyptus
#44D7A8
ΔE00 3.25
Aqua Marine
#2EE8BB
ΔE00 4.15
Light Greenish Blue
#63F7B4
ΔE00 5.38
Light Turquoise
#7EF4CC
ΔE00 5.50
Light Teal
#90E4C1
ΔE00 5.57
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#63E1AE #E16396
analogous
#63E16F #63E1AE #63D5E1
triadic
#63E1AE #AE63E1 #E1AE63
tetradic
#63E1AE #6F63E1 #E16396 #D5E163
square
#63E1AE #6F63E1 #E16396 #D5E163
split-complementary
#63E1AE #E163D5 #E16F63
monochromatic
#21A972 #30D793 #63E1AE #96EBC9 #CAF5E3
Accessibility & contrast
On white
1.63
#63E1AE on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
12.91
#63E1AE on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #63E1AE
12.91:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##63E1AE | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##63E1AE | 1.00 | 1.63 | 12.91 | 12.91 |
| #FFFFFF | 1.63 | 1.00 | 21.00 | 21.00 |
| #000000 | 12.91 | 21.00 | 1.00 | 1.00 |
| ##000000 | 12.91 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#DDD3AB
Deuteranopia (green-blind)
#CBC5B1
Tritanopia (blue-blind)
#2AE1D3
Achromatopsia (no color)
#CBCBCB
Design tokens & code
CSS
--color: #63e1ae; /* rgb */ color: rgb(99, 225, 174); /* oklch */ color: oklch(82.5% 0.135 164.0);
Tailwind
colors: {
custom: {
50: '#99ebc6',
500: '#63e1ae',
950: '#000000',
},
}SCSS
$custom: #63e1ae; $custom-light: #99ebc6; $custom-dark: #000000;
JSON
{
"hex": "#63e1ae",
"rgb": {
"r": 99,
"g": 225,
"b": 174
},
"hsl": {
"h": 155.714,
"s": 67.742,
"l": 63.529
},
"oklch": {
"l": 0.82475,
"c": 0.135,
"h": 164
},
"luminance": 0.59559
}Semantic roles & 50–950 ramp
primary
#63E1AE
secondary
#AB3D6A
accent
#1661D0
background
#FCFEFD
surface
#F5FDF9
border
#CFD5D2
text
#0F1613
muted
#808482