Back to palettes

Palette

Cherry Blossom Cloud

A soft, delicate blend of pinks, reminiscent of fleeting cherry blossom clouds in springtime.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cherry Blossom Cloud reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Cherry Blossom Cloud.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#FDEFF3#F8D5E4#F1A9C4#E87E9F#DF547E

Palette guide

How to use Cherry Blossom Cloud

Overview

The Cherry Blossom Cloud palette presents a delicate, gradually deepening gradient of pinks, capturing the fleeting beauty of spring blossoms. Starting with the airy #FDEFF3, moving through #F8D5E4 and #F1A9C4, and culminating in the richer #E87E9F and #DF547E, this palette offers a sophisticated range of blush tones. It's perfectly suited for designers who want to convey softness, romance, and elegance, with enough depth to create visual hierarchy. Ideal for fashion, beauty, or lifestyle branding, it ensures a refined and inviting aesthetic.

Best used for

  • High-end cosmetic branding
  • Fashion editorial layouts
  • Luxury wedding designs
  • Feminine blog and website themes
  • Delicate product packaging
  • Romantic digital art

Suggested color roles

primary

#F1A9C4 - A balanced mid-pink, excellent for primary branding elements, headers, or main content blocks, offering soft prominence.

secondary

#F8D5E4 - A lighter, supportive pink ideal for subheadings, background textures, or secondary UI elements to maintain softness.

accent

#DF547E - The deepest, most vibrant pink in the palette, perfect for calls-to-action, important icons, or impactful decorative details.

background

#FDEFF3 - The lightest, almost white pink, providing an airy, clean canvas that allows other colors to softly emerge.

text

A deep, rich charcoal grey ensures optimal readability and a sophisticated contrast against the delicate pinks, avoiding harshness.

Accessibility notes

  • Ensure sufficient contrast for text when using #F1A9C4 or #F8D5E4 on very light backgrounds like #FDEFF3.
  • Prioritize #E87E9F or #DF547E for interactive elements to improve visibility and clickability.
  • Avoid using the lightest shades for critical text elements; reserve them for backgrounds or large decorative areas.
  • For body text, a dark grey or black on #FDEFF3 or #F8D5E4 will offer the best readability.

Recommended combinations

Soft Transition

Ideal for subtle background gradients or layered graphic elements, creating a gentle, flowing visual effect.

#FDEFF3 · #F8D5E4 · #F1A9C4

Elegant Emphasis

Use #FDEFF3 as a clean background, #F1A9C4 for main content, and #DF547E for impactful calls-to-action or highlights.

#FDEFF3 · #F1A9C4 · #DF547E

Blossom Depth

Excellent for creating visual depth in illustrations or complex UI components, progressing from soft to deep pink.

#F8D5E4 · #E87E9F · #DF547E

CSS variables

:root {
  --cherry-blossom-cloud-3-1: #FDEFF3;
  --cherry-blossom-cloud-3-2: #F8D5E4;
  --cherry-blossom-cloud-3-3: #F1A9C4;
  --cherry-blossom-cloud-3-4: #E87E9F;
  --cherry-blossom-cloud-3-5: #DF547E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cherry-blossom-cloud-3": {
        1: "#FDEFF3",
        2: "#F8D5E4",
        3: "#F1A9C4",
        4: "#E87E9F",
        5: "#DF547E",
      }
    }
  }
}

Related searches

blush pink color schemegradient pink palettesoft romantic colorselegant spring designfeminine brand colors

Palette colors

Hex values

Color 1#FDEFF3
·
Color 2#F8D5E4
·
Color 3#F1A9C4
·
Color 4#E87E9F
·
Color 5#DF547E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.7:1Fail
2.4:1Fail
3.3:1AA18
2
1.2:1Fail
1.4:1Fail
2:1Fail
2.7:1Fail
3
1.7:1Fail
1.4:1Fail
1.4:1Fail
2:1Fail
4
2.4:1Fail
2:1Fail
1.4:1Fail
1.4:1Fail
5
3.3:1AA18
2.7:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Cherry Blossom Cloud

View all pastel