Caramel Latte color palette
Foam on top, caramel at the bottom: a creamy off-white #FFF8E7, wheat #F5DEB3, light tan, caramel #C8A060 and a dark golden brown, #8B6914. It's warm and soft, with more yellow in it than a typical coffee palette. The lightest and darkest shades pair well for text. Coffee shops and candle makers will find it ready to use.
Caramel Latte palette in use
Headings and text in #8B6914 work on a #FFF8E7 background. #C8A060 is the button color, and #F5DEB3 and #DEB887 suit cards, dividers and menus.
This pair measures 4.80:1, so it works for body text too. The button uses #C8A060 with black text.
ButtonGood for
- Coffee shop menu
- Candle brand packaging
- Cozy lifestyle blog
- Fall newsletter
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 |
|---|---|---|---|
#8B6914 | #FFF8E7 | 4.80:1 | AA |
#8B6914 | #F5DEB3 | 3.87:1 | AA large |
Caramel Latte palette as code
CSS variables
:root {
--caramel-latte-1: #FFF8E7;
--caramel-latte-2: #F5DEB3;
--caramel-latte-3: #DEB887;
--caramel-latte-4: #C8A060;
--caramel-latte-5: #8B6914;
}Tailwind v4
@theme {
--color-caramel-latte-1: #FFF8E7;
--color-caramel-latte-2: #F5DEB3;
--color-caramel-latte-3: #DEB887;
--color-caramel-latte-4: #C8A060;
--color-caramel-latte-5: #8B6914;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'caramel-latte': {
100: '#FFF8E7',
200: '#F5DEB3',
300: '#DEB887',
400: '#C8A060',
500: '#8B6914',
},SCSS
$caramel-latte-1: #FFF8E7;
$caramel-latte-2: #F5DEB3;
$caramel-latte-3: #DEB887;
$caramel-latte-4: #C8A060;
$caramel-latte-5: #8B6914;JSON
["#FFF8E7","#F5DEB3","#DEB887","#C8A060","#8B6914"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.