Cool combinationsTrusted range
Navy and SkyBlue Color Combination
Both colors are blue, so the difference is depth: navy anchors the layout and sky blue lifts the highlights and hover states.
Hex codes #000080 and #87CEEB — a trusted range pair with a 9.19: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(135, 206, 235)
- HSL
- hsl(197, 71%, 73%)
- Hex
- #87CEEB
Contrast between Navy and SkyBlue
Contrast ratio 9.19:1. This only decides whether one color of the pair can carry text on the other — the colors themselves always work side by side.
SkyBlue text on a Navy surface, at 9.19:1.
Navy text on a SkyBlue surface, at 9.19:1.
Where this pair works
- Fintech
- Education
- Presentation decks
Give Navy (#000080) roughly 60% of the surface, SkyBlue (#87CEEB) 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 SkyBlue 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#e6f0f4backgrounds and large surfaces · closest to Lavender
- Primary#000080the dominant color · closest to Navy
- Secondary#87CEEBthe accent color · closest to SkyBlue
- Deep shade#00004dtext, borders and icons · closest to OxfordBlue
- Neutral#f4f5f6dividers and quiet surfaces · closest to WhiteSmoke
Explore Navy and SkyBlue on their own
Navy
More color combinations
Navy and White
#000080 · #FFFFFFCorporate and calmOpen combinationNavy and Gray
#000080 · #808080Layered neutralsOpen combinationTeal and Navy
#008080 · #000080Nautical depthOpen combinationMustard and Navy
#FFDB58 · #000080Retro contrastOpen combinationBlue and Green
#0000FF · #008000Natural calmOpen combinationTeal and Gray
#008080 · #808080Modern technicalOpen combinationNavy and SkyBlue are a trusted range pair: both colors are blue, so the difference is depth: navy anchors the layout and sky blue lifts the highlights and hover states.
Frequently asked questions
Yes — this pair is used for fintech, education, presentation decks. The two colors measure 9.19:1 against each other, which is enough for body text in either direction.
Good to know
- Every value on this page is calculated from #000080 and #87CEEB — nothing is hardcoded.
- Build a longer palette out of Navy or SkyBlue in the palette generator, or test your own text pair in the contrast checker.
Put this combination to work
Turn Navy and SkyBlue into a full palette, a gradient or a set of shades — or check the pair against WCAG.
