Noir color palette
Shadows and smoke, then one yellow streetlamp. Three charcoals, #1A1A1A to #404040, and a silver gray set up the black-and-white film look, and mustard gold #E8C547 is the only color allowed in. That single accent makes headlines and buttons impossible to miss. Jazz bars and detective games are the obvious match, and it works for true-crime podcast art too.
Noir palette in use
Use #1A1A1A as the background with #B0B0B0 for body text and #E8C547 for headings and buttons. #2C2C2C and #404040 suit cards, borders and dividers.
This pair measures 10.36:1, so it works for body text too. The button uses #B0B0B0 with black text.
ButtonGood for
- Jazz bar website
- Detective game UI
- True-crime podcast art
- Film festival program
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 |
|---|---|---|---|
#1A1A1A | #E8C547 | 10.36:1 | AAA |
#2C2C2C | #E8C547 | 8.31:1 | AAA |
#1A1A1A | #B0B0B0 | 8.02:1 | AAA |
#2C2C2C | #B0B0B0 | 6.43:1 | AA |
#404040 | #E8C547 | 6.17:1 | AA |
#404040 | #B0B0B0 | 4.78:1 | AA |
Noir palette as code
CSS variables
:root {
--noir-1: #1A1A1A;
--noir-2: #2C2C2C;
--noir-3: #404040;
--noir-4: #B0B0B0;
--noir-5: #E8C547;
}Tailwind v4
@theme {
--color-noir-1: #1A1A1A;
--color-noir-2: #2C2C2C;
--color-noir-3: #404040;
--color-noir-4: #B0B0B0;
--color-noir-5: #E8C547;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'noir': {
100: '#1A1A1A',
200: '#2C2C2C',
300: '#404040',
400: '#B0B0B0',
500: '#E8C547',
},SCSS
$noir-1: #1A1A1A;
$noir-2: #2C2C2C;
$noir-3: #404040;
$noir-4: #B0B0B0;
$noir-5: #E8C547;JSON
["#1A1A1A","#2C2C2C","#404040","#B0B0B0","#E8C547"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.