Navy Color Palette: 6 Timeless Schemes with Hex Codes

Navy is the quiet powerhouse of the color world — deep enough to feel serious, blue enough to feel calm, and neutral enough to pair with almost anything. A well-built navy color palette reads as trustworthy and premium at once, which is why navy anchors everything from finance and law brands to fashion and interior design.

Here are six navy palettes with hex codes and copy-paste CSS. For the wider blue family, see the blue color palette guide, or browse the full PaletteCSS library.

Why navy works as a neutral

Navy sits so close to black in lightness that it functions as a colored neutral — it grounds a design the way black or charcoal would, but with more warmth and personality. That is why navy text reads as softer than pure black, and why a navy background feels rich rather than harsh.

• Deep navy — the anchor tone, used for text, headers and backgrounds.
• Mid navy-blue — a step lighter, useful for secondary elements.
• Best pairings — cream, gold, blush pink, and sage green all lift navy instantly.

6 navy color palettes (with hex codes)

1. Classic Navy Scale

#E7ECF5 · #A9BEDD · #5C7CB0 · #2A4472 · #0F1F3D

2. Navy & Gold

Elegant, premium, editorial.

#0B1A33 · #1B3358 · #3A5A8C · #D4A017 · #F1DFA8

3. Navy & Cream

A nautical, timeless combination.

#FAF7F0 · #E4DFD3 · #1B3358 · #0F1F3D · #050B17

4. Navy & Blush

Soft and romantic against a deep base.

#0F1F3D · #2A4472 · #F3E0E0 · #E8B4B8 · #B07A7E

5. Navy & Sage

Cool and grounded, very modern.

#0B1A33 · #2A4472 · #9CAF88 · #DCE3D5 · #EEF2E6

6. Midnight Navy

Almost black — dramatic and minimal.

#050B17 · #0F1F3D · #1B3358 · #4A6494 · #A9BEDD

How to use navy in CSS

:root {
  --navy-50:  #E7ECF5;
  --navy-300: #5C7CB0;
  --navy-600: #2A4472;
  --navy-900: #0F1F3D;
}

body { color: var(--navy-900); }
.header { background: var(--navy-900); color: #fff; }

Tips for designing with navy

• Use it as your "black". Navy text on a cream background is warmer and easier on the eyes than pure black on white.
• Add one metallic or warm accent. Gold, brass or blush keeps navy from feeling corporate-flat.
• Layer two navies. A deep and a mid navy together add depth without introducing a new hue.
• Check contrast on mid-navy. Lighter navy blues can fail contrast on dark backgrounds — reserve the deepest shade for text.

Frequently asked questions

What is the hex code for navy?

Classic navy is #000080, though modern design usually uses a softer version like #0F1F3D or #1B3358.

What colors go with navy?

Navy pairs beautifully with cream, gold, blush pink, sage green and white — all of which soften its depth and add warmth or freshness.

Is navy a good replacement for black?

Yes — navy text and backgrounds feel less harsh than pure black while still providing strong contrast, making it a popular "soft black" in modern design systems.

Keep exploring: browse color palettes, read the blue color palette guide, or copy a navy gradient instantly.