Cool combinationsModern technical
Teal and Gray Color Combination
Teal brings just enough chroma to signal interaction while grey keeps every surface quiet. It is the default pair behind a lot of product interfaces.
Hex codes #008080 and #808080 — a modern technical pair with a 1.21:1 contrast ratio between the two colors.
Values for this combination
- RGB
- rgb(0, 128, 128)
- HSL
- hsl(180, 100%, 25%)
- Hex
- #008080
- RGB
- rgb(128, 128, 128)
- HSL
- hsl(0, 0%, 50%)
- Hex
- #808080
Contrast between Teal and Gray
Contrast ratio 1.21:1. This only decides whether one color of the pair can carry text on the other — the colors themselves always work side by side.
Gray text on a Teal surface, at 1.21:1.
Teal text on a Gray surface, at 1.21:1.
Where this pair works
- SaaS interfaces
- Technical docs
- Electronics
Give Teal (#008080) roughly 60% of the surface, Gray (#808080) about 30%, and leave the last 10% for the neutral below. That split is what keeps a two-color combination from turning into a fight.
A five-color set from this pair
Teal and Gray as a working palette: a pale tint of the lighter color for backgrounds, both colors as they are, a deep shade of the darker color for text and a neutral for everything in between.
- Pale tint#efebebbackgrounds and large surfaces · closest to Isabelline
- Primary#008080the dominant color · closest to Teal
- Secondary#808080the accent color · closest to Gray
- Deep shade#004d4dtext, borders and icons · closest to DeepJungleGreen
- Neutral#f6f4f4dividers and quiet surfaces · closest to WhiteSmoke
Explore Teal and Gray on their own
Teal
More color combinations
Gray and White
#808080 · #FFFFFFQuiet structureOpen combinationNavy and Gray
#000080 · #808080Layered neutralsOpen combinationOrange and Teal
#FFA500 · #008080Cinematic contrastOpen combinationTeal and Navy
#008080 · #000080Nautical depthOpen combinationPink and Gray
#FFC0CB · #808080Balanced softnessOpen combinationMauve and Gray
#E0B0FF · #808080Muted eleganceOpen combinationTeal and Gray are a modern technical pair: teal brings just enough chroma to signal interaction while grey keeps every surface quiet. It is the default pair behind a lot of product interfaces.
Frequently asked questions
Yes — this pair is used for saas interfaces, technical docs, electronics. The two colors measure 1.21:1 against each other, which means the two should sit side by side as surfaces rather than as text and background.
Good to know
- Every value on this page is calculated from #008080 and #808080 — nothing is hardcoded.
- Build a longer palette out of Teal or Gray in the palette generator, or test your own text pair in the contrast checker.
Put this combination to work
Turn Teal and Gray into a full palette, a gradient or a set of shades — or check the pair against WCAG.
