teal — #008080
#008080
rgb(0, 128, 128) · hsl(180, 100%, 25%) · CSS keyword teal
Can you put text on it?
| Contrast | Body text | Large text | |
|---|---|---|---|
| teal on white | 4.77:1 | AA | AA |
| teal on black | 4.4:1 | — | AA |
As a background, teal takes white text: 4.77:1 against 4.4:1 the other way. A colour picker will give you the hex and stop there, which is why so many palettes look right and fail an accessibility audit.
Where the name comes from
Named after the duck, which has a band of this colour on its head.
Using it
color: teal;
color: #008080;
color: rgb(0 128 128);All three are the same colour. The keyword is one of the 141 CSS named colours — a list settled in CSS 2.1 and added to exactly once since, when rebeccapurple was standardised in 2014.
Colours close to teal
- darkcyan — #008B8B
- seagreen — #2E8B57
- forestgreen — #228B22
- steelblue — #4682B4
- green — #008000
- lightseagreen — #20B2AA
Frequently asked questions
What is the hex code for teal?
The hex code for teal is #008080 — RGB 0, 128, 128.
Can I use teal for text?
Yes. teal reaches 4.77:1 against white, past the 4.5:1 that WCAG AA asks for body text.
Should text on teal be black or white?
White — 4.77:1 against 4.4:1 the other way.
Other named colours
- thistle — #D8BFD8
- tomato — #FF6347
- turquoise — #40E0D0
- violet — #EE82EE
- wheat — #F5DEB3
- white — #FFFFFF
- whitesmoke — #F5F5F5
- yellow — #FFFF00
- yellowgreen — #9ACD32
- aliceblue — #F0F8FF
- antiquewhite — #FAEBD7
- aqua — #00FFFF
#008080 in full — tints, shades and harmonies · All named colours · Colour reference