Teal vs turquoise
Both are blue-greens, but they sit at opposite ends of lightness. Teal, named after the coloured stripe on the head of the teal duck, is dark and serious. Turquoise, named after the stone, is light and bright. In numbers: teal is 25% lightness, CSS turquoise is 56%.
| Name | HEX | Text that works |
|---|---|---|
| Teal (CSS) | #008080 | White, 4.77:1 |
| Dark cyan (CSS) | #008B8B | Black, 5.07:1 (white drops to 4.15:1) |
| Tailwind teal-500 | #14B8A6 | Black, 8.44:1 |
| Turquoise (CSS) | #40E0D0 | Black, 12.79:1 |
Notice how quickly the safe text colour flips. Dark cyan looks almost identical to teal but is just bright enough that white text no longer passes AA. Many “teal” brand colours today are closer to Tailwind's lighter teal and need dark text. The turquoise page covers the lighter end in detail.
What goes with teal
The exact screen complement of #008080 is maroon, #800000: rotate the hue 180° and keep everything else. In practice coral and mustard are the more popular warm partners, especially in interiors, where teal walls with mustard or rust furnishings are a common mid-century look. Cream text on teal scores 4.62:1, a softer alternative to white that still passes.
Questions
What is teal's RGB code?
rgb(0, 128, 128); HSL hsl(180, 100%, 25%).
Is teal blue or green?
Exactly between them on a screen: equal green and blue, hue 180°. Whether it looks bluer or greener depends on the colours around it.