Palette

Sakura Petals

A delicate gradient of pinks, capturing the ephemeral beauty and gentle blush of sakura petals.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FCE4EC#F8BBD0#F48FB1#EC407A#C2185B

Palette guide

How to use Sakura Petals

Overview

The "Sakura Petals" palette offers a beautiful, delicate gradient of pinks, evolving from soft pastels to rich, deep fuchsia tones. From the airy #FCE4EC to the profound #C2185B, this collection perfectly captures the ephemeral beauty and gentle blush of cherry blossoms. The transition through hues like #F8BBD0 and #EC407A provides versatility for creating designs that are both elegant and impactful. This palette is an excellent choice for projects aiming to convey femininity, romance, and a sophisticated charm, allowing for expressive design while maintaining a cohesive, harmonious feel.

Best used for

Bridal and wedding industry branding
High-end cosmetic product packaging
Fashion-forward websites and editorials
Event decor and party invitations
Luxury gift packaging design
Feminine lifestyle and beauty content

Suggested color roles

primary

A very light, almost white pink (#FCE4EC), ideal for clean backgrounds or spacious content areas to maintain an airy feel.

secondary

A soft, mid-tone pink (#F8BBD0), suitable for secondary elements, section dividers, or subtle graphic accents.

accent

The deepest, most intense pink (#C2185B), perfect for bold calls-to-action, important links, or brand highlights.

background

Provides a light, pristine canvas (#FCE4EC) that enhances the vibrancy of the deeper pinks.

text

A lively pink (#EC407A), suitable for prominent headings or larger display text. For body text, a dark gray or black is recommended for readability.

Accessibility notes

Prioritize high contrast for text; #C2185B or #EC407A on #FCE4EC provides good readability.
Avoid using lighter shades like #FCE4EC or #F8BBD0 for small text on light backgrounds.
Always check contrast ratios with a WCAG tool to ensure accessibility for all users.
Reserve very light colors for large decorative text if contrast is inherently low.

Recommended combinations

Petal Softness

Creates a gentle, layered effect for backgrounds or subtle UI elements.

#FCE4EC · #F8BBD0 · #F48FB1

Deep Blush

Use the lightest as a base, with the two deepest for strong visual impact and calls-to-action.

#FCE4EC · #EC407A · #C2185B

Interactive Palette

Excellent for button states (normal, hover, active) to show interaction clearly.

#F48FB1 · #EC407A · #C2185B

CSS variables

:root {
  --sakura-petals-2-1: #FCE4EC;
  --sakura-petals-2-2: #F8BBD0;
  --sakura-petals-2-3: #F48FB1;
  --sakura-petals-2-4: #EC407A;
  --sakura-petals-2-5: #C2185B;
}

Tailwind config

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

Hex values

Color 1#FCE4EC

Color 2#F8BBD0

Color 3#F48FB1

Color 4#EC407A

Color 5#C2185B

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

3.1:1AA18

4.9:1AA

1.3:1Fail

1.4:1Fail

2.3:1Fail

3.6:1AA18

1.9:1Fail

1.4:1Fail

1.7:1Fail

2.6:1Fail

3.1:1AA18

2.3:1Fail

1.7:1Fail

1.6:1Fail

4.9:1AA

3.6:1AA18

2.6:1Fail

1.6:1Fail

Similar palettes

More like Sakura Petals

View all pastel

Sakura Petal Breeze

Cherry Bloom Serenity

Cherry Blossom Bloom

Cherry Blossom Breeze

Cherry Blossom Cloud

Cherry Blossom Grace