Mustard & Navy color palette
Three navies, #1B3A5C down to #0D1B2A, give this set a serious, tailored base, and mustard #E3B505 with ochre #C38B15 add warmth. It's the color scheme of a wool blazer with a yellow pocket square, classic with a bit of swagger. Menswear shops, law firms, college athletics, private schools and craft distilleries fit, and it reads well in print and in dark web layouts.
Mustard & Navy palette in use
Use #0D1B2A or #162A44 as the background with #E3B505 for headings and buttons. #C38B15 works for secondary accents, and #1B3A5C for cards, with off-white for body text.
This pair measures 9.00:1, so it works for body text too. The button uses #C38B15 with black text.
ButtonGood for
- Menswear shop website
- Law firm letterhead
- College athletics branding
- Distillery label
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#0D1B2A | #E3B505 | 9.00:1 | AAA |
#162A44 | #E3B505 | 7.50:1 | AAA |
#1B3A5C | #E3B505 | 6.02:1 | AA |
#0D1B2A | #C38B15 | 5.81:1 | AA |
#162A44 | #C38B15 | 4.84:1 | AA |
#1B3A5C | #C38B15 | 3.88:1 | AA large |
Mustard & Navy palette as code
CSS variables
:root {
--mustard-and-navy-1: #E3B505;
--mustard-and-navy-2: #C38B15;
--mustard-and-navy-3: #1B3A5C;
--mustard-and-navy-4: #162A44;
--mustard-and-navy-5: #0D1B2A;
}Tailwind v4
@theme {
--color-mustard-and-navy-1: #E3B505;
--color-mustard-and-navy-2: #C38B15;
--color-mustard-and-navy-3: #1B3A5C;
--color-mustard-and-navy-4: #162A44;
--color-mustard-and-navy-5: #0D1B2A;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'mustard-and-navy': {
100: '#E3B505',
200: '#C38B15',
300: '#1B3A5C',
400: '#162A44',
500: '#0D1B2A',
},SCSS
$mustard-and-navy-1: #E3B505;
$mustard-and-navy-2: #C38B15;
$mustard-and-navy-3: #1B3A5C;
$mustard-and-navy-4: #162A44;
$mustard-and-navy-5: #0D1B2A;JSON
["#E3B505","#C38B15","#1B3A5C","#162A44","#0D1B2A"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.