Cherry Blossom color palette
All five colors belong to the pink-red family, and all are highly saturated, so the set reads sweet and energetic. Petal pink #FFB7C5 is the lightest and raspberry #C9184A anchors the dark end, with three brighter pinks between them. It looks best on a plain white page where the pinks have room. A nail salon or a spring sale banner would wear it well, and it's an easy pick for Valentine's Day.
Cherry Blossom palette in use
On a white page, set headings and links in #C9184A and use #FF4D6D for buttons. #FFB7C5 works for tags, card backgrounds and dividers, and #FF8FAB for hover states.
This pair measures 12.83:1, so it works for body text too. The button uses #FF4D6D with black text.
ButtonGood for
- Spring sale banner
- Nail salon branding
- Bakery packaging
- Wedding invitation suite
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 |
|---|---|---|---|
#C9184A | #FFB7C5 | 3.45:1 | AA large |
Cherry Blossom palette as code
CSS variables
:root {
--cherry-blossom-1: #FFB7C5;
--cherry-blossom-2: #FF8FAB;
--cherry-blossom-3: #FB6F92;
--cherry-blossom-4: #FF4D6D;
--cherry-blossom-5: #C9184A;
}Tailwind v4
@theme {
--color-cherry-blossom-1: #FFB7C5;
--color-cherry-blossom-2: #FF8FAB;
--color-cherry-blossom-3: #FB6F92;
--color-cherry-blossom-4: #FF4D6D;
--color-cherry-blossom-5: #C9184A;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'cherry-blossom': {
100: '#FFB7C5',
200: '#FF8FAB',
300: '#FB6F92',
400: '#FF4D6D',
500: '#C9184A',
},SCSS
$cherry-blossom-1: #FFB7C5;
$cherry-blossom-2: #FF8FAB;
$cherry-blossom-3: #FB6F92;
$cherry-blossom-4: #FF4D6D;
$cherry-blossom-5: #C9184A;JSON
["#FFB7C5","#FF8FAB","#FB6F92","#FF4D6D","#C9184A"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.