Palette

Sakura Petal Breeze

Delicate and airy pinks that capture the fleeting, tender beauty of cherry blossom petals dancing in the wind.

PastelCalm5 colors

More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFE4E1#FFB6C1#FFC0CB#DB7093#D8BFD8

Palette guide

How to use Sakura Petal Breeze

Overview

The Sakura Petal Breeze palette evokes the delicate, airy beauty of cherry blossoms with its gentle array of pinks and muted purples. Featuring soft Misty Rose (#FFE4E1), charming Light Pink (#FFB6C1), and a more profound Plum (#DB7093), this palette offers a serene and tender aesthetic. Designers can leverage the ethereal quality of #FFE4E1 for backgrounds, while #D8BFD8 introduces a subtle lavender hint, perfect for adding depth. This guide provides practical application insights for creating harmonious and inviting digital or print experiences.

Best used for

Floral branding and packaging
Wedding invitations and stationery
Beauty and skincare product design
Gentle children's apparel or toys
Spring-themed digital illustrations
Spa or wellness website interfaces

Suggested color roles

primary

Use Plum (#DB7093) for main headers, call-to-action buttons, or key graphical elements to provide a focal point with a touch of sophistication.

secondary

Light Pink (#FFB6C1) is ideal for subheadings, secondary interactive elements, or supporting sections, offering a soft, approachable feel.

accent

Pale Lavender (#D8BFD8) serves as a subtle accent for hover states, delicate icons, or decorative lines, adding a serene counterpoint.

background

Misty Rose (#FFE4E1) provides a soft, airy, and inviting base for pages or sections, ensuring a gentle user experience.

text

For body text, a dark charcoal or deep brown offers optimal readability against the lighter background shades. Use #DB7093 for larger, decorative text.

Accessibility notes

Prioritize dark text (e.g., charcoal or black) on lighter backgrounds like #FFE4E1 for readability.
Contrast between #FFB6C1 and #FFC0CB is low; avoid using them for essential text pairs.
Ensure interactive elements have clear focus states, as color contrast within pastels can be subtle.
Use #DB7093 for larger text elements against the lightest backgrounds to improve visibility.

Recommended combinations

Soft Gradient

Create gentle background gradients or layered visual effects for a smooth transition.

#FFE4E1 · #FFB6C1 · #FFC0CB

Blossom & Stem

Combine for headings and subheadings, where #DB7093 provides a strong presence with #D8BFD8 as a subtle complement.

#DB7093 · #D8BFD8 · #FFB6C1

Delicate Trio

Ideal for subtle UI components, infographics, or background patterns that require a light, airy feel.

#FFE4E1 · #D8BFD8 · #FFB6C1

CSS variables

:root {
  --sakura-petal-breeze-6-1: #FFE4E1;
  --sakura-petal-breeze-6-2: #FFB6C1;
  --sakura-petal-breeze-6-3: #FFC0CB;
  --sakura-petal-breeze-6-4: #DB7093;
  --sakura-petal-breeze-6-5: #D8BFD8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-petal-breeze-6": {
        1: "#FFE4E1",
        2: "#FFB6C1",
        3: "#FFC0CB",
        4: "#DB7093",
        5: "#D8BFD8",
      }
    }
  }
}

Hex values

Color 1#FFE4E1

Color 2#FFB6C1

Color 3#FFC0CB

Color 4#DB7093

Color 5#D8BFD8

Accessibility

Contrast checker

1.4:1Fail

1.3:1Fail

2.6:1Fail

1.4:1Fail

1.1:1Fail

1.9:1Fail

1:1Fail

1.3:1Fail

1.1:1Fail

2:1Fail

1.1:1Fail

2.6:1Fail

1.9:1Fail

2:1Fail

1.8:1Fail

1.4:1Fail

1:1Fail

1.1:1Fail

1.8:1Fail

Similar palettes

More like Sakura Petal Breeze

Sakura Petal Breeze

See it in context.

Ready when you are.

Built with Sakura Petal Breeze.

How to use Sakura Petal Breeze

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Gradient

Blossom & Stem

Delicate Trio

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sakura Petal Breeze