Back to palettes

Palette

Sakura Petal Breeze

A delicate and serene palette capturing the ephemeral beauty of cherry blossoms in a gentle spring breeze.

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

#FFC0CB#FFD1DC#FFEDF0#C0D9D9#A1C2B0

Palette guide

How to use Sakura Petal Breeze

Overview

The Sakura Petal Breeze palette offers a delicate and serene blend, capturing the ephemeral beauty of cherry blossoms in a gentle spring breeze. It features classic Pink (#FFC0CB), very pale Pink Tint (#FFEDF0), a calming Powder Blue (#C0D9D9), and a soft Celadon Green (#A1C2B0). This combination provides a refreshing balance of warm and cool pastels, making it versatile for designers and developers aiming for a tranquil yet inviting aesthetic. Leverage these hues to create harmonious and elegant user experiences across various platforms.

Best used for

  • Nature-inspired websites and blogs
  • Eco-friendly product branding
  • Spring fashion collection lookbooks
  • Gentle children's book illustrations
  • Calm meditation app interfaces
  • Botanical garden marketing materials

Suggested color roles

primary

Pink (#FFC0CB) can serve as the primary color for interactive elements like buttons or important headings, offering a gentle warmth.

secondary

Celadon Green (#A1C2B0) provides a soft, complementary contrast for subheadings, secondary navigation, or supporting graphics.

accent

Powder Blue (#C0D9D9) is perfect for subtle highlights, decorative lines, or as a background for tertiary information, adding a fresh touch.

background

Pink Tint (#FFEDF0) creates a light, airy, and inviting base for any design, promoting a sense of calm and purity.

text

A dark gray (#333333) or charcoal is recommended for body text to ensure optimal readability against the light pastel backgrounds.

Accessibility notes

  • Ensure all body text uses a dark color (e.g., charcoal) for readability against the very light backgrounds.
  • Pink (#FFC0CB) on Pink Tint (#FFEDF0) has insufficient contrast for small text; reserve for larger titles.
  • Celadon Green (#A1C2B0) and Powder Blue (#C0D9D9) offer refreshing contrast to the pinks; use them to differentiate sections.
  • Provide clear focus states for interactive elements, as color contrast can be low among some pastel pairs.

Recommended combinations

Spring Fresh

Combine for a balanced layout, where pink provides warmth and the greens/blues add a refreshing, natural feel.

#FFC0CB · #A1C2B0 · #C0D9D9

Gentle Bloom

Create soft, progressive pink gradients for backgrounds, hero sections, or subtle overlays.

#FFEDF0 · #FFD1DC · #FFC0CB

Serene Accents

Ideal for UI elements like borders, icons, or decorative patterns that require a tranquil, understated presence.

#C0D9D9 · #A1C2B0 · #FFC0CB

CSS variables

:root {
  --sakura-petal-breeze-8-1: #FFC0CB;
  --sakura-petal-breeze-8-2: #FFD1DC;
  --sakura-petal-breeze-8-3: #FFEDF0;
  --sakura-petal-breeze-8-4: #C0D9D9;
  --sakura-petal-breeze-8-5: #A1C2B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-petal-breeze-8": {
        1: "#FFC0CB",
        2: "#FFD1DC",
        3: "#FFEDF0",
        4: "#C0D9D9",
        5: "#A1C2B0",
      }
    }
  }
}

Related searches

pastel pink and green palettecalm spring colorscherry blossom design elementsgentle nature palettelight serene UI

Palette colors

Hex values

Color 1#FFC0CB
·
Color 2#FFD1DC
·
Color 3#FFEDF0
·
Color 4#C0D9D9
·
Color 5#A1C2B0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.4:1Fail
1:1Fail
1.3:1Fail
2
1.1:1Fail
1.2:1Fail
1.1:1Fail
1.4:1Fail
3
1.4:1Fail
1.2:1Fail
1.3:1Fail
1.7:1Fail
4
1:1Fail
1.1:1Fail
1.3:1Fail
1.3:1Fail
5
1.3:1Fail
1.4:1Fail
1.7:1Fail
1.3:1Fail

Similar palettes

More like Sakura Petal Breeze

View all pastel
Sakura Bloom Petal
Sakura Petal Breeze
Sakura Petal Kiss
Cherry Bloom Serenity
Cherry Blossom Bloom
Cherry Blossom Blush