Back to palettes

Palette

Pale Cherry Blossom

Delicate and airy, like the ephemeral beauty of cherry blossoms against a soft, pale sky.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pale Cherry Blossom 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 Pale Cherry Blossom.

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

Data visualization

#FFE4E1#FFC0CB#F8BBD0#E0BBE4#C6A5CB

Palette guide

How to use Pale Cherry Blossom

Overview

The Pale Cherry Blossom palette is delicate and airy, capturing the ephemeral beauty of cherry blossoms against a soft, pale sky. This scheme features a range of gentle pinks and purples, from the almost-white #FFE4E1 and the classic #FFC0CB, to the inviting #F8BBD0, and the subtle lavender tones of #E0BBE4 and #C6A5CB. It's an ideal choice for designers and developers aiming to create a romantic, soft, and tranquil atmosphere. The palette is versatile for projects that require a touch of elegance, femininity, and the fresh, calming essence of spring, evoking a dreamlike quality.

Best used for

  • Spring fashion and beauty brands
  • Wedding themes and bridal decor
  • Cosmetics and skincare packaging
  • Baby apparel and nursery design
  • Romantic branding and stationery
  • Confectionery and dessert shops

Suggested color roles

primary

Use #FFC0CB as a classic soft pink for main content areas or a prominent brand color, conveying tenderness.

secondary

Employ #F8BBD0 for supporting elements or backgrounds, offering a slightly deeper, warm tone.

accent

Highlight subtle details or interactive elements with #E0BBE4 or #C6A5CB, adding a touch of sophisticated lavender.

background

Utilize #FFE4E1 as the lightest, airy base for backgrounds, creating a spacious and delicate canvas.

text

Pair with a dark gray or soft plum, such as #666666, for optimal readability against these very pale hues.

Accessibility notes

  • Low contrast between most colors; dark text is essential for all content.
  • Avoid using light-colored text on any of these pale pinks and purples.
  • Use larger font sizes and clear typography for important text to improve readability.
  • Ensure interactive elements have strong visual indicators beyond color, like underlines or bolding.

Recommended combinations

Blossom Hues

Ideal for main backgrounds, soft gradients, or large decorative areas, creating an ethereal feel.

#FFE4E1 · #FFC0CB · #F8BBD0

Floral Depth

Excellent for headers, illustrative elements, or sections that require a gentle, layered depth.

#F8BBD0 · #E0BBE4 · #C6A5CB

Spring Duo

Suitable for UI accents, delicate patterns, or elements where subtle differentiation is desired.

#FFC0CB · #E0BBE4 · #FFE4E1

CSS variables

:root {
  --pale-cherry-blossom-1: #FFE4E1;
  --pale-cherry-blossom-2: #FFC0CB;
  --pale-cherry-blossom-3: #F8BBD0;
  --pale-cherry-blossom-4: #E0BBE4;
  --pale-cherry-blossom-5: #C6A5CB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pale-cherry-blossom": {
        1: "#FFE4E1",
        2: "#FFC0CB",
        3: "#F8BBD0",
        4: "#E0BBE4",
        5: "#C6A5CB",
      }
    }
  }
}

Related searches

cherry blossom palettesoft pink purple colorspastel floral schemeromantic UI designdelicate spring tones

Palette colors

Hex values

Color 1#FFE4E1
·
Color 2#FFC0CB
·
Color 3#F8BBD0
·
Color 4#E0BBE4
·
Color 5#C6A5CB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.3:1Fail
1.4:1Fail
1.8:1Fail
2
1.3:1Fail
1:1Fail
1.1:1Fail
1.4:1Fail
3
1.3:1Fail
1:1Fail
1:1Fail
1.3:1Fail
4
1.4:1Fail
1.1:1Fail
1:1Fail
1.3:1Fail
5
1.8:1Fail
1.4:1Fail
1.3:1Fail
1.3:1Fail

Similar palettes

More like Pale Cherry Blossom

View all pastel