pastelwarmmonochrome
Cherry Blossom Color Palette
Cherry Blossom is a pastel, warm and monochrome color palette of 5 colors: Lavender Blush (#fff0f3), Bubblegum (#ffccd5), Light Pink (#ffb3c1), Flamingo (#ff8fa3) and Crimson (#c9184a). Its dominant hue is pink.
The darkest color, Crimson, on the lightest, Lavender Blush, gives a 5.11:1 contrast ratio — enough for body text at WCAG AA. 1 pair in this palette passes AA for normal text. Crimson (#c9184a) is its most saturated color and a natural choice for buttons and links.
Colors
- Lavender Blush
- Bubblegum
- Light Pink
- Flamingo
- Crimson
CSS Output
:root {
--cherry-blossom-1: #fff0f3;
--cherry-blossom-2: #ffccd5;
--cherry-blossom-3: #ffb3c1;
--cherry-blossom-4: #ff8fa3;
--cherry-blossom-5: #c9184a;
}Cherry Blossom on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Crimson on Lavender Blush#c9184a on #fff0f35.11:1AA
- Crimson on Bubblegum#c9184a on #ffccd53.99:1AA Large
- Crimson on Light Pink#c9184a on #ffb3c13.35:1AA Large