Dark Chocolate color palette
Four browns move from almost-black cocoa #2C1503 to a toasted caramel, and then the set jumps to peach cream #FFDAB9. That one light shade is what makes the palette practical, since it can sit under dark text or on top of a dark background. The mood is indulgent and warm, like a box of truffles. Chocolatiers and bakeries can lift it straight onto packaging and gift boxes.
Dark Chocolate palette in use
For a light layout, use #FFDAB9 as the background with #2C1503 text. For a dark one, put #FFDAB9 type on #2C1503 or #5C2E07. #D2691E is the button color either way.
This pair measures 13.14:1, so it works for body text too. The button uses #D2691E with black text.
ButtonGood for
- Chocolatier website
- Bakery packaging
- Whiskey label
- Autumn gift box
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 |
|---|---|---|---|
#2C1503 | #FFDAB9 | 13.14:1 | AAA |
#5C2E07 | #FFDAB9 | 8.64:1 | AAA |
#8B4513 | #FFDAB9 | 5.40:1 | AA |
#2C1503 | #D2691E | 4.75:1 | AA |
#5C2E07 | #D2691E | 3.12:1 | AA large |
Dark Chocolate palette as code
CSS variables
:root {
--dark-chocolate-1: #2C1503;
--dark-chocolate-2: #5C2E07;
--dark-chocolate-3: #8B4513;
--dark-chocolate-4: #D2691E;
--dark-chocolate-5: #FFDAB9;
}Tailwind v4
@theme {
--color-dark-chocolate-1: #2C1503;
--color-dark-chocolate-2: #5C2E07;
--color-dark-chocolate-3: #8B4513;
--color-dark-chocolate-4: #D2691E;
--color-dark-chocolate-5: #FFDAB9;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'dark-chocolate': {
100: '#2C1503',
200: '#5C2E07',
300: '#8B4513',
400: '#D2691E',
500: '#FFDAB9',
},SCSS
$dark-chocolate-1: #2C1503;
$dark-chocolate-2: #5C2E07;
$dark-chocolate-3: #8B4513;
$dark-chocolate-4: #D2691E;
$dark-chocolate-5: #FFDAB9;JSON
["#2C1503","#5C2E07","#8B4513","#D2691E","#FFDAB9"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.