Teal color guide
Blue with enough green to escape the corporate default. It reads technical and considered, which is why so many developer tools land on it.
- Best for
- Standing apart in a category where everyone uses blue.
Accessibility
Ratios follow WCAG 2.1. AA needs 4.5:1 for body text, AAA needs 7:1; large text passes AA at 3:1.
Colors that go with teal
Combinations that hold up in a real layout rather than only on the colour wheel.
Teal color harmonies
Teal shades and tints
The same hue and saturation across ten lightness steps — the basis of a usable colour ramp in a design system.
Teal FAQ
What is the hex code for teal?
Teal is #008080. In other formats that is rgb(0, 128, 128), hsl(180, 100%, 25%), and approximately cmyk(100%, 0%, 0%, 50%) for print.
What colors go with teal?
Coral, Cream, Charcoal all pair well with teal. Standing apart in a category where everyone uses blue.
Is teal accessible for text?
Yes — teal text on white reaches 4.77:1, which passes WCAG AA for body text.
Should text on teal be black or white?
Use white text. It gives the higher contrast ratio of the two against #008080.