Palette

Powder Bloom

A graceful gradient of soft pinks, evoking the delicate beauty of blooming flowers.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFF0F5#FCE4EC#F8BBD0#F48FB1#EC407A

Palette guide

How to use Powder Bloom

Overview

The Powder Bloom palette presents a delicate and graceful gradient of soft pinks, ideal for designs requiring a gentle, feminine, or romantic touch. Ranging from the almost white #FFF0F5, through the blush tones of #FCE4EC and #F8BBD0, to the vibrant yet soft #F48FB1, and culminating in the deeper, alluring #EC407A, this palette evokes the serene beauty of blooming flowers. Designers can leverage these hues for elegant branding, sophisticated UI elements, or content that aims to be comforting and approachable. It's perfect for conveying softness, charm, and a touch of modern romance in digital and print media.

Best used for

Feminine brand identities (cosmetics, fashion)
Wedding invitations and event branding
Baby product packaging or nursery decor
Delicate floral designs or illustrations
Lifestyle blogs and social media content
Spa or beauty salon website themes

Suggested color roles

primary

#F48FB1 - A lovely, medium pink that can serve as a main brand color or prominent UI element without being overwhelming.

secondary

#F8BBD0 - A softer, blush pink perfect for supporting elements, subheadings, or background sections that need a gentle tint.

accent

#EC407A - A vibrant, energetic pink that provides a striking contrast for call-to-action buttons, key highlights, or interactive elements.

background

#FFF0F5 - A very light, almost white pink, offering a clean, airy canvas that enhances the delicacy of the other colors.

text

#212121 - A dark charcoal or black for optimal readability against lighter backgrounds like #FFF0F5 or #FCE4EC. Use #EC407A for headings on very light backgrounds.

Accessibility notes

Ensure #EC407A text has sufficient contrast against #FFF0F5 or #FCE4EC backgrounds.
Avoid using #FCE4EC or #F8BBD0 for body text against light backgrounds due to low contrast.
For most text, use a very dark color like charcoal or black to guarantee readability across the palette.
When using #F48FB1 for text, pair it with a very dark background or ensure it's large display text.

Recommended combinations

Soft Gradient

Creates a smooth, gentle transition for backgrounds, headers, or subtle graphical elements.

#FFF0F5 · #FCE4EC · #F8BBD0

Bloom Pop

Highlights key information with #EC407A, supports with #F48FB1, and provides a clean base with #FFF0F5.

#EC407A · #F48FB1 · #FFF0F5

Elegant Blush

A sophisticated pairing for branding. #F8BBD0 as primary, #FCE4EC for secondary, and #EC407A for impactful accents.

#F8BBD0 · #FCE4EC · #EC407A

CSS variables

:root {
  --powder-bloom-1: #FFF0F5;
  --powder-bloom-2: #FCE4EC;
  --powder-bloom-3: #F8BBD0;
  --powder-bloom-4: #F48FB1;
  --powder-bloom-5: #EC407A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "powder-bloom": {
        1: "#FFF0F5",
        2: "#FCE4EC",
        3: "#F8BBD0",
        4: "#F48FB1",
        5: "#EC407A",
      }
    }
  }
}

Hex values

Color 1#FFF0F5

Color 2#FCE4EC

Color 3#F8BBD0

Color 4#F48FB1

Color 5#EC407A

Accessibility

Contrast checker

1.1:1Fail

1.5:1Fail

2:1Fail

3.4:1AA18

1.1:1Fail

1.3:1Fail

1.9:1Fail

3.1:1AA18

1.5:1Fail

1.3:1Fail

1.4:1Fail

2.3:1Fail

2:1Fail

1.9:1Fail

1.4:1Fail

1.7:1Fail

3.4:1AA18

3.1:1AA18

2.3:1Fail

1.7:1Fail

Similar palettes

More like Powder Bloom

Gentle Blossom Whisper

Morning Petal Blush