Cool combinationsNautical depth
Teal and Navy Color Combination
Two dark, cool colors close in value, so the pair reads as a single deep surface until a lighter color is added on top of it.
Hex codes #008080 and #000080 — a nautical depth pair with a 3.35: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(0, 0, 128)
- HSL
- hsl(240, 100%, 25%)
- Hex
- #000080
Contrast between Teal and Navy
Contrast ratio 3.35:1. This only decides whether one color of the pair can carry text on the other — the colors themselves always work side by side.
Navy text on a Teal surface, at 3.35:1.
Teal text on a Navy surface, at 3.35:1.
Where this pair works
- Coastal branding
- Marine industries
- Premium dark UI
Give Teal (#008080) roughly 60% of the surface, Navy (#000080) 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 Navy 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#e1fafabackgrounds and large surfaces · closest to LightCyan
- Primary#008080the dominant color · closest to Teal
- Secondary#000080the accent color · closest to Navy
- Deep shade#00004dtext, borders and icons · closest to OxfordBlue
- Neutral#f4f6f6dividers and quiet surfaces · closest to WhiteSmoke
Explore Teal and Navy on their own
Teal
More color combinations
Navy and White
#000080 · #FFFFFFCorporate and calmOpen combinationNavy and Gray
#000080 · #808080Layered neutralsOpen combinationOrange and Teal
#FFA500 · #008080Cinematic contrastOpen combinationTeal and Gray
#008080 · #808080Modern technicalOpen combinationNavy and SkyBlue
#000080 · #87CEEBTrusted rangeOpen combinationMustard and Navy
#FFDB58 · #000080Retro contrastOpen combinationTeal and Navy are a nautical depth pair: two dark, cool colors close in value, so the pair reads as a single deep surface until a lighter color is added on top of it.
Frequently asked questions
Yes — this pair is used for coastal branding, marine industries, premium dark ui. The two colors measure 3.35:1 against each other, which is enough for large text and graphics, but not for body text.
Good to know
- Every value on this page is calculated from #008080 and #000080 — nothing is hardcoded.
- Build a longer palette out of Teal or Navy in the palette generator, or test your own text pair in the contrast checker.
Put this combination to work
Turn Teal and Navy into a full palette, a gradient or a set of shades — or check the pair against WCAG.
