Where the name comes from
Teal is named after the Eurasian teal, a small duck with a blue-green stripe on its head. The CSS keyword teal is #008080, which is exactly half-strength green and blue with no red.
Teal, turquoise and cyan
- Teal is darker and calmer, a blue-green with some depth.
- Turquoise is lighter and brighter, closer to the gemstone.
- Cyan is the pure screen color
#00FFFF, far more intense than either.
Using teal
Teal is a reliable brand and interface color because it sits between the trust of blue and the freshness of green. It pairs well with coral, mustard, cream and charcoal. A deep teal also makes a good dark-mode accent.
On screen
Deep teals like #008080 pass WCAG AA with white text at normal size. Light teals need dark text. The palette ideas above include a complementary coral-orange accent. Browse shades of turquoise and mint green, or build a scheme on the color wheel.