Mustard and Navy Blue
Why they work: muted complementary in the flat-design tradition — mustard pops on navy.
Combination sets
The classic split
Mustard and Navy Blue with a light tint of mustard, a deep shade of navy blue and white for breathing room.
Dark mode
Both anchors survive on dark: Navy Blue as the highlight, Mustard 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%, mustard ~30% for structure, navy blue ~10% for calls to action.
Gradient bridge
The direct perceptual path from mustard to navy blue — use for hero sections, charts and progress states.
Contrast data
| Foreground | Background | Ratio | AA | AAA |
|---|---|---|---|---|
| #DBB42C | #1B2A4A | 7.16:1 | ✓ | ✓ |
| #1B2A4A | #DBB42C | 7.16:1 | ✓ | ✓ |
| #DBB42C | #FFFFFF | 1.99:1 | ✗ | ✗ |
| #DBB42C | #000000 | 10.58:1 | ✓ | ✓ |
| #1B2A4A | #FFFFFF | 14.22:1 | ✓ | ✓ |
| #1B2A4A | #000000 | 1.48:1 | ✗ | ✗ |
| #16161D | #00806D | 3.69:1 | ✗ | ✗ |
Related combinations
FAQ
Do mustard and navy blue go together?
Yes — muted complementary in the flat-design tradition — mustard pops on navy. Their hues are 174° apart on the color wheel and the direct pair contrast is 7.16:1. The sets on this page show exactly how to balance them (warm + cool).
What text color works on mustard and navy blue?
On mustard use #000000 text (10.58:1); on navy blue use #FFFFFF (14.22:1). Both pass WCAG AA for normal text.
What are the exact color codes?
Mustard: #DBB42C — OKLCH oklch(78.29% 0.149 91.6). Navy Blue: #1B2A4A — OKLCH oklch(28.95% 0.062 263.9).