Back to palettes

Palette

Sakura Petal Whisper

Delicately soft and romantic hues reflecting the fleeting beauty of cherry blossoms in spring.

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

#FADADD#F4C2C2#E6A7A7#D98888#D26969

Palette guide

How to use Sakura Petal Whisper

Overview

The "Sakura Petal Whisper" palette presents a harmonious gradient of soft to medium pinks, capturing the delicate and romantic essence of cherry blossoms. From the light, airy #FADADD to the deeper, more impactful #D26969, these hues provide a versatile range for creating inviting and warm designs. The subtle shifts, such as between #F4C2C2 and #E6A7A7, allow for nuanced depth without losing the overall gentle aesthetic. This palette is excellent for conveying tenderness, beauty, and a touch of nostalgic charm, perfect for projects that aim for a soft, feminine, or elegant feel.

Best used for

  • Romantic wedding stationery and invitations
  • Beauty and cosmetic brand identity
  • Feminine fashion or lifestyle blogs
  • Dessert and patisserie branding
  • Children's clothing or toy design
  • Soft, inviting UI/UX themes

Suggested color roles

primary

A very light, almost white pink (#FADADD), ideal for clean backgrounds or large content areas to keep the design airy.

secondary

A slightly deeper pink (#F4C2C2), suitable for secondary sections, headers, or subtle decorative elements.

accent

The deepest pink (#D26969), offering a warm, inviting accent for calls-to-action, important highlights, or small graphic elements.

background

Provides a soft, clean base (#FADADD) that allows other colors to gently emerge, maintaining a light overall feel.

text

A mid-tone pink (#D98888), suitable for subheadings or larger display text. For body text, use a dark charcoal or black for optimal readability.

Accessibility notes

  • Text contrast can be challenging; ensure #D26969 or a darker color is used for text on lighter backgrounds.
  • Avoid using #FADADD or #F4C2C2 for small body text on similarly light backgrounds.
  • Use a contrast checker to verify all text and interactive element color pairings meet WCAG standards.
  • Darker shades like #D98888 can work for larger text on #FADADD, but black is usually safer for body copy.

Recommended combinations

Gentle Gradient

Perfect for subtle background gradients or layered UI elements to create depth.

#FADADD · #F4C2C2 · #E6A7A7

Highlight & Base

Use the lightest for background, darkest for calls-to-action, and mid-tone for subheadings.

#FADADD · #D26969 · #D98888

Soft Interaction

For interactive elements like buttons (normal, hover, active states) maintaining a soft feel.

#F4C2C2 · #E6A7A7 · #D98888

CSS variables

:root {
  --sakura-petal-whisper-2-1: #FADADD;
  --sakura-petal-whisper-2-2: #F4C2C2;
  --sakura-petal-whisper-2-3: #E6A7A7;
  --sakura-petal-whisper-2-4: #D98888;
  --sakura-petal-whisper-2-5: #D26969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-petal-whisper-2": {
        1: "#FADADD",
        2: "#F4C2C2",
        3: "#E6A7A7",
        4: "#D98888",
        5: "#D26969",
      }
    }
  }
}

Related searches

soft pink color schemecherry blossom aestheticromantic pastel colorsfeminine branding palettelight pink web design

Palette colors

Hex values

Color 1#FADADD
·
Color 2#F4C2C2
·
Color 3#E6A7A7
·
Color 4#D98888
·
Color 5#D26969
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
2.1:1Fail
2.7:1Fail
2
1.2:1Fail
1.3:1Fail
1.7:1Fail
2.2:1Fail
3
1.5:1Fail
1.3:1Fail
1.3:1Fail
1.8:1Fail
4
2.1:1Fail
1.7:1Fail
1.3:1Fail
1.3:1Fail
5
2.7:1Fail
2.2:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Sakura Petal Whisper

View all pastel