Palette

Sakura Petal Whisper

A tender collection of pinks, reflecting the fragile beauty and ephemeral grace of cherry blossom petals.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sakura Petal 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 Sakura Petal Whisper.

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

Data visualization

#FCE4EC#F8BBD0#F48FB1#EC407A#D81B60

Palette guide

How to use Sakura Petal Whisper

Overview

The "Sakura Petal Whisper" palette captures the tender, ephemeral grace of cherry blossom petals with a vibrant yet delicate range of pinks. Starting with the airy #FCE4EC and progressing to the rich #D81B60, this collection offers a dynamic spectrum perfect for evoking romance, femininity, and sophistication. The gradual transition from soft pastels like #F8BBD0 to more saturated hues like #EC407A allows for expressive designs that maintain harmony. This palette is an excellent choice for projects seeking to convey beauty, charm, and a modern elegance with a touch of vibrancy.

Best used for

High-end beauty and cosmetics branding
Fashion retail websites and campaigns
Romantic and elegant event invitations
Digital interfaces for feminine apps
Packaging for luxury confectionery
Lifestyle and wellness brand identity

Suggested color roles

primary

A very light, blush pink (#FCE4EC), serving as a clean and inviting background or base for content.

secondary

A soft, mid-tone pink (#F8BBD0), ideal for secondary elements, card backgrounds, or subtle accents.

accent

The deepest, most vibrant pink (#D81B60), perfect for calls-to-action, important highlights, or brand logos.

background

Establishes a light, airy foundation (#FCE4EC), allowing the more saturated pinks to pop.

text

A vibrant pink (#EC407A), suitable for headings or large display text. For body text, use a dark gray or black for optimal legibility.

Accessibility notes

Ensure sufficient contrast for text against backgrounds, especially when using lighter pinks.
#D81B60 and #EC407A offer good contrast for text on #FCE4EC or #F8BBD0.
Lighter shades like #FCE4EC and #F8BBD0 should not be used for small body text unless paired with very dark text.
Always use a contrast checker to confirm WCAG compliance for all text and interactive elements.

Recommended combinations

Soft Gradient

Creates a gentle, sophisticated background or layered UI effect.

#FCE4EC · #F8BBD0 · #F48FB1

Vibrant Pop

Use the lightest for background, and the two deepest for strong calls-to-action or key information.

#FCE4EC · #D81B60 · #EC407A

Interactive States

Ideal for button states (normal, hover, active) to indicate interaction while maintaining brand consistency.

#F48FB1 · #EC407A · #D81B60

CSS variables

:root {
  --sakura-petal-whisper-1: #FCE4EC;
  --sakura-petal-whisper-2: #F8BBD0;
  --sakura-petal-whisper-3: #F48FB1;
  --sakura-petal-whisper-4: #EC407A;
  --sakura-petal-whisper-5: #D81B60;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-petal-whisper": {
        1: "#FCE4EC",
        2: "#F8BBD0",
        3: "#F48FB1",
        4: "#EC407A",
        5: "#D81B60",
      }
    }
  }
}

Hex values

Color 1#FCE4EC

Color 2#F8BBD0

Color 3#F48FB1

Color 4#EC407A

Color 5#D81B60

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

3.1:1AA18

4.1:1AA18

1.3:1Fail

1.4:1Fail

2.3:1Fail

3.1:1AA18

1.9:1Fail

1.4:1Fail

1.7:1Fail

2.2:1Fail

3.1:1AA18

2.3:1Fail

1.7:1Fail

1.3:1Fail

4.1:1AA18

3.1:1AA18

2.2:1Fail

1.3:1Fail

Similar palettes

More like Sakura Petal Whisper

Sakura Petal Whisper

See it in context.

Ready when you are.

Built with Sakura Petal Whisper.

How to use Sakura Petal Whisper

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Gradient

Vibrant Pop

Interactive States

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sakura Petal Whisper