Back to palettes

Palette

Sweet Rose Petals

A delicate and sweet assortment of rosy pinks, like a gentle scattering of flower petals.

PastelCalm5 colors
More Pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sweet Rose Petals 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 Sweet Rose Petals.

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

Data visualization

#F4DCE3#ECC8D2#E0B6C0#D3A4AE#C5919B

Palette guide

How to use Sweet Rose Petals

Overview

The Sweet Rose Petals palette evokes a delicate and romantic feel, perfect for projects requiring warmth and softness. This pastel collection features a range of rosy pinks, from the airy #F4DCE3 to the deeper #C5919B. Designers can leverage these hues, like the gentle #ECC8D2 and the slightly richer #E0B6C0, to create inviting and comforting user experiences. Developers will find these hex codes easy to implement across various UI elements, ensuring a cohesive and aesthetically pleasing design. The mid-tone #D3A4AE offers a versatile option for elements needing a bit more presence without losing the palette's inherent softness. This guide helps you apply these shades effectively.

Best used for

  • Wedding stationery and invitations
  • Feminine branding and packaging
  • Baby shower themes and nursery decor
  • Spa and beauty product websites
  • Romantic novel covers and illustrations
  • Soft, comforting UI themes for apps

Suggested color roles

primary

#E0B6C0 - A balanced mid-tone that sets a soft, inviting mood for main sections or large UI components.

secondary

#D3A4AE - Offers a slightly deeper contrast to the primary, suitable for subheadings, buttons, or secondary content areas.

accent

#C5919B - The deepest shade, ideal for drawing attention to calls-to-action, important icons, or subtle decorative elements.

background

#F4DCE3 - The lightest pink, perfect for clean, airy backgrounds that allow other elements to stand out gently.

text

#333333 (charcoal) or #C5919B - For optimal readability against light backgrounds like #F4DCE3, a dark neutral like charcoal is recommended. Use #C5919B for headings or decorative text where contrast permits.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially when using lighter shades for both.
  • Pair #C5919B with #F4DCE3 for improved readability for key information and body text.
  • Avoid using adjacent light pastels (e.g., #F4DCE3 and #ECC8D2) for critical UI elements where distinct differentiation is needed.
  • Test all text-on-background combinations with a contrast checker to meet WCAG AA standards.

Recommended combinations

Soft Gradient

Ideal for subtle background gradients, hero sections, or layered UI cards to add depth.

#F4DCE3 · #ECC8D2 · #E0B6C0

Romantic Depth

Use for a more mature and refined look, suitable for headings, main content, and accents in branding.

#E0B6C0 · #D3A4AE · #C5919B

Gentle Contrast

A simple yet effective combination for clear text (#C5919B) on a light background (#F4DCE3), with #D3A4AE for secondary elements.

#F4DCE3 · #C5919B · #D3A4AE

CSS variables

:root {
  --sweet-rose-petals-1: #F4DCE3;
  --sweet-rose-petals-2: #ECC8D2;
  --sweet-rose-petals-3: #E0B6C0;
  --sweet-rose-petals-4: #D3A4AE;
  --sweet-rose-petals-5: #C5919B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sweet-rose-petals": {
        1: "#F4DCE3",
        2: "#ECC8D2",
        3: "#E0B6C0",
        4: "#D3A4AE",
        5: "#C5919B",
      }
    }
  }
}

Related searches

pastel pink color schemeromantic color palettesoft rose huesdelicate pink web designfloral inspired colors

Palette colors

Hex values

Color 1#F4DCE3
·
Color 2#ECC8D2
·
Color 3#E0B6C0
·
Color 4#D3A4AE
·
Color 5#C5919B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.7:1Fail
2.1:1Fail
2
1.2:1Fail
1.2:1Fail
1.4:1Fail
1.7:1Fail
3
1.4:1Fail
1.2:1Fail
1.2:1Fail
1.5:1Fail
4
1.7:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
2.1:1Fail
1.7:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Sweet Rose Petals

View all Pastel
Garden Rose Hues
Sakura Evening Blush
Blossom Blush Breeze
Cherry Blossom
Cloud Kissed Lavender
Sakura Petal Breeze