Color code and palette
Teal Color
Teal sits between blue and green at #008080. It balances calm with freshness and is often easier to use across larger surfaces than brighter cyan.
Teal #008080
Color formats
The same base color in common web formats.
HEX
#008080 RGB
rgb(0, 128, 128) HSL
hsl(180, 100%, 25%) OKLCH
oklch(54.0% 0.093 195.0) Teal sits between blue and green at #008080. It balances calm with freshness and is often easier to use across larger surfaces than brighter cyan.
Shades
| Color | Name | Hex | |
|---|---|---|---|
| Teal 50 | #E5FFFF | ||
| Teal 100 | #B3FFFF | ||
| Teal 200 | #80FFFF | ||
| Teal 300 | #4DFFFF | ||
| Teal 400 | #1AFFFF | ||
| Teal 500 | #00E5E6 | ||
| Teal 600 | #00B2B3 | ||
| Teal 700 | #007F80 | ||
| Teal 800 | #004C4D | ||
| Teal 900 | #00191A |
Triadic color harmony
Three evenly spaced hues create a colorful but balanced starting palette.
Text contrast
These ratios use the WCAG relative luminance formula.
White textNaN:1
Black textNaN:1
Ways to use teal
01
Healthcare and wellness interfaces
02
Calm calls to action
03
Charts paired with orange or coral