Everyday neutralsLayered neutrals
Navy and Gray Color Combination
Both colors are near-neutral, so this pair works on value rather than hue: deep navy for surfaces, grey for supporting text and borders.
Hex codes #000080 and #808080 — a layered neutrals pair with a 4.05:1 contrast ratio between the two colors.
Values for this combination
- RGB
- rgb(0, 0, 128)
- HSL
- hsl(240, 100%, 25%)
- Hex
- #000080
- RGB
- rgb(128, 128, 128)
- HSL
- hsl(0, 0%, 50%)
- Hex
- #808080
Contrast between Navy and Gray
Contrast ratio 4.05: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 Navy surface, at 4.05:1.
Navy text on a Gray surface, at 4.05:1.
Where this pair works
- Dark interfaces
- Product packaging
- Signage
Give Navy (#000080) 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
Navy 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#000080the dominant color · closest to Navy
- Secondary#808080the accent color · closest to Gray
- Deep shade#00004dtext, borders and icons · closest to OxfordBlue
- Neutral#f6f4f4dividers and quiet surfaces · closest to WhiteSmoke
Explore Navy and Gray on their own
Navy
More color combinations
Navy and White
#000080 · #FFFFFFCorporate and calmOpen combinationGray and White
#808080 · #FFFFFFQuiet structureOpen combinationTeal and Gray
#008080 · #808080Modern technicalOpen combinationNavy and SkyBlue
#000080 · #87CEEBTrusted rangeOpen combinationTeal and Navy
#008080 · #000080Nautical depthOpen combinationPink and Gray
#FFC0CB · #808080Balanced softnessOpen combinationNavy and Gray are a layered neutrals pair: both colors are near-neutral, so this pair works on value rather than hue: deep navy for surfaces, grey for supporting text and borders.
Frequently asked questions
Yes — this pair is used for dark interfaces, product packaging, signage. The two colors measure 4.05: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 #000080 and #808080 — nothing is hardcoded.
- Build a longer palette out of Navy or Gray in the palette generator, or test your own text pair in the contrast checker.
Put this combination to work
Turn Navy and Gray into a full palette, a gradient or a set of shades — or check the pair against WCAG.
