Palette

Sakura Blossom Petals

Delicate shades of pink and rose, capturing the ephemeral beauty of cherry blossoms.

pastelelegant5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFC0CB#F7CAC9#FDD0EC#E6A7BD#CC97AE

Palette guide

How to use Sakura Blossom Petals

Overview

The Sakura Blossom Petals palette captures the ephemeral beauty of cherry blossoms with a range of delicate pinks and rose tones. Featuring the classic #FFC0CB, the soft #F7CAC9, the vibrant #FDD0EC, the elegant #E6A7BD, and the deeper #CC97AE, this collection offers a harmonious and sophisticated aesthetic. It's an excellent choice for designers and developers looking to evoke a sense of grace, romance, and gentle elegance. The subtle variations between the pinks provide depth and versatility, making it suitable for a wide array of applications from digital interfaces to print materials.

Best used for

Luxury wedding and event branding
High-end beauty and cosmetic packaging
Feminine fashion or lifestyle magazines
Romantic e-commerce website designs
Elegant digital art and illustrations
Soft, sophisticated UI/UX themes

Suggested color roles

primary

Use #E6A7BD as a refined primary color for main headings or significant graphical elements, offering gentle elegance.

secondary

Employ #FDD0EC for supporting elements like subheadings or background sections, adding a touch of vibrant pastel.

accent

Reserve #CC97AE for subtle accents, calls-to-action, or interactive states, providing a deeper, sophisticated anchor.

background

Utilize #FFC0CB or #F7CAC9 for light, airy backgrounds that promote readability and a soft, inviting atmosphere.

text

For dark text, #CC97AE provides good contrast on the lighter pinks. A medium-dark gray or black is suitable for body text.

Accessibility notes

Ensure sufficient contrast for text when using any of the lighter pinks as background colors.
Avoid pairing very similar shades like #FFC0CB and #F7CAC9 for text and background to prevent readability issues.
Use #CC97AE for important text or interactive elements to ensure they stand out against lighter hues.
Verify all color combinations meet WCAG contrast standards, especially for critical user interface elements.

Recommended combinations

Elegant Gradation

Ideal for soft gradients in hero sections or layered backgrounds, creating a seamless, romantic flow.

#FFC0CB · #F7CAC9 · #FDD0EC

Rose Contrast

Effective for main content blocks, with #CC97AE for headings and #E6A7BD for supportive graphics.

#F7CAC9 · #E6A7BD · #CC97AE

Deep Blossom

Perfect for high-contrast UI elements, where #CC97AE provides strong calls-to-action against a light backdrop.

#FFC0CB · #E6A7BD · #CC97AE

CSS variables

:root {
  --sakura-blossom-petals-1: #FFC0CB;
  --sakura-blossom-petals-2: #F7CAC9;
  --sakura-blossom-petals-3: #FDD0EC;
  --sakura-blossom-petals-4: #E6A7BD;
  --sakura-blossom-petals-5: #CC97AE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-blossom-petals": {
        1: "#FFC0CB",
        2: "#F7CAC9",
        3: "#FDD0EC",
        4: "#E6A7BD",
        5: "#CC97AE",
      }
    }
  }
}

Hex values

Color 1#FFC0CB

Color 2#F7CAC9

Color 3#FDD0EC

Color 4#E6A7BD

Color 5#CC97AE

Accessibility

Contrast checker

1:1Fail

1.1:1Fail

1.3:1Fail

1.6:1Fail

1:1Fail

1.1:1Fail

1.3:1Fail

1.7:1Fail

1.1:1Fail

1.5:1Fail

1.8:1Fail

1.3:1Fail

1.5:1Fail

1.2:1Fail

1.6:1Fail

1.7:1Fail

1.8:1Fail

1.2:1Fail

Similar palettes

More like Sakura Blossom Petals

Sakura Blossom Petals

See it in context.

Ready when you are.

Built with Sakura Blossom Petals.

How to use Sakura Blossom Petals

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Elegant Gradation

Rose Contrast

Deep Blossom

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sakura Blossom Petals