Palette

Sakura Bloom Echo

Soft pinks and rosy hues reflecting the delicate, fleeting beauty of cherry blossoms in spring.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sakura Bloom Echo 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 Bloom Echo.

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

Data visualization

#FDDADD#F8C4C4#F7A8B8#E67990#D8506E

Palette guide

How to use Sakura Bloom Echo

Overview

The Sakura Bloom Echo palette captures the delicate yet vibrant essence of cherry blossoms in spring, blending soft pinks with richer rosy hues. From the airy #FDDADD to the bold #D8506E, it offers a beautiful gradient of romantic tones. Key colors include the gentle #F8C4C4, the clear pink of #F7A8B8, and the warm rose of #E67990. This collection is ideal for designers and developers seeking to create romantic, feminine, or elegant aesthetics, perfectly reflecting the fleeting beauty and gentle energy of a spring bloom in digital and print media.

Best used for

Romantic brand identities and marketing
Spring fashion and beauty collections
Floral design and event decor
Children's books and educational content
Beauty and lifestyle editorial design
Feminine web themes and applications

Suggested color roles

primary

Utilize #F7A8B8 as a clear, vibrant pink primary for main headings, key brand elements, or prominent UI components, conveying cheerfulness and romance.

secondary

Apply #E67990 for supporting sections, subheadings, or accents, providing a slightly deeper, warm rose contrast.

accent

Employ #D8506E as the boldest accent for important details, calls-to-action, or text that requires strong visual impact.

background

Use #FDDADD as the softest, airy background, creating a gentle and expansive canvas that allows the other colors to bloom.

text

For optimal readability, a medium grey or charcoal is recommended for body text. For headings or larger text on darker backgrounds, #F8C4C4 can offer a subtle, warm contrast.

Accessibility notes

Ensure #D8506E and #E67990 provide sufficient contrast when used for text on the lightest background, #FDDADD.
Avoid using #F8C4C4 for small body text on light backgrounds, as contrast will likely be insufficient for readability.
For optimal accessibility, pair the lightest palette colors with a very dark text color (e.g., black or a deep grey).
Always test text and background color combinations with a contrast checker to ensure WCAG compliance.

Recommended combinations

Blossom Gradient

A gentle, flowing blend, ideal for backgrounds, subtle gradients, or delicate brand storytelling.

#FDDADD · #F8C4C4 · #F7A8B8

Rose Depth

Creates richer, romantic depth, suitable for content blocks, navigation, or impactful brand elements.

#E67990 · #D8506E · #F7A8B8

Spring Blush

A lively and inviting combination, perfect for calls-to-action, playful designs, or highlighting key information.

#F7A8B8 · #F8C4C4 · #E67990

CSS variables

:root {
  --sakura-bloom-echo-1: #FDDADD;
  --sakura-bloom-echo-2: #F8C4C4;
  --sakura-bloom-echo-3: #F7A8B8;
  --sakura-bloom-echo-4: #E67990;
  --sakura-bloom-echo-5: #D8506E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-bloom-echo": {
        1: "#FDDADD",
        2: "#F8C4C4",
        3: "#F7A8B8",
        4: "#E67990",
        5: "#D8506E",
      }
    }
  }
}

Hex values

Color 1#FDDADD

Color 2#F8C4C4

Color 3#F7A8B8

Color 4#E67990

Color 5#D8506E

Accessibility

Contrast checker

1.2:1Fail

1.4:1Fail

2.2:1Fail

3.1:1AA18

1.2:1Fail

1.8:1Fail

2.6:1Fail

1.4:1Fail

1.2:1Fail

1.5:1Fail

2.1:1Fail

2.2:1Fail

1.8:1Fail

1.5:1Fail

1.4:1Fail

3.1:1AA18

2.6:1Fail

2.1:1Fail

1.4:1Fail

Similar palettes

More like Sakura Bloom Echo

Sakura Bloom Echo

See it in context.

Ready when you are.

Built with Sakura Bloom Echo.

How to use Sakura Bloom Echo

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Blossom Gradient

Rose Depth

Spring Blush

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sakura Bloom Echo