Palette

Whispering Orchid Petal

Delicate and airy, like the tender petals of an orchid blooming softly in the morning light.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whispering Orchid 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 Whispering Orchid Petal.

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

Data visualization

#B5838D#E0BBE4#97CAF2#DEDAD2#9D8289

Palette guide

How to use Whispering Orchid Petal

Overview

The "Whispering Orchid Petal" palette is a unique blend of soft pastels, featuring unexpected yet harmonious interplay between a delicate rose, a gentle lavender, and a serene light blue. With #E0BBE4 providing a soft purple and #97CAF2 introducing a cool, airy blue, grounded by the muted rose of #B5838D and #9D8289, and balanced by the neutral #DEDAD2. This combination offers designers a versatile toolkit for creating designs that feel light, dreamy, and subtly romantic. It's ideal for projects that require a touch of whimsy and elegance without being overly feminine or stark.

Best used for

Children's book illustrations or websites
Spring-themed event branding
Artistic or creative portfolio sites
Boutique clothing or accessory brands
Nature-inspired web designs
Personal blogs with a gentle aesthetic

Suggested color roles

primary

#B5838D - A soft, muted rose that provides a warm, inviting anchor, suitable for main headings or feature sections.

secondary

#E0BBE4 - A gentle lavender that offers a calming contrast, ideal for secondary information, backgrounds, or decorative elements.

accent

#97CAF2 - A light, serene blue that adds a fresh, airy pop, perfect for interactive elements, highlights, or graphical accents.

background

#DEDAD2 - A neutral, warm off-white that serves as a clean, soft canvas, allowing the other colors to breathe and ensuring good readability.

text

#9D8289 - A deeper, more saturated rose-brown, providing excellent contrast on lighter backgrounds for body text and important headlines, maintaining warmth.

Accessibility notes

Ensure #9D8289 text on #DEDAD2 background meets WCAG AA contrast for main body text.
Avoid using #E0BBE4 or #97CAF2 for small text on the #DEDAD2 background as contrast will likely be insufficient.
For critical UI elements, consider using a darker neutral like #333333 if #9D8289 doesn't provide enough contrast against specific backgrounds.
Use sufficient color contrast for interactive states (e.g., hover/focus) on buttons or links.

Recommended combinations

Dreamy Sky

Creates an airy, serene feel, perfect for backgrounds or ethereal illustrations.

#97CAF2 · #E0BBE4 · #DEDAD2

Rose Garden

A warm, inviting combination for primary content areas or branding.

#B5838D · #DEDAD2 · #9D8289

Gentle Whimsy

A vibrant yet soft trio for decorative elements or playful accents.

#E0BBE4 · #97CAF2 · #B5838D

CSS variables

:root {
  --whispering-orchid-petal-1: #B5838D;
  --whispering-orchid-petal-2: #E0BBE4;
  --whispering-orchid-petal-3: #97CAF2;
  --whispering-orchid-petal-4: #DEDAD2;
  --whispering-orchid-petal-5: #9D8289;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whispering-orchid-petal": {
        1: "#B5838D",
        2: "#E0BBE4",
        3: "#97CAF2",
        4: "#DEDAD2",
        5: "#9D8289",
      }
    }
  }
}

Hex values

Color 1#B5838D

Color 2#E0BBE4

Color 3#97CAF2

Color 4#DEDAD2

Color 5#9D8289

Accessibility

Contrast checker

1.9:1Fail

1.8:1Fail

2.3:1Fail

1.1:1Fail

1.9:1Fail

1:1Fail

1.2:1Fail

2.1:1Fail

1.8:1Fail

1:1Fail

1.3:1Fail

2:1Fail

2.3:1Fail

1.2:1Fail

1.3:1Fail

2.5:1Fail

1.1:1Fail

2.1:1Fail

2:1Fail

2.5:1Fail

Similar palettes

More like Whispering Orchid Petal

View all pastel

Orchid Petal Softness

Porcelain Bloom

Soft Blossom Petals

Blushing Rose Dew

Cherry Blossom Breeze

Cherry Blossom Dawn