Denim color palette
A stack of jeans from raw to faded. #4B6EAF is the darkest wash, #5C7DC2 and #6E8FD4 are everyday mid blues, and #92AADE and #C5D3EE are worn and sun-bleached. Saturation is moderate, so the blues feel casual and lived-in next to a sharp corporate blue. Clothing brands and family restaurants can both use it comfortably.
Denim palette in use
Use white or #C5D3EE as the background, with #4B6EAF for headings and buttons. #92AADE suits borders and tags, and small body text should go in a dark navy.
This pair measures 13.92:1, so it works for body text too. The button uses #5C7DC2 with black text.
ButtonGood for
- Clothing brand website
- Workwear catalog
- Family restaurant menu
- Community group newsletter
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 |
|---|---|---|---|
#4B6EAF | #C5D3EE | 3.35:1 | AA large |
Denim palette as code
CSS variables
:root {
--denim-1: #4B6EAF;
--denim-2: #5C7DC2;
--denim-3: #6E8FD4;
--denim-4: #92AADE;
--denim-5: #C5D3EE;
}Tailwind v4
@theme {
--color-denim-1: #4B6EAF;
--color-denim-2: #5C7DC2;
--color-denim-3: #6E8FD4;
--color-denim-4: #92AADE;
--color-denim-5: #C5D3EE;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'denim': {
100: '#4B6EAF',
200: '#5C7DC2',
300: '#6E8FD4',
400: '#92AADE',
500: '#C5D3EE',
},SCSS
$denim-1: #4B6EAF;
$denim-2: #5C7DC2;
$denim-3: #6E8FD4;
$denim-4: #92AADE;
$denim-5: #C5D3EE;JSON
["#4B6EAF","#5C7DC2","#6E8FD4","#92AADE","#C5D3EE"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.