Palette

Cherry Blossom Breeze

A gentle sweep of soft pinks that capture the ephemeral beauty of cherry blossoms in the spring breeze.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cherry Blossom 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 Cherry Blossom Breeze.

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

Data visualization

#FFC0CB#F08080#FFB6C1#FFF0F5#DB7093

Palette guide

How to use Cherry Blossom Breeze

Overview

The Cherry Blossom Breeze palette is a vibrant yet delicate collection, capturing the essence of spring's ephemeral beauty. Featuring classic #FFC0CB, the bolder #F08080, and the lighter #FFB6C1, this palette offers a dynamic range of pinks. The nearly white #FFF0F5 provides a clean canvas, while #DB7093 adds a deeper, more romantic touch. This versatile set is perfect for designers aiming to evoke feelings of joy, romance, and softness in their projects, from digital art and branding to fashion and event design, ensuring a lively yet gentle aesthetic.

Best used for

Romantic themed websites or blogs
Spring fashion collections
Bridal and wedding stationery
Children's book illustrations
Beauty product packaging
Feminine lifestyle branding

Suggested color roles

primary

#FFC0CB - A universally recognized cherry blossom pink, excellent for main branding, large headers, or primary UI elements to convey softness.

secondary

#FFB6C1 - A slightly softer pink that can support the primary, ideal for subheadings, secondary buttons, or background accents.

accent

#DB7093 - A rich, vibrant rose pink perfect for drawing attention to calls-to-action, important icons, or decorative flourishes.

background

#FFF0F5 - An airy, almost transparent white-pink that serves as a clean, light base, making content pop while maintaining a gentle feel.

text

A dark charcoal provides optimal readability against the light pinks and white, offering a softer alternative to pure black.

Accessibility notes

Ensure text in #DB7093 is placed on very light backgrounds like #FFF0F5 for adequate contrast.
Avoid using #FFB6C1 or #FFC0CB for small text on a #FFF0F5 background due to low contrast.
Utilize the darker #F08080 or #DB7093 for key interactive elements to improve visibility.
Consider bolding text or increasing font size when using lighter colors for readability, especially for headings.

Recommended combinations

Spring Bloom

A classic combination for web interfaces, using #FFF0F5 as background, #FFC0CB for UI elements, and #DB7093 for highlights.

#FFF0F5 · #FFC0CB · #DB7093

Vibrant Accent

Create energetic visual points; #F08080 for primary accents, supported by #FFB6C1, with #DB7093 for deeper emphasis.

#FFB6C1 · #F08080 · #DB7093

Soft Layers

Excellent for subtle, layered graphic elements or background textures, offering gentle depth without stark contrast.

#FFF0F5 · #FFC0CB · #FFB6C1

CSS variables

:root {
  --cherry-blossom-breeze-1: #FFC0CB;
  --cherry-blossom-breeze-2: #F08080;
  --cherry-blossom-breeze-3: #FFB6C1;
  --cherry-blossom-breeze-4: #FFF0F5;
  --cherry-blossom-breeze-5: #DB7093;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cherry-blossom-breeze": {
        1: "#FFC0CB",
        2: "#F08080",
        3: "#FFB6C1",
        4: "#FFF0F5",
        5: "#DB7093",
      }
    }
  }
}

Hex values

Color 1#FFC0CB

Color 2#F08080

Color 3#FFB6C1

Color 4#FFF0F5

Color 5#DB7093

Accessibility

Contrast checker

1.7:1Fail

1.1:1Fail

1.4:1Fail

2:1Fail

1.7:1Fail

1.6:1Fail

2.3:1Fail

1.2:1Fail

1.1:1Fail

1.6:1Fail

1.5:1Fail

1.9:1Fail

1.4:1Fail

2.3:1Fail

1.5:1Fail

2.8:1Fail

2:1Fail

1.2:1Fail

1.9:1Fail

2.8:1Fail

Similar palettes

More like Cherry Blossom Breeze

Cherry Bloom Serenity

Cherry Blossom Bloom