Back to palettes

Palette

Peony Blush Bloom

Soft, delicate pinks mimic the luxurious, layered petals of blooming peonies.

pastelelegant5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F7E9EE#ECCDD8#DEB1C3#C795AF#AD789B

Palette guide

How to use Peony Blush Bloom

Overview

The Peony Blush Bloom palette unfolds a delicate array of soft, romantic pinks, capturing the luxurious layers of blooming peonies. Ranging from the ethereal `#F7E9EE` to the rich depth of `#AD789B`, this palette is perfect for designers and developers aiming to create elegant, feminine, and gentle digital experiences. The mid-tones like `#ECCDD8` and `#DEB1C3` provide beautiful transitions, ideal for subtle gradients or layered UI elements. This collection exudes sophistication and warmth, making it versatile for projects that require a touch of delicate charm and refined beauty.

Best used for

  • Feminine brand identities
  • Wedding and event planning websites
  • Beauty and cosmetic product packaging
  • Elegant fashion blogs
  • Soft and romantic UI designs
  • Baby shower invitations and related digital content

Suggested color roles

primary

Use `#DEB1C3` for main content blocks or headers to establish a warm, inviting feel.

secondary

Employ `#ECCDD8` for secondary text, background panels, or subtle dividers, maintaining softness.

accent

Apply `#AD789B` sparingly for calls-to-action, important links, or decorative elements to add a touch of depth and elegance.

background

Utilize `#F7E9EE` as the primary background color for a light, airy, and delicate canvas.

text

For optimal readability, use a deep plum, dark gray, or black text on lighter backgrounds like `#F7E9EE` or `#ECCDD8`.

Accessibility notes

  • Ensure sufficient contrast between `#AD789B` text and lighter backgrounds like `#F7E9EE` or `#ECCDD8`.
  • Avoid pairing `#F7E9EE` with `#ECCDD8` for text and background combinations due to low contrast.
  • Use a contrast checker when applying lighter pinks like `#DEB1C3` for text on similar pastel backgrounds.
  • For small text or interactive elements, ensure the chosen color combination passes WCAG AAA contrast standards.

Recommended combinations

Petal Soft

Creates a gentle, layered background effect, ideal for soft UI elements and spacious layouts.

#F7E9EE · #ECCDD8 · #DEB1C3

Blush Depth

Excellent for emphasizing key information or buttons against a light, romantic backdrop.

#AD789B · #C795AF · #F7E9EE

Elegant Transition

Perfect for subtle gradients, section dividers, or decorative elements requiring a smooth color flow.

#DEB1C3 · #C795AF · #AD789B

CSS variables

:root {
  --peony-blush-bloom-1: #F7E9EE;
  --peony-blush-bloom-2: #ECCDD8;
  --peony-blush-bloom-3: #DEB1C3;
  --peony-blush-bloom-4: #C795AF;
  --peony-blush-bloom-5: #AD789B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "peony-blush-bloom": {
        1: "#F7E9EE",
        2: "#ECCDD8",
        3: "#DEB1C3",
        4: "#C795AF",
        5: "#AD789B",
      }
    }
  }
}

Related searches

peony pink color palettesoft blush tonesromantic floral colorselegant pastel pinksfeminine UI design

Palette colors

Hex values

Color 1#F7E9EE
·
Color 2#ECCDD8
·
Color 3#DEB1C3
·
Color 4#C795AF
·
Color 5#AD789B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.6:1Fail
2.1:1Fail
3:1AA18
2
1.2:1Fail
1.3:1Fail
1.7:1Fail
2.4:1Fail
3
1.6:1Fail
1.3:1Fail
1.3:1Fail
1.9:1Fail
4
2.1:1Fail
1.7:1Fail
1.3:1Fail
1.4:1Fail
5
3:1AA18
2.4:1Fail
1.9:1Fail
1.4:1Fail

Similar palettes

More like Peony Blush Bloom

View all pastel
Cherry Grove Blush
Dusty Rose Garden
Faded Floral Keepsake
Rose Garden Path
Antique Rose Petal
Antique Rose Petals