Bourbon color palette
Whiskey held up to the light: charred barrel #4B2200, mahogany #7A3B0E, copper, rich amber #D4882E and a pale honey, #F5C97F, at the edge of the glass. It's a warm, saturated set with real depth at the dark end, and it works in either direction, dark on light or light on dark. Distilleries and steakhouses can put it straight on labels and menus.
Bourbon palette in use
Use #4B2200 as the background with #F5C97F text, or reverse that for a light page. #D4882E is the button color, and #A6521E and #7A3B0E suit borders and cards.
This pair measures 8.86:1, so it works for body text too. The button uses #D4882E with black text.
ButtonGood for
- Distillery website
- Steakhouse menu
- Cigar bar branding
- Leather workshop
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 |
|---|---|---|---|
#4B2200 | #F5C97F | 8.86:1 | AAA |
#7A3B0E | #F5C97F | 5.50:1 | AA |
#4B2200 | #D4882E | 4.81:1 | AA |
#A6521E | #F5C97F | 3.52:1 | AA large |
Bourbon palette as code
CSS variables
:root {
--bourbon-1: #4B2200;
--bourbon-2: #7A3B0E;
--bourbon-3: #A6521E;
--bourbon-4: #D4882E;
--bourbon-5: #F5C97F;
}Tailwind v4
@theme {
--color-bourbon-1: #4B2200;
--color-bourbon-2: #7A3B0E;
--color-bourbon-3: #A6521E;
--color-bourbon-4: #D4882E;
--color-bourbon-5: #F5C97F;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'bourbon': {
100: '#4B2200',
200: '#7A3B0E',
300: '#A6521E',
400: '#D4882E',
500: '#F5C97F',
},SCSS
$bourbon-1: #4B2200;
$bourbon-2: #7A3B0E;
$bourbon-3: #A6521E;
$bourbon-4: #D4882E;
$bourbon-5: #F5C97F;JSON
["#4B2200","#7A3B0E","#A6521E","#D4882E","#F5C97F"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.