Palette

Sakura Bloom Dream

A delicate and ethereal palette inspired by the soft, 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 Dream 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 Dream.

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

Data visualization

#FFC0CB#FDD0DD#FBC9D5#F5E8EA#F2D2DA

Palette guide

How to use Sakura Bloom Dream

Overview

The Sakura Bloom Dream palette is a delicate and ethereal collection inspired by the soft, fleeting beauty of cherry blossoms in spring. Dominated by gentle pinks, it includes the classic #FFC0CB, the subtle #FDD0DD, and the rosy #FBC9D5. The palette is completed with nearly-white tones like #F5E8EA and #F2D2DA, creating an overwhelmingly soft and airy feel. Designers and developers will find this palette ideal for projects requiring a sense of calm, femininity, or delicate elegance, perfect for evoking a dreamy and serene aesthetic in digital and print media.

Best used for

Baby product branding and packaging
Bridal and wedding theme designs
Confectionery and dessert branding
Delicate fashion and lingerie websites
Feminine and beauty editorial layouts
Serene digital interfaces and apps

Suggested color roles

primary

Utilize #FFC0CB as a classic, soft pink primary for branding, headers, or backgrounds, conveying gentleness and romance.

secondary

Apply #FDD0DD for supporting elements, subheadings, or subtle accents, maintaining a consistent delicate feel.

accent

Employ #FBC9D5 for a subtle rosy accent in small details or decorative elements, adding a touch of understated vibrancy.

background

Use #F5E8EA as the lightest, airy background, providing a clean, ethereal canvas that enhances the palette's delicacy.

text

For optimal readability, a dark grey or charcoal text color is essential. Avoid using any palette color for body text due to insufficient contrast.

Accessibility notes

This palette is extremely light; robust contrast is crucial. Use dark grey or charcoal for all body text to ensure readability.
Avoid using any of the palette colors for small text elements, as they will not meet WCAG contrast guidelines.
If using palette colors for text, ensure it's large, bold, and against a significantly darker background (e.g., a dark grey or black outside the palette).
Prioritize visual hierarchy and font size to compensate for low color contrast within the palette itself.

Recommended combinations

Petal Soft

An ultra-light, delicate blend, perfect for backgrounds, subtle gradients, or airy, minimalist designs.

#F5E8EA · #F2D2DA · #FDD0DD

Blush Layers

Creates a gentle, harmonious pink aesthetic, suitable for brand elements, soft illustrations, or romantic themes.

#FFC0CB · #FBC9D5 · #FDD0DD

Dreamy Hues

An ethereal and soft combination, ideal for delicate branding, overlay effects, or serene digital experiences.

#F2D2DA · #FFC0CB · #F5E8EA

CSS variables

:root {
  --sakura-bloom-dream-1: #FFC0CB;
  --sakura-bloom-dream-2: #FDD0DD;
  --sakura-bloom-dream-3: #FBC9D5;
  --sakura-bloom-dream-4: #F5E8EA;
  --sakura-bloom-dream-5: #F2D2DA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sakura-bloom-dream": {
        1: "#FFC0CB",
        2: "#FDD0DD",
        3: "#FBC9D5",
        4: "#F5E8EA",
        5: "#F2D2DA",
      }
    }
  }
}

Hex values

Color 1#FFC0CB

Color 2#FDD0DD

Color 3#FBC9D5

Color 4#F5E8EA

Color 5#F2D2DA

Accessibility

Contrast checker

1.1:1Fail

1.3:1Fail

1.1:1Fail

1.2:1Fail

1:1Fail

1.1:1Fail

1.2:1Fail

1:1Fail

1.3:1Fail

1.2:1Fail

1.1:1Fail

1:1Fail

1.2:1Fail

Similar palettes

More like Sakura Bloom Dream

Sakura Bloom Dream

See it in context.

Ready when you are.

Built with Sakura Bloom Dream.

How to use Sakura Bloom Dream

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Petal Soft

Blush Layers

Dreamy Hues

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Sakura Bloom Dream