Back to Blog

Navy Blue Color Palette: Hex Codes, Combinations & UI Examples

Build a complete navy blue color palette from #000080—six ready-made navy blue combinations with copy-ready hex codes for web, brand, and product design.

•8 min read

Navy Blue = #000080

Canonical anchor for any navy blue palette—copy hex or RGB for CSS variables and design tokens.

Hex
#000080
RGB
rgb(0, 0, 128)

A practical navy blue palette does more than repeat one deep blue. You need a primary anchor (#000080), lighter blues for hover and borders, neutrals for long reading sessions, and one accent that carries emotion—gold for prestige, coral for energy, mint for health. This guide packages six four-color navy blue combinations you can paste into Figma or token files today, then walks through UI and branding patterns so the palette survives real products—not just mood boards.

Navy Blue Color Palette Combinations

Each card lists four hex codes with swatches. Treat navy as the 60% structural color in the 60-30-10 rule, assign one secondary neutral, and reserve the accent for CTAs and badges.

  • Navy + Gold + White + Light Gray

    Classic luxury and finance: navy structure (#000080), gold accents (#FFD700), white content wells (#FFFFFF), and light gray (#E5E7EB) for dividers and table zebra rows.

    • Navy: #000080
    • Gold: #FFD700
    • White: #FFFFFF
    • Light gray: #E5E7EB

  • Navy + Coral + Cream + Sand

    Modern consumer and editorial brands: coral CTAs (#FF6B6B) pop on navy headers while cream (#FFF8F0) and sand (#D4C4A8) soften long-form reading areas.

    • Navy: #000080
    • Coral: #FF6B6B
    • Cream: #FFF8F0
    • Sand: #D4C4A8

  • Navy + Mint + White + Dark Navy

    Health and fintech dashboards: mint success states (#6EE7B7) on white cards, with navy chrome (#000080) and dark navy (#0A0A2E) for sidebars and dark mode shells.

    • Navy: #000080
    • Mint: #6EE7B7
    • White: #FFFFFF
    • Dark navy: #0A0A2E

  • Navy + Red + White + Silver

    Patriotic, sports, and alert-heavy UIs: red (#DC2626) for urgency badges, silver (#C0C0C0) for borders and icons, white for body copy on light sections.

    • Navy: #000080
    • Red: #DC2626
    • White: #FFFFFF
    • Silver: #C0C0C0

  • Navy + Orange + Cream + Brown

    Warm hospitality and autumn campaigns: orange highlights (#F97316), cream backgrounds (#FFF8E7), and brown (#78350F) for typography on light fields.

    • Navy: #000080
    • Orange: #F97316
    • Cream: #FFF8E7
    • Brown: #78350F

  • Navy + Pink + White + Lavender

    Beauty, lifestyle, and creative SaaS: pink accents (#F472B6) on navy heroes, lavender (#E6E6FA) for soft section backgrounds, white for product cards.

    • Navy: #000080
    • Pink: #F472B6
    • White: #FFFFFF
    • Lavender: #E6E6FA

Navy Blue in UI Design

Finance dashboards. Use #000080 for the top navigation bar and account summary band, #FFFFFF for card surfaces, #FFD700 sparingly for positive trend chips, and #E5E7EB for table dividers. White labels on navy often pass WCAG AA at large sizes—run small numerals through the contrast checker before launch.

Marketing landing pages. A navy hero (#000080) with coral CTA (#FF6B6B) on cream body (#FFF8F0) creates clear hierarchy without a third competing hue. Keep paragraph text in charcoal (#1F2937) on cream rather than white-on-navy paragraphs, which fatigue readers on long pages.

SaaS settings and admin. Mint success toasts (#6EE7B7) on white panels, navy sidebar (#000080), and dark navy (#0A0A2E) for collapsed rails or dark mode give developers semantic roles: surface.sidebar, status.success, surface.canvas. Plug #000080 into the palette generator to auto-build hover and disabled steps instead of hand-mixing blues.

Across patterns, the navy blue palette wins when it stays structural: charts, photography, and illustration carry saturation; navy carries navigation, trust, and typographic hierarchy. Re-test after every font or radius change—rounded buttons and thin weights alter perceived contrast on #000080 more than flat rectangles do.

Navy Blue in Branding

Industries reach for a navy blue color palette because it signals stability without the harshness of black. Retail banking, insurers, and wealth managers pair navy with gold or silver to echo coins and metal cards. Government and civic brands use navy plus red and white for official recognition—document exact hex values so print vendors and web teams do not drift to different blues after one election cycle.

Maritime logistics, defense contractors, and nautical lifestyle labels lean on literal “sea” metaphor, but the same palette works for tech when you modernize typography: geometric sans, generous whitespace, and a single warm accent (orange or coral) so the brand does not read as 1990s corporate. Healthcare and clinical networks adopt navy for consent flows and portal headers because patients associate deep blue with competence; soften waiting-room screens with lavender or light gray rather than saturated navy fields.

Luxury fashion and hospitality often alternate navy packaging with cream and sand neutrals—see the coral-and-cream combination above for DTC brands that want energy without abandoning trust. When you pitch a new navy blue palette to stakeholders, show three applications (logo lockup, app chrome, slide template) so approvers see proportion, not just a flat swatch strip.

Navy Blue Shades

Eight blues from airy tints to near-black navy. Use lighter rows for backgrounds; anchor UI chrome on #000080 or #191970.

SwatchShadeHex
Alice blue
#F0F8FF
Light steel blue
#B0C4DE
Steel blue
#4682B4
Royal blue
#4169E1
Navy blue
#000080
Midnight blue
#191970
Dark navy
#0A0A2E
Prussian blue
#003153

When two teams disagree on “which navy,” the fix is governance: publish one primary (#000080 or your audited brand blue), map tints in the shades table to semantic names, and forbid one-off hex picks in marketing decks. Export the six combinations as JSON or CSS custom properties so engineers and designers share the same source. If you A/B test accents, change only the 10% accent slot—never the navy header without retesting every white label and focus ring on blue.

Whether you are refreshing a legacy brand or launching a B2B product, start with one canonical navy hex, pick one of the six navy blue combinations above, then expand into a full token scale. For the single-code reference—including RGB, HSL, and a larger shade table—see our navy blue hex code guide. To balance accent weight across layouts, read the 60-30-10 color rule next.

FAQ

What is a navy blue color palette?
A navy blue color palette centers on #000080 as the primary anchor, then adds secondary and accent hex codes—often gold, white, coral, mint, or gray—for backgrounds, CTAs, and typography. The best palettes name each role (primary, surface, accent) so web and brand teams stay consistent.
What colors go in a navy blue palette?
Common navy blue palette pairings include gold (#FFD700) and white for luxury, coral (#FF6B6B) and cream for modern consumer brands, mint (#6EE7B7) for health UI, and light gray (#E5E7EB) for minimal corporate layouts. Always test text and button contrast on navy.
What are good navy blue combinations for websites?
Strong navy blue combinations for websites use navy for headers and footers (#000080), white or off-white for content wells, one saturated accent for CTAs, and a neutral gray for borders. Avoid filling entire viewports with saturated navy—alternate bands to reduce eye strain.
How do I build a navy blue palette from one hex?
Start with #000080, then generate monochromatic tints and shades for surfaces, or pick one complementary accent (gold, coral, pink) plus two neutrals. Document hex codes in a style guide and verify WCAG contrast with a dedicated checker before shipping production UI.

Build your palette

Use our free tools to create and test your color palette.

Color Palette GeneratorWCAG Contrast Checker

Related: Navy Blue Hex Code (#000080) · 60-30-10 Color Rule