Back to palettes

Palette

Soft Petal Whisper

Gentle and ethereal, mimicking the delicate blush and soft gradients of fresh flower petals.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FADADD#FEECEB#FDE7EF#E0BBE4#957DAD

Palette guide

How to use Soft Petal Whisper

Overview

The Soft Petal Whisper palette blends delicate pinks with serene purples, creating an ethereal and sophisticated atmosphere reminiscent of blooming flowers. Featuring soft blush tones like `#FADADD` and `#FDE7EF` alongside the gentle lavender of `#E0BBE4`, this palette gains depth from the rich yet muted `#957DAD`. Designers and developers can leverage these hues for projects requiring a sense of calm elegance, from luxurious spa branding to romantic digital interfaces. The interplay of pink and purple offers versatility for both subtle gradients and engaging contrasts.

Best used for

  • Luxury spa and wellness branding
  • Wedding stationery and decor
  • Sophisticated beauty product lines
  • Abstract art and illustration
  • Meditation and mindfulness apps
  • Feminine fashion and accessories

Suggested color roles

primary

Use `#E0BBE4` as the core calming lavender, suitable for main sections or prominent UI elements.

secondary

Employ `#FADADD` as a soft blush companion, perfect for supporting content or lighter backgrounds.

accent

Apply `#957DAD` sparingly for strong accents, important text, or as a sophisticated footer background to ground the palette.

background

Utilize `#FEECEB` as a light, warm, and airy canvas that allows the other colors to gently emerge.

text

For optimal readability, use `#957DAD` for headings and a dark charcoal for body text on lighter backgrounds.

Accessibility notes

  • The darker shade, `#957DAD`, is essential for providing sufficient contrast for text on lighter backgrounds.
  • Avoid using any of the lighter shades (e.g., `#FADADD`, `#FEECEB`) for text, as they will not be legible.
  • Ensure interactive elements like buttons use `#957DAD` or have a strong visual indicator of interactivity.
  • When designing, be mindful of the subtle differences between the lightest colors, as they may not provide enough contrast for all users.

Recommended combinations

Lavender Depth

Combines primary lavender with the deepest accent and a soft pink for a balanced, elegant look.

#E0BBE4 · #957DAD · #FADADD

Ethereal Bloom

Creates a soft, almost monochromatic light gradient, perfect for subtle background textures or overlays.

#FEECEB · #FDE7EF · #E0BBE4

Sophisticated Contrast

Uses the darkest shade to anchor lighter pinks, ideal for striking headings or distinct content blocks.

#957DAD · #FADADD · #FEECEB

CSS variables

:root {
  --soft-petal-whisper-2-1: #FADADD;
  --soft-petal-whisper-2-2: #FEECEB;
  --soft-petal-whisper-2-3: #FDE7EF;
  --soft-petal-whisper-2-4: #E0BBE4;
  --soft-petal-whisper-2-5: #957DAD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "soft-petal-whisper-2": {
        1: "#FADADD",
        2: "#FEECEB",
        3: "#FDE7EF",
        4: "#E0BBE4",
        5: "#957DAD",
      }
    }
  }
}

Related searches

pink and purple paletteethereal pastel colorslavender blush designdelicate floral tonescalm spa colors

Palette colors

Hex values

Color 1#FADADD
·
Color 2#FEECEB
·
Color 3#FDE7EF
·
Color 4#E0BBE4
·
Color 5#957DAD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.1:1Fail
1.3:1Fail
2.8:1Fail
2
1.1:1Fail
1:1Fail
1.5:1Fail
3.2:1AA18
3
1.1:1Fail
1:1Fail
1.4:1Fail
3.1:1AA18
4
1.3:1Fail
1.5:1Fail
1.4:1Fail
2.1:1Fail
5
2.8:1Fail
3.2:1AA18
3.1:1AA18
2.1:1Fail

Similar palettes

More like Soft Petal Whisper

View all pastel