Color family
Shades of teal
A deep, moderate teal leaning green. The reference teal is #008080, as defined by the CSS named color.
| HEX | #008080 | |
|---|---|---|
| RGB | rgb(0, 128, 128) | |
| HSL | hsl(180, 100%, 25%) | |
| HSV | hsv(180, 100%, 50%) | |
| OKLCH | oklch(54.3% 0.093 194.8) | |
| CMYK* | 100, 0, 0, 50 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is teal?
Teal is a dark blue-green named after the Eurasian teal, a small duck with a stripe of this colour on its head. The name has been used for the colour since the early 20th century. In CSS it is exactly half-strength green and blue, #008080. Lighter members of the family include turquoise, aqua and cyan.
Teal hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of teal in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Teal | #008080 | CSS named color | Reference shown on this page |
| Teal | #029386 | xkcd Color Survey | Close · 77% similar |
| Teal | #008080 | Color Names (meodai) | Same color |
Teal vs Turquoise
#008080
#40E0D0
Turquoise is much lighter and brighter; teal is the deep, muted version of the same blue-green. In numbers: the two are 0% similar (OKLab distance 0.282). See Turquoise for its own codes.
Named shades of teal
42 names in the CSS keywords and the xkcd Color Survey belong to the teal family. To give a fuller range, 18 more teal names come from the Color Names list. They are sorted from light to dark; click a swatch to copy its code, or open the ones with their own page.
Light teal shades 33
Medium teal shades 22
Dark teal shades 5
Tints and shades of teal
The same hue from light to dark, generated in OKLab so the steps look even. Click a step to copy its HEX code.
Colors that go with teal
Classic color-wheel combinations built on #008080, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Teal with white and black text
WCAG asks for a contrast of at least 4.5:1 for body text (AA) and 3:1 for large text. On a teal background, white text is the better choice.
Use teal in CSS
.teal {
color: #008080;
/* or */ color: rgb(0 128 128);
/* or */ color: hsl(180 100% 25%);
/* or */ color: oklch(54.3% 0.093 194.8);
/* CSS keyword */ color: teal;
}