Navy Blue and Beige
Why they work: a coastal and preppy staple: formal navy grounded by soft sandy neutrals.
Combination sets
The classic split
Navy Blue and Beige with a light tint of navy blue, a deep shade of beige and white for breathing room.
Dark mode
Both anchors survive on dark: Beige as the highlight, Navy Blue as the accent, and two intermediate surfaces for elevation.
Soft & light
Both anchors reduced to tints for airy sections, with the full-strength colors kept for buttons and links.
60 / 30 / 10 UI set
A practical interface split: neutral ~60%, navy blue ~30% for structure, beige ~10% for calls to action.
Gradient bridge
The direct perceptual path from navy blue to beige — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #1B2A4A | #F5F5DC | 12.85:1 | ✓ | ✓ |
| #F5F5DC | #1B2A4A | 12.85:1 | ✓ | ✓ |
| #1B2A4A | #FFFFFF | 14.22:1 | ✓ | ✓ |
| #1B2A4A | #000000 | 1.48:1 | ✗ | ✗ |
| #F5F5DC | #FFFFFF | 1.11:1 | ✗ | ✗ |
| #F5F5DC | #000000 | 18.98:1 | ✓ | ✓ |
| #16161D | #67928C | 5.20:1 | ✓ | ✗ |
Related combinations
FAQ
Do navy blue and beige go together?
Yes — a coastal and preppy staple: formal navy grounded by soft sandy neutrals. Their hues are 161° apart on the color wheel and the direct pair contrast is 12.85:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on navy blue and beige?
On navy blue use #FFFFFF text (14.22:1); on beige use #000000 (18.98:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Navy Blue: #1B2A4A — OKLCH oklch(28.95% 0.062 263.9). Beige: #F5F5DC — OKLCH oklch(96.36% 0.033 107).