Espresso color palette
A coffee cup in five browns. #1A0A00 is close to black with a red-brown undertone, #3D1F08 and #6B3A1F are dark roast, and #9C5B2C and #D4956A are the lighter crema. There's no light neutral, so it naturally becomes a dark theme. Coffee roasters, cocktail bars, cigar lounges and leather goods brands can use it for a warm, low-lit look.
Espresso palette in use
Set headings and body text in #D4956A on a #1A0A00 background. #9C5B2C makes the button color, and #3D1F08 and #6B3A1F are good for cards and borders.
This pair measures 7.63:1, so it works for body text too. The button uses #9C5B2C with white text.
ButtonGood for
- Coffee roaster website
- Cocktail bar menu
- Leather goods branding
- Cafe app dark theme
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 |
|---|---|---|---|
#1A0A00 | #D4956A | 7.63:1 | AAA |
#3D1F08 | #D4956A | 5.94:1 | AA |
#6B3A1F | #D4956A | 3.69:1 | AA large |
#1A0A00 | #9C5B2C | 3.62:1 | AA large |
Espresso palette as code
CSS variables
:root {
--espresso-1: #1A0A00;
--espresso-2: #3D1F08;
--espresso-3: #6B3A1F;
--espresso-4: #9C5B2C;
--espresso-5: #D4956A;
}Tailwind v4
@theme {
--color-espresso-1: #1A0A00;
--color-espresso-2: #3D1F08;
--color-espresso-3: #6B3A1F;
--color-espresso-4: #9C5B2C;
--color-espresso-5: #D4956A;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'espresso': {
100: '#1A0A00',
200: '#3D1F08',
300: '#6B3A1F',
400: '#9C5B2C',
500: '#D4956A',
},SCSS
$espresso-1: #1A0A00;
$espresso-2: #3D1F08;
$espresso-3: #6B3A1F;
$espresso-4: #9C5B2C;
$espresso-5: #D4956A;JSON
["#1A0A00","#3D1F08","#6B3A1F","#9C5B2C","#D4956A"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.