Navy Blue Color Palette: Hex Codes, Combos & Color Schemes
A complete navy blue color palette from #000080—navy + gold, white, coral, and six more navy blue combinations with copy-ready hex codes for websites, brands, and UI.
Navy Blue = #000080
Canonical anchor for any navy blue palette—copy hex or RGB for CSS variables and design tokens.
A practical navy blue palette does more than repeat one deep blue. Whether you search for a navy colour palette or a color palette with navy blue as the anchor, you need #000080 (or your audited brand navy), 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 combinations, three full navy blue color scheme layouts for websites, five navy-and-gold variations, and branding patterns so your navy blue colour scheme 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 color rule, assign one secondary neutral, and reserve the accent for CTAs and badges—the same proportion logic used in the website schemes below.
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 Color Scheme for Websites
A production-ready navy blue color scheme assigns roles, not just pretty swatches. The 60-30-10 color rule keeps navy as the dominant ~60% (navigation, hero bands, footer), a secondary ~30% for readable surfaces (page background, cards), and a single accent ~10% for CTAs and highlights—so no hue fights for attention. Copy the hex codes below into CSS variables or your design-system tokens, then see navy blue on a real website mockup before handoff.
Finance & professional services
Navy carries trust on headers, footers, and statement bands. Cool gray fills most of the viewport so users read numbers on calm surfaces; gold appears only on primary CTAs and positive indicators.
60%#00008030%#F3F4F610%#FFD700- Navy #000080 — Header, footer, hero band, sidebar chrome
- Cool gray #F3F4F6 — Page background, cards, table wells
- Gold #FFD700 — Primary CTA, badges, chart highlights
B2B SaaS marketing site
A saturated navy hero and pricing bar anchor the brand; off-white carries long-form copy and feature grids; coral handles the one action you want per screen—demo requests and trial signups.
60%#001F3F30%#FAFAF910%#FF6B6B- Navy #001F3F — Hero, nav, pricing header, footer
- Off-white #FAFAF9 — Body sections, testimonial cards, FAQ
- Coral #FF6B6B — CTA buttons, link emphasis, promo tags
Editorial & content publisher
Deep navy frames the brand without painting entire articles blue. Cream reduces glare for reading; teal accents mark newsletter signup and category pills without competing with headlines.
60%#0A0A2E30%#FFF8F010%#14B8A6- Dark navy #0A0A2E — Masthead, category rails, podcast chrome
- Cream #FFF8F0 — Article background, pull quotes, archives
- Teal #14B8A6 — Subscribe CTA, tags, inline links
If stakeholders push for more accent colors, split the 10% budget—never grow gold or coral to 30% without demoting navy from its structural role. For a deeper walkthrough of proportions, see our 60-30-10 rule guide.
Navy Blue and Gold Color Palette
Navy and gold is the most requested pairing in any navy blue palette—finance, awards, universities, and luxury retail all reach for it. Gold reads as metal and achievement on deep blue; the trick is picking the right gold temperature and neutral so body copy stays readable. Below are five hex-ready variations from bright ceremonial gold to muted brass—copy any row into Figma or your token file.
Classic navy + bright gold
The default luxury pairing: canonical navy (#000080), vivid gold (#FFD700), white content wells, and light gray dividers—ideal for banking, awards, and premium retail.
- Navy: #000080
- Gold: #FFD700
- White: #FFFFFF
- Light gray: #E5E7EB
Midnight navy + antique gold
Deeper navy (#0A1628) with muted antique gold (#C9A227) reads more editorial than casino-bright. Pair with warm ivory (#F8F6F0) for annual reports and heritage brands.
- Midnight navy: #0A1628
- Antique gold: #C9A227
- Ivory: #F8F6F0
- Slate text: #2D3748
Royal navy + champagne gold
Slightly brighter navy (#001F3F) with champagne (#F5E6C8) softens contrast for wedding, hospitality, and beauty packaging where pure #FFD700 feels loud.
- Royal navy: #001F3F
- Champagne: #F5E6C8
- White: #FFFFFF
- Blue gray: #94A3B8
Navy + dark goldenrod
Dark goldenrod (#B8860B) on navy passes as “old gold” in crests and university marks. Cream (#FFFAF0) body copy keeps paragraphs readable without stark white glare.
- Navy: #000080
- Dark goldenrod: #B8860B
- Cream: #FFFAF0
- Charcoal: #1F2937
Midnight blue + brass
Midnight blue (#191970) with brass (#C5A028) suits industrial, maritime, and B2B hardware brands. Cool gray (#F9FAFB) surfaces prevent the pair from feeling heavy on long dashboards.
- Midnight blue: #191970
- Brass: #C5A028
- Cool gray: #F9FAFB
- Slate: #64748B
Test white and gold labels on navy with our contrast checker—bright gold (#FFD700) on #000080 often passes for large headings but fails for small caption text; antique and brass golds on midnight navy need verification too.
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, any navy blue colour scheme wins when navy 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.
| Swatch | Shade | Hex |
|---|---|---|
| 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 & test your palette
Use our free tools to name colors, generate palettes, and check accessibility.
Related: Navy Blue Hex Code (#000080) · 60-30-10 Color Rule