Dusty Pink color palette
Pink with the brightness taken out, the color of faded roses and old velvet. All five sit close together, from old rose #C9A0A0 to a pale blush, #F5E0E0, with low saturation throughout. The narrow range keeps everything soft and calm, but it means text needs a deep burgundy or charcoal from outside the set. Bridal shops and florists can use it as a quiet backdrop for photos.
Dusty Pink palette in use
Lay out the page on #F5E0E0 with #EAD0D0 cards. #C9A0A0 works for borders and for buttons with dark labels, and body text belongs in deep burgundy or charcoal.
This pair measures 16.62:1, so it works for body text too. The button uses #C9A0A0 with black text.
ButtonGood for
- Bridal shop website
- Interior stylist portfolio
- Photo album layout
- Florist price list
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.
Dusty Pink palette as code
CSS variables
:root {
--dusty-pink-1: #C9A0A0;
--dusty-pink-2: #D4B0B0;
--dusty-pink-3: #DFC0C0;
--dusty-pink-4: #EAD0D0;
--dusty-pink-5: #F5E0E0;
}Tailwind v4
@theme {
--color-dusty-pink-1: #C9A0A0;
--color-dusty-pink-2: #D4B0B0;
--color-dusty-pink-3: #DFC0C0;
--color-dusty-pink-4: #EAD0D0;
--color-dusty-pink-5: #F5E0E0;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'dusty-pink': {
100: '#C9A0A0',
200: '#D4B0B0',
300: '#DFC0C0',
400: '#EAD0D0',
500: '#F5E0E0',
},SCSS
$dusty-pink-1: #C9A0A0;
$dusty-pink-2: #D4B0B0;
$dusty-pink-3: #DFC0C0;
$dusty-pink-4: #EAD0D0;
$dusty-pink-5: #F5E0E0;JSON
["#C9A0A0","#D4B0B0","#DFC0C0","#EAD0D0","#F5E0E0"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.