Shades of Teal
← Shades generatorHue 180 exactly, between green and blue, which is why the argument never ends
Teal is #008080, which is exactly half of aqua, #00FFFF. That is not a coincidence: teal, navy, maroon, olive, purple and green were all defined as half-value versions of their bright counterparts in the original HTML palette, so the darker name is literally the brighter one with each channel divided by two. The rest of this family came in later from X11 and is much less tidy, with four turquoises and a lightseagreen that is neither light nor especially green.
The green or blue question has an exact answer. Teal, aqua, cyan, darkcyan and paleturquoise all sit at hue 180 degrees, the midpoint between green at 120 and blue at 240, so neither reading is wrong. Where the family drifts is at the edges: turquoise falls to 174 and aquamarine to 160, both measurably green, while only darkturquoise strays to the blue side, and only by a single degree. Teal is the balance point and the rest of the table leans green.
Every CSS teal name, with its contrast on white
The 17 named colors in the CSS keyword list that belong to this family, lightest first. The last two columns are the WCAG 2 contrast ratio against white and what that ratio passes for normal text — computed with the same function as the site's contrast checker, so the two never disagree.
| Name | HEX | RGB | On white | WCAG |
|---|---|---|---|---|
| azure | #f0ffff | rgb(240, 255, 255) | 1.03:1 | fails |
| lightcyan | #e0ffff | rgb(224, 255, 255) | 1.05:1 | fails |
| aqua | #00ffff | rgb(0, 255, 255) | 1.25:1 | fails |
| cyan | #00ffff | rgb(0, 255, 255) | 1.25:1 | fails |
| paleturquoise | #afeeee | rgb(175, 238, 238) | 1.29:1 | fails |
| powderblue | #b0e0e6 | rgb(176, 224, 230) | 1.43:1 | fails |
| lightblue | #add8e6 | rgb(173, 216, 230) | 1.53:1 | fails |
| turquoise | #40e0d0 | rgb(64, 224, 208) | 1.64:1 | fails |
| skyblue | #87ceeb | rgb(135, 206, 235) | 1.74:1 | fails |
| mediumturquoise | #48d1cc | rgb(72, 209, 204) | 1.86:1 | fails |
| darkturquoise | #00ced1 | rgb(0, 206, 209) | 1.95:1 | fails |
| lightseagreen | #20b2aa | rgb(32, 178, 170) | 2.62:1 | fails |
| cadetblue | #5f9ea0 | rgb(95, 158, 160) | 3.05:1 | AA large |
| darkcyan | #008b8b | rgb(0, 139, 139) | 4.15:1 | AA large |
| teal | #008080 | rgb(0, 128, 128) | 4.77:1 | AA |
| darkslategray | #2f4f4f | rgb(47, 79, 79) | 8.93:1 | AAA |
| darkslategrey | #2f4f4f | rgb(47, 79, 79) | 8.93:1 | AAA |
Aqua and cyan are the same value under two names, #00FFFF, one from the HTML sixteen and one from X11, and both remain valid keywords. Teal came from the same HTML set as its half-value sibling. Everything carrying turquoise or aquamarine arrived later from the X11 file, which is why the region has four turquoises and two names for one cyan. Darkcyan and lightseagreen sit within four degrees of each other in hue while their names share nothing at all.
Tints, shades and tones of #008080
Built from one base color three different ways. Tints mix it toward white, shades toward black, and tones toward grey at the same lightness — which is why the tone row goes quiet rather than dark.
Tints
Shades
Tones
The 50-950 scale
Using teal in an interface
This family splits cleanly by contrast. Teal at 4.77 to 1 and darkcyan at 4.15 are the only entries near text territory, and only teal actually passes AA on white. Everything from turquoise upward, aqua included at 1.25, belongs on fills, borders and chart series with dark labels. The other hazard is that mid teals sit very close to the blue you probably use for links, so a teal accent and a blue link in the same paragraph will fight.
FAQ
- Is teal green or blue?
- Neither, precisely. Teal is at hue 180 degrees, the exact midpoint between green at 120 and blue at 240, so both answers are half right and neither is more correct. In practice the perception depends on what surrounds it: teal next to a saturated blue reads green, and the same swatch next to a green reads blue. The number does not move, the reading does.
- What is the difference between aqua and cyan?
- Nothing at all. Both are #00FFFF, rgb(0, 255, 255). Aqua came in with the original sixteen HTML colours and cyan came from the X11 list, and CSS kept both rather than drop one. A browser cannot tell them apart, and neither can a colour picker. Use whichever your team already writes, and note that darkcyan has no darkaqua counterpart.
- What hex code is turquoise?
- Turquoise is #40E0D0, rgb(64, 224, 208), a hue of 174 degrees that leans slightly green of true cyan. Its relatives are darkturquoise #00CED1, mediumturquoise #48D1CC and paleturquoise #AFEEEE. None of the four passes AA against white; turquoise itself is 1.64 to 1, so treat all of them as surface colours rather than text.
