Teal color (#008080)
Teal is one of the 148 CSS named colors. Use the keyword teal
anywhere CSS accepts a color, or its hex code #008080, which is rgb(0, 128, 128) in RGB.
It is a medium, moderately saturated cool color with a hue angle of 180° on the HSL color wheel and a perceived lightness of 54% in OKLCH. On a teal background, white text gives the higher contrast at 4.77:1, which passes WCAG AA for normal text.
Teal color codes
| CSS name | teal |
|
|---|---|---|
| HEX | #008080 |
|
| HEX (8-digit) | #008080FF |
|
| RGB | rgb(0, 128, 128) |
|
| HSL | hsl(180, 100%, 25%) |
|
| HSV / HSB | hsv(180, 100%, 50%) |
|
| OKLCH | oklch(54.3% 0.0927 194.8) |
|
| CMYK | cmyk(100%, 0%, 0%, 49.8%) |
Contrast with white and black
WCAG 2 contrast ratios and APCA lightness contrast (Lc) for teal used as text and as a background.
Tints and shades of teal
Tints mix teal with white; shades mix it with black, in 10% steps. Click a swatch to copy it, or build custom scales in the tint & shade generator.
Tints
Shades
Colors that go with teal
Harmonies calculated on the HSL color wheel. Explore more in the color scheme generator.
Complementary
Analogous
Triadic
Split-Complementary
Teal with color blindness
Approximately how teal appears with each type of color vision deficiency. Test full designs with the color blindness simulator.
Using teal in CSS
.element {
color: teal;
background-color: #008080;
border-color: rgb(0 128 128 / 50%);
outline-color: oklch(54.3% 0.0927 194.8);
}Similar named colors
See all shades of cyan or browse every CSS color name.