Back to palettes

Palette

Gentle Blossom Whisper

Delicate pinks and creams capture the ephemeral beauty of soft petals in spring.

pastelcalm5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gentle Blossom 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 Gentle Blossom Whisper.

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

Data visualization

#FDE8ED#FBDCE4#F8CEDC#F4BFD4#F0B0CC

Palette guide

How to use Gentle Blossom Whisper

Overview

The "Gentle Blossom Whisper" palette (ID: gentle-blossom-whisper-2) captures the ephemeral beauty of spring petals with its delicate range of soft pinks. From the almost-white #FDE8ED to the progressively deeper hues of #FBDCE4, #F8CEDC, #F4BFD4, and the charming #F0B0CC, this collection evokes a sense of tenderness and tranquility. Designers can utilize this gradient of pinks to create feminine, soft, and inviting visual experiences. Developers will find these harmonious pastels perfect for crafting romantic branding, gentle user interfaces, or designs that require a touch of delicate warmth and subtle elegance.

Best used for

  • Baby and children's product design
  • Wedding and bridal industry branding
  • Beauty and cosmetic websites
  • Boutique fashion e-commerce
  • Spring-themed event marketing
  • Feminine lifestyle blogs

Suggested color roles

primary

#FDE8ED - An extremely light, soft pink, ideal as the main background, providing a clean and gentle canvas.

secondary

#FBDCE4 - A slightly deeper pink, suitable for subtle section breaks, card backgrounds, or header accents.

accent

#F0B0CC - The deepest pink, perfect for calls-to-action, important links, or decorative elements to provide a gentle focal point.

background

#FDE8ED - The primary background color, ensuring a soft, airy, and inviting feel.

text

A dark charcoal or black (e.g., #333333 or #000000) - Essential for readability against these very light pinks.

Accessibility notes

  • Crucially, use dark text (e.g., black or dark gray) on all these light pink backgrounds to meet WCAG contrast standards.
  • Avoid using any of the lighter pinks for text on other pink backgrounds, as contrast will be insufficient.
  • #F0B0CC offers the best potential for readable text *among* the palette colors, but still requires careful pairing.
  • Ensure interactive elements have clear visual states beyond just color changes.

Recommended combinations

Petal Gradient

Create soft, seamless gradients for backgrounds or subtle overlays, mimicking delicate petals.

#FDE8ED · #FBDCE4 · #F8CEDC

Gentle Highlight

Use the darkest pink as an accent against the lightest background for gentle emphasis.

#FDE8ED · #F0B0CC · #F4BFD4

Soft Layers

Ideal for layered UI elements like cards or modals, providing depth with subtle color shifts.

#FBDCE4 · #F8CEDC · #F4BFD4

CSS variables

:root {
  --gentle-blossom-whisper-2-1: #FDE8ED;
  --gentle-blossom-whisper-2-2: #FBDCE4;
  --gentle-blossom-whisper-2-3: #F8CEDC;
  --gentle-blossom-whisper-2-4: #F4BFD4;
  --gentle-blossom-whisper-2-5: #F0B0CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gentle-blossom-whisper-2": {
        1: "#FDE8ED",
        2: "#FBDCE4",
        3: "#F8CEDC",
        4: "#F4BFD4",
        5: "#F0B0CC",
      }
    }
  }
}

Related searches

soft pink color palettedelicate spring colorsfeminine pastel web designblush pink brand identitymonochromatic pink scheme

Palette colors

Hex values

Color 1#FDE8ED
·
Color 2#FBDCE4
·
Color 3#F8CEDC
·
Color 4#F4BFD4
·
Color 5#F0B0CC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.2:1Fail
1.4:1Fail
1.5:1Fail
2
1.1:1Fail
1.1:1Fail
1.2:1Fail
1.4:1Fail
3
1.2:1Fail
1.1:1Fail
1.1:1Fail
1.3:1Fail
4
1.4:1Fail
1.2:1Fail
1.1:1Fail
1.1:1Fail
5
1.5:1Fail
1.4:1Fail
1.3:1Fail
1.1:1Fail

Similar palettes

More like Gentle Blossom Whisper

View all pastel