Palette

Cherry Bloom Whisper

A gentle drift of delicate cherry blossom petals, soft and ephemeral, carried on a spring breeze.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cherry Bloom Whisper 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 Bloom Whisper.

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

Data visualization

#FEE7ED#FDD6E3#FCB8D0#FB99BC#FA79A6

Palette guide

How to use Cherry Bloom Whisper

Overview

The Cherry Bloom Whisper palette offers a gentle drift of delicate cherry blossom petals, soft and ephemeral, carried on a spring breeze. This collection features a subtle #FEE7ED and #FDD6E3, transitioning through a blush #FCB8D0, and deepening into richer pinks #FB99BC and #FA79A6. For designers and developers, this palette provides a truly delicate and romantic aesthetic, perfect for projects that aim to evoke tenderness, fleeting beauty, and natural grace. Its harmonious gradient of soft pinks offers versatility for creating inviting branding, serene interfaces, or charming digital experiences that resonate with a sense of peace and feminine elegance.

Best used for

Wedding and event planning websites
Feminine beauty and skincare brands
Children's clothing and toy design
Spring-themed art and photography
Boutique floral shops and services
Lifestyle blogs with a romantic touch

Suggested color roles

primary

Utilize #FB99BC as the dominant brand color for headers, important call-to-action buttons, and key interactive elements.

secondary

Employ #FA79A6 for secondary navigation, prominent content blocks, or as a deeper, richer accent.

accent

Apply #FCB8D0 for delicate interactive states, subtle highlights, or to add a touch of soft blush.

background

Choose #FEE7ED or #FDD6E3 for clean, airy, and inviting backgrounds.

text

For light backgrounds, use a dark charcoal or deep plum text color. For headings on #FB99BC, a deep charcoal is recommended.

Accessibility notes

Ensure a dark charcoal text color on #FEE7ED or #FDD6E3 backgrounds meets WCAG contrast standards for body text.
Avoid using #FCB8D0 text on #FDD6E3 backgrounds for small text, as contrast will be insufficient.
Use #FB99BC for headings against a very light background, but ensure sufficient contrast with a dark text color.
Test interactive elements with #FCB8D0 against adjacent lighter tones to ensure sufficient visual distinction.

Recommended combinations

Petal Softness

Ideal for main content areas: vibrant pink background, light text, and a deeper pink for subheadings.

#FB99BC · #FEE7ED · #FA79A6

Romantic Layers

Create subtle layered effects in UI cards, panels, or background patterns, mimicking delicate petals.

#FDD6E3 · #FCB8D0 · #FB99BC

Whisper Read

Use #FA79A6 for soft visual elements on a #FEE7ED canvas, with #FCB8D0 for delicate details or highlights.

#FEE7ED · #FA79A6 · #FCB8D0

CSS variables

:root {
  --cherry-bloom-whisper-1: #FEE7ED;
  --cherry-bloom-whisper-2: #FDD6E3;
  --cherry-bloom-whisper-3: #FCB8D0;
  --cherry-bloom-whisper-4: #FB99BC;
  --cherry-bloom-whisper-5: #FA79A6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cherry-bloom-whisper": {
        1: "#FEE7ED",
        2: "#FDD6E3",
        3: "#FCB8D0",
        4: "#FB99BC",
        5: "#FA79A6",
      }
    }
  }
}

Hex values

Color 1#FEE7ED

Color 2#FDD6E3

Color 3#FCB8D0

Color 4#FB99BC

Color 5#FA79A6

Accessibility

Contrast checker

1.1:1Fail

1.4:1Fail

1.7:1Fail

2.1:1Fail

1.1:1Fail

1.2:1Fail

1.5:1Fail

1.9:1Fail

1.4:1Fail

1.2:1Fail

1.5:1Fail

1.7:1Fail

1.5:1Fail

1.2:1Fail

2.1:1Fail

1.9:1Fail

1.5:1Fail

1.2:1Fail

Similar palettes

More like Cherry Bloom Whisper

Cherry Bloom Whisper

See it in context.

Ready when you are.

Built with Cherry Bloom Whisper.

How to use Cherry Bloom Whisper

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Petal Softness

Romantic Layers

Whisper Read

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cherry Bloom Whisper