Palette

Cherry Bloom Serenity

Delicate, soft hues capturing the gentle blush of cherry blossoms in full bloom under a serene sky.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cherry Bloom Serenity 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 Bloom Serenity.

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

Data visualization

#FEEBEE#FADDE1#F8B0B9#D74D7C#9A326E

Palette guide

How to use Cherry Bloom Serenity

Overview

The Cherry Bloom Serenity palette captures the delicate, soft hues of cherry blossoms in full bloom under a serene sky. This collection features a gentle #FEEBEE and #FADDE1, transitioning to a blush pink #F8B0B9, and deepening into richer tones of #D74D7C and #9A326E. For designers and developers, this palette offers a calming yet sophisticated aesthetic, perfect for projects that aim to evoke grace, natural beauty, and tranquility. Its harmonious blend of light and deep pinks provides ample versatility for creating elegant branding, inviting interfaces, or serene digital experiences that resonate with a sense of peace and refined charm.

Best used for

Spa and wellness center branding
Bridal and wedding-related websites
Feminine beauty product packaging
Spring-themed event invitations
Floral design and gardening blogs
Luxury fashion websites with a soft touch

Suggested color roles

primary

Utilize #D74D7C as the dominant brand color for headers, important call-to-action buttons, and key interactive elements.

secondary

Employ #9A326E for secondary navigation, prominent content blocks, or as a deeper, richer accent.

accent

Apply #F8B0B9 for delicate interactive states, subtle highlights, or to add a touch of soft blush.

background

Choose #FEEBEE or #FADDE1 for clean, airy, and inviting backgrounds.

text

For light backgrounds, use #9A326E or #D74D7C for excellent readability. On dark pinks, a near-white text color is recommended.

Accessibility notes

Ensure #9A326E text on #FEEBEE background meets WCAG contrast standards for body text.
Avoid using #F8B0B9 text on #FADDE1 backgrounds for small text, as contrast will be insufficient.
Use a dark charcoal or deep brown for all text on #FEEBEE or #FADDE1 backgrounds to guarantee readability.
Test interactive elements with #F8B0B9 against adjacent lighter tones to ensure sufficient visual distinction.

Recommended combinations

Blossom Contrast

Ideal for main content areas: vibrant pink background, light text, and a deeper pink for subheadings.

#D74D7C · #FEEBEE · #9A326E

Petal Layers

Create subtle layered effects in UI cards, panels, or background patterns, mimicking delicate petals.

#FADDE1 · #F8B0B9 · #D74D7C

Serene Read

Use #9A326E for strong visual elements on a #FEEBEE canvas, with #F8B0B9 for delicate details or highlights.

#FEEBEE · #9A326E · #F8B0B9

CSS variables

:root {
  --cherry-bloom-serenity-1: #FEEBEE;
  --cherry-bloom-serenity-2: #FADDE1;
  --cherry-bloom-serenity-3: #F8B0B9;
  --cherry-bloom-serenity-4: #D74D7C;
  --cherry-bloom-serenity-5: #9A326E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cherry-bloom-serenity": {
        1: "#FEEBEE",
        2: "#FADDE1",
        3: "#F8B0B9",
        4: "#D74D7C",
        5: "#9A326E",
      }
    }
  }
}

Hex values

Color 1#FEEBEE

Color 2#FADDE1

Color 3#F8B0B9

Color 4#D74D7C

Color 5#9A326E

Accessibility

Contrast checker

1.1:1Fail

1.5:1Fail

3.5:1AA18

6:1AA

1.1:1Fail

1.4:1Fail

3.1:1AA18

5.4:1AA

1.5:1Fail

1.4:1Fail

2.3:1Fail

3.9:1AA18

3.5:1AA18

3.1:1AA18

2.3:1Fail

1.7:1Fail

6:1AA

5.4:1AA

3.9:1AA18

1.7:1Fail

Similar palettes

More like Cherry Bloom Serenity

Blushing Petal Softness