Palette

Sakura Breeze Petals

Gentle, airy pinks transitioning to deeper rose, capturing the essence of cherry blossoms.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F9F1F0#FFC6C6#FFAAA5#FF7B7B#B22222

Palette guide

How to use Sakura Breeze Petals

Overview

The Sakura Breeze Petals palette captures the dynamic beauty of cherry blossoms, from their delicate blush to their vibrant core. It transitions from the airy #F9F1F0, through the soft #FFC6C6 and warmer #FFAAA5, to the energetic #FF7B7B, culminating in the deep, rich crimson of #B22222. This collection offers a captivating progression of reds and pinks, ideal for designers and developers seeking to evoke passion, warmth, and a touch of dramatic elegance. The contrast between the light and dark shades provides excellent versatility for creating visually striking and emotionally engaging designs.

Best used for

Bold fashion and beauty brand campaigns
Romantic holiday or Valentine's Day themes
Energetic event branding and promotions
Dramatic digital art and illustrations
Impactful call-to-action elements in UI
Food and beverage packaging for indulgent treats

Suggested color roles

primary

Use #FF7B7B as a lively primary for calls-to-action or prominent headlines, demanding attention with warmth.

secondary

Employ #FFAAA5 for supporting elements like subheadings or informational panels, maintaining an inviting tone.

accent

Reserve #B22222 for powerful accents, critical alerts, or sophisticated branding elements, providing strong depth.

background

Utilize #F9F1F0 or #FFC6C6 for clean, soft backgrounds that allow the deeper reds to truly pop.

text

For dark text, #B22222 offers excellent readability on lighter backgrounds. For lighter text, white works well on #B22222.

Accessibility notes

Ensure high contrast when using #FF7B7B for text on lighter backgrounds like #F9F1F0.
Avoid pairing #F9F1F0 and #FFC6C6 for text and background due to insufficient contrast.
Always use #B22222 for crucial text elements on light backgrounds to ensure maximum readability.
Test color pairings for all interactive elements to meet WCAG AA standards, especially for links and buttons.

Recommended combinations

Dynamic Blush

Ideal for soft gradients or layered backgrounds, creating a gentle yet warm transition.

#F9F1F0 · #FFC6C6 · #FFAAA5

Passionate Pop

Effective for high-impact sections, with #B22222 for strong headings and #FF7B7B for highlights.

#F9F1F0 · #FF7B7B · #B22222

Deep Romance

Great for creating a sense of depth and intensity, using #B22222 for text on #FFAAA5 or #FF7B7B.

#FFAAA5 · #FF7B7B · #B22222

CSS variables

:root {
  --sakura-breeze-petals-1: #F9F1F0;
  --sakura-breeze-petals-2: #FFC6C6;
  --sakura-breeze-petals-3: #FFAAA5;
  --sakura-breeze-petals-4: #FF7B7B;
  --sakura-breeze-petals-5: #B22222;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-breeze-petals": {
        1: "#F9F1F0",
        2: "#FFC6C6",
        3: "#FFAAA5",
        4: "#FF7B7B",
        5: "#B22222",
      }
    }
  }
}

Hex values

Color 1#F9F1F0

Color 2#FFC6C6

Color 3#FFAAA5

Color 4#FF7B7B

Color 5#B22222

Accessibility

Contrast checker

1.3:1Fail

1.6:1Fail

2.3:1Fail

6:1AA

1.3:1Fail

1.2:1Fail

1.7:1Fail

4.5:1AA18

1.6:1Fail

1.2:1Fail

1.4:1Fail

3.7:1AA18