Cinnamon color palette
Ground spice and warm bread. #D2691E is the cinnamon itself, #A0522D and #8B4513 are the deeper bark browns, and #CD853F and #F4A460 are the toasted, sugary tones. It's a cozy, kitchen-warm palette with no cool colors and no true light or dark extreme, so it pairs best with cream and espresso brown from outside the set. Bakeries and candle makers will reach for it every holiday season.
Cinnamon palette in use
On a cream page, put headings in #8B4513 and use #D2691E for buttons. #F4A460 and #CD853F suit cards and seasonal illustrations, and #A0522D works for borders and hover states.
This pair measures 10.32:1, so it works for body text too. The button uses #D2691E with black text.
ButtonGood for
- Christmas cookie recipe card
- Scented candle label
- Spiced tea packaging
- Cinnamon roll shop
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 |
|---|---|---|---|
#8B4513 | #F4A460 | 3.49:1 | AA large |
Cinnamon palette as code
CSS variables
:root {
--cinnamon-1: #D2691E;
--cinnamon-2: #A0522D;
--cinnamon-3: #8B4513;
--cinnamon-4: #CD853F;
--cinnamon-5: #F4A460;
}Tailwind v4
@theme {
--color-cinnamon-1: #D2691E;
--color-cinnamon-2: #A0522D;
--color-cinnamon-3: #8B4513;
--color-cinnamon-4: #CD853F;
--color-cinnamon-5: #F4A460;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'cinnamon': {
100: '#D2691E',
200: '#A0522D',
300: '#8B4513',
400: '#CD853F',
500: '#F4A460',
},SCSS
$cinnamon-1: #D2691E;
$cinnamon-2: #A0522D;
$cinnamon-3: #8B4513;
$cinnamon-4: #CD853F;
$cinnamon-5: #F4A460;JSON
["#D2691E","#A0522D","#8B4513","#CD853F","#F4A460"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.