Macarons color palette
These five shades look like a bakery display box of French macarons: rose, apricot, vanilla cream #FDEBD0, pistachio #D5F5E3 and powder blue. Next to brighter candy pastels they're a touch grayed, which makes them feel more refined. All five are light, so plan on a deep brown or charcoal for text. It's an easy choice for a patisserie's packaging or a Mother's Day email.
Macarons palette in use
A #FDEBD0 background with #D5F5E3 or #D6EAF8 for alternating sections keeps the page light. #F7C5CC and #F5D0A9 make soft button and badge fills with dark brown text on top.
This pair measures 17.99:1, so it works for body text too. The button uses #F5D0A9 with black text.
ButtonGood for
- Patisserie website
- Gift boutique packaging
- Wedding planner brochure
- Mother's Day campaign
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Macarons palette as code
CSS variables
:root {
--macarons-1: #F7C5CC;
--macarons-2: #F5D0A9;
--macarons-3: #FDEBD0;
--macarons-4: #D5F5E3;
--macarons-5: #D6EAF8;
}Tailwind v4
@theme {
--color-macarons-1: #F7C5CC;
--color-macarons-2: #F5D0A9;
--color-macarons-3: #FDEBD0;
--color-macarons-4: #D5F5E3;
--color-macarons-5: #D6EAF8;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'macarons': {
100: '#F7C5CC',
200: '#F5D0A9',
300: '#FDEBD0',
400: '#D5F5E3',
500: '#D6EAF8',
},SCSS
$macarons-1: #F7C5CC;
$macarons-2: #F5D0A9;
$macarons-3: #FDEBD0;
$macarons-4: #D5F5E3;
$macarons-5: #D6EAF8;JSON
["#F7C5CC","#F5D0A9","#FDEBD0","#D5F5E3","#D6EAF8"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.