Sage & Blush color palette
Sage green #B7C9A8 sits beside oatmeal, peachy blush, soft pink and a deeper dusty rose, #D4899A. Everything is muted and on the light side, like dried flowers on a linen tablecloth. Because none of the five is dark, the palette needs a charcoal or deep olive for text. Florists, wedding planners, ceramics shops and lifestyle bloggers will find it easy to live with.
Sage & Blush palette in use
Use #F0D9D0 as the page background with #B7C9A8 and #D4C5B9 for sections and cards. #D4899A is the strongest accent and suits buttons, paired with dark charcoal text.
This pair measures 15.54:1, so it works for body text too. The button uses #D4899A with black text.
ButtonGood for
- Wedding website
- Florist shop branding
- Lifestyle blog theme
- Ceramics shop labels
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.
Sage & Blush palette as code
CSS variables
:root {
--sage-and-blush-1: #B7C9A8;
--sage-and-blush-2: #D4C5B9;
--sage-and-blush-3: #F0D9D0;
--sage-and-blush-4: #E8B4B8;
--sage-and-blush-5: #D4899A;
}Tailwind v4
@theme {
--color-sage-and-blush-1: #B7C9A8;
--color-sage-and-blush-2: #D4C5B9;
--color-sage-and-blush-3: #F0D9D0;
--color-sage-and-blush-4: #E8B4B8;
--color-sage-and-blush-5: #D4899A;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'sage-and-blush': {
100: '#B7C9A8',
200: '#D4C5B9',
300: '#F0D9D0',
400: '#E8B4B8',
500: '#D4899A',
},SCSS
$sage-and-blush-1: #B7C9A8;
$sage-and-blush-2: #D4C5B9;
$sage-and-blush-3: #F0D9D0;
$sage-and-blush-4: #E8B4B8;
$sage-and-blush-5: #D4899A;JSON
["#B7C9A8","#D4C5B9","#F0D9D0","#E8B4B8","#D4899A"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.