ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/Pastel· Curated

Cherry Blossom Haze

Delicate sakura floral palette with petal pink gradients and dreamy spring warmth.

#Pastel#Soft
Open in Generator
COLOR 1
#FFE5EC
Sakura Blossom
COLOR 2
#FFC2D1
Bubblegum
COLOR 3
#FFB3C6
Peony Pink
COLOR 4
#FF8FAB
Flamingo Pink
COLOR 5
#FB6F92
Watermelon Red

Suitable Design Applications

Spring Brand CampaignsJapanese StationeryGentle Skincare ProductsPoetry & Literary Journals

Visual Psychology & Mood

Ephemeral beauty, gentle rebirth, and tender optimism.

Editorial Application Advice

Delicate sakura blossom pink dissolving into soft morning mist gray. Subtle, romantic, and soothing to the senses.

Recommended UI Role Architecture

Optimal visual hierarchy assignment for digital product interfaces:

Primary Canvas Background
#FCF8F9
Card & Elevated Surface
#F7ECF0
Primary Brand CTA Accent
#EC4899
Secondary Accent & Focus
#F472B6
Typography & Headings
#4A2536

Color Values & Codes

HEX · RGB · HSL
rgb(255, 229, 236)hsl(344, 100%, 95%)Color details →
Bubblegum
#FFC2D1
rgb(255, 194, 209)hsl(345, 100%, 88%)Color details →
Peony Pink
#FFB3C6
rgb(255, 179, 198)hsl(345, 100%, 85%)Color details →
rgb(255, 143, 171)hsl(345, 100%, 78%)Color details →
rgb(251, 111, 146)hsl(345, 95%, 71%)Color details →

Open In Design Tools

Palette Generator
Lock & shuffle colors
Contrast Checker
Test WCAG compliance
Shades & Tints
Generate tonal steps
Pastel Palettes
Explore category schemes

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #FFE5EC;
  --color-2: #FFC2D1;
  --color-3: #FFB3C6;
  --color-4: #FF8FAB;
  --color-5: #FB6F92;
}

Role-Based WCAG Contrast Audit

Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:

Sample Text
#FFE5EC on #FF8FAB1.81:1
Large Text Only (Fail)
Sample Text
#FFE5EC on #FB6F922.27:1
Large Text Only (Fail)
Sample Text
#FFC2D1 on #FF8FAB1.42:1
Large Text Only (Fail)
Sample Text
#FFC2D1 on #FB6F921.78:1
Large Text Only (Fail)
Sample Text
#FFB3C6 on #FF8FAB1.28:1
Large Text Only (Fail)
Sample Text
#FFB3C6 on #FB6F921.61:1
Large Text Only (Fail)

Related Palettes in Pastel

Explore Pastel
#F5EEF8Copy
#E8DAEFCopy
#D2B4DECopy
#BB8FCECopy
#8E44ADCopy
cp-featured-25Pastel
Lavender Macaron
PastelFoodCreative
#E8F8F5Copy
#D1F2EBCopy
#A3E4D7Copy
#48C9B0Copy
#16A085Copy
cp-featured-26Pastel
Mint Cream Sorbet
PastelFreshNature
#D6C2A6Copy
#EAE1C3Copy
#D3D799Copy
#EBF1E3Copy
#F6F5F9Copy
cp-0051Pastel
Dreamy Flame
PastelSoftLight
#A5C5D7Copy
#C3D6EBCopy
#A0A8CFCopy
#E5E3F1Copy
#F9F9F5Copy
cp-0052Pastel
Soft Stone
PastelSoftLight

Frequently Asked Questions About Cherry Blossom Haze

Production design guidance and accessibility rules for applying the Cherry Blossom Haze (Pastel) color palette.

What is the recommended role hierarchy for the Cherry Blossom Haze palette?
In digital interface design, allocate #FFE5EC and #FB6F92 for structural surface canvas and typography hierarchy (the 60% and 30% layers of the design), while using standout swatches like #FFC2D1 or #FFB3C6 as your 10% primary action accent for buttons, badges, and interactive highlights.
Are the colors in Cherry Blossom Haze WCAG accessible for web body copy?
Always verify contrast ratios against WCAG 2.2 AA standards (minimum 4.5:1 for regular body copy and 3.0:1 for large text or graphical controls). Consult the Role-Based WCAG Contrast Audit section above to see exact scores for every foreground/background combination in this palette.
How can I export the Cherry Blossom Haze palette to my frontend codebase?
You can copy CSS Custom Properties directly from the CSS Variables code block above, export Tailwind CSS configuration tokens, download a high-resolution PNG card, or open the entire palette inside the interactive Palette Generator to experiment with tints and harmonies.