Back to palettes

Palette

Soft Peony Petal

A delicate range of pinks, reflecting the soft, layered beauty of peony petals.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Soft Peony Petal 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 Soft Peony Petal.

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

Data visualization

#FADDE1#F0C4CC#E0A0AE#CC7B8C#B85F6B

Palette guide

How to use Soft Peony Petal

Overview

The Soft Peony Petal palette offers a beautiful progression of delicate pinks, capturing the layered beauty and gentle blush of a peony flower. Ranging from the tender #FADDE1 to the deeper, more vibrant #B85F6B, this palette is ideal for designs that seek romance, elegance, and a touch of floral grace. Designers can leverage these hex codes for feminine branding, wedding themes, or any project requiring a sophisticated yet soft aesthetic. Developers will find these harmonious pinks excellent for creating inviting UI elements, expressive illustrations, or backgrounds that convey warmth and charm. Its gradient of pinks ensures versatility for various design applications.

Best used for

  • Wedding and event stationery
  • Beauty and cosmetic branding
  • Feminine fashion e-commerce
  • Romantic photography portfolios
  • Spring floral design themes
  • Personal blogs with a soft, elegant touch

Suggested color roles

primary

Use #FADDE1 as a light, airy primary background to set a delicate and inviting tone.

secondary

Apply #F0C4CC for content blocks or secondary UI elements, offering a slightly richer pink base.

accent

Utilize #CC7B8C for interactive elements, calls-to-action, or important headings to provide clear emphasis.

background

Employ #FADDE1 for main backgrounds to create an open, soft, and romantic ambiance.

text

#B85F6B offers a rich, readable option for body text against lighter palette colors; for maximum contrast, a dark charcoal is recommended.

Accessibility notes

  • Ensure sufficient contrast when pairing #E0A0AE with #F0C4CC for text; test against WCAG standards.
  • #B85F6B provides good contrast on #FADDE1 for body text, but verify readability for smaller font sizes.
  • Avoid using #FADDE1 or #F0C4CC for small text on similarly light backgrounds to prevent readability issues.
  • For critical interactive elements, #CC7B8C or #B85F6B offers good visibility, ensuring accessibility.

Recommended combinations

Soft Gradient

Ideal for creating smooth, gentle gradients in backgrounds or layered graphics, mimicking petal transitions.

#FADDE1 · #F0C4CC · #E0A0AE

Elegant Contrast

Use for a sophisticated look where a light background meets bold, readable text and interactive elements.

#FADDE1 · #CC7B8C · #B85F6B

Rich Depth

Excellent for sections requiring more visual weight, such as headers, footers, or highlighted content blocks.

#F0C4CC · #E0A0AE · #B85F6B

CSS variables

:root {
  --soft-peony-petal-1: #FADDE1;
  --soft-peony-petal-2: #F0C4CC;
  --soft-peony-petal-3: #E0A0AE;
  --soft-peony-petal-4: #CC7B8C;
  --soft-peony-petal-5: #B85F6B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-peony-petal": {
        1: "#FADDE1",
        2: "#F0C4CC",
        3: "#E0A0AE",
        4: "#CC7B8C",
        5: "#B85F6B",
      }
    }
  }
}

Related searches

peony pink color paletteromantic pastel shadesfloral blush colorselegant pink web designsoft feminine aesthetic

Palette colors

Hex values

Color 1#FADDE1
·
Color 2#F0C4CC
·
Color 3#E0A0AE
·
Color 4#CC7B8C
·
Color 5#B85F6B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.7:1Fail
2.4:1Fail
3.4:1AA18
2
1.2:1Fail
1.4:1Fail
2:1Fail
2.8:1Fail
3
1.7:1Fail
1.4:1Fail
1.4:1Fail
2:1Fail
4
2.4:1Fail
2:1Fail
1.4:1Fail
1.4:1Fail
5
3.4:1AA18
2.8:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Soft Peony Petal

View all pastel