Back to palettes

Palette

Soft Petals

Delicate and airy pinks create a tender, romantic feel, like scattered petals in a gentle breeze.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F8DEDF#FADCDC#FFF5F5#F6C8CD#F3B0B6

Palette guide

How to use Soft Petals

Overview

The Soft Petals palette is a collection of delicate and airy pinks, designed to evoke a tender, romantic feel, much like scattered petals in a gentle breeze. Featuring shades from the almost-white `#FFF5F5` to the deeper blush of `#F3B0B6`, with subtle variations like `#F8DEDF` and `#FADCDC`, this palette is inherently soft and inviting. Designers and developers can utilize these gentle hues to create elegant, feminine, and warm aesthetics across various platforms, from sophisticated digital interfaces to charming print materials.

Best used for

  • Wedding and bridal branding
  • Lingerie and sleepwear design
  • Luxury beauty product packaging
  • Romantic novel covers
  • Baby shower themes and decor
  • Feminine lifestyle photography

Suggested color roles

primary

Use `#F3B0B6` as the focal point, providing the deepest and most impactful pink in the palette.

secondary

Employ `#F6C8CD` for supporting elements, subheadings, or larger content blocks for a softer presence.

accent

Apply `#F8DEDF` for subtle highlights or decorative elements, adding a gentle variation to the blush tones.

background

Utilize `#FFF5F5` as a clean, near-white base, providing an airy and spacious canvas.

text

Pair with a dark gray or charcoal for optimal readability, as all palette colors are very light.

Accessibility notes

  • All colors in this palette are very light; therefore, all text must be a dark color (e.g., black or dark gray) to ensure sufficient contrast.
  • Avoid using any of the palette colors for small text, as they will not meet accessibility standards.
  • For UI elements, ensure interactive components have clear visual cues beyond just color, or use a darker, contrasting color for outlines/shadows.
  • The subtle differences between colors like `#F8DEDF` and `#FADCDC` mean they should not be used where high visual differentiation is required.

Recommended combinations

Rose Blush Gradient

Creates a smooth, romantic gradient suitable for banners, headers, or background textures.

#F3B0B6 · #F6C8CD · #F8DEDF

Delicate Base

Provides a light and airy foundation with soft layering, ideal for clean web page layouts.

#FFF5F5 · #FADCDC · #F6C8CD

Petal Depth

Combines the strongest pink with the lightest shades for a subtle yet impactful visual dynamic.

#F3B0B6 · #FFF5F5 · #FADCDC

CSS variables

:root {
  --soft-petals-1: #F8DEDF;
  --soft-petals-2: #FADCDC;
  --soft-petals-3: #FFF5F5;
  --soft-petals-4: #F6C8CD;
  --soft-petals-5: #F3B0B6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-petals": {
        1: "#F8DEDF",
        2: "#FADCDC",
        3: "#FFF5F5",
        4: "#F6C8CD",
        5: "#F3B0B6",
      }
    }
  }
}

Related searches

wedding pink palettesoft blush tonesromantic pastel colorsdelicate rose shadesfeminine design palette

Palette colors

Hex values

Color 1#F8DEDF
·
Color 2#FADCDC
·
Color 3#FFF5F5
·
Color 4#F6C8CD
·
Color 5#F3B0B6
·

Accessibility

Contrast checker

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

Similar palettes

More like Soft Petals

View all pastel
Dusty Rose Bloom
Powder Bloom
Soft Petal Blush
Cherry Blossom Bloom
Cherry Blossom Breeze
Cherry Blossom Cloud