Palette

Fairy Blossom Whisper

A light and airy palette, like ephemeral fairy blossoms dancing in a gentle, magical breeze.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FFC0CB#E6E6FA#DDA0DD#B0E0E6#ADD8E6

Palette guide

How to use Fairy Blossom Whisper

Overview

The Fairy Blossom Whisper palette is a delicate and ethereal collection, perfect for projects seeking a soft, dreamy aesthetic. Featuring gentle pastels like the blush pink #FFC0CB, the subtle lavender #E6E6FA, and the deeper plum #DDA0DD, it evokes a sense of lightheartedness and subtle elegance. Complementing these are the serene blues, powder blue #B0E0E6 and light blue #ADD8E6, which add a refreshing, airy touch. This versatile palette is ideal for creating inviting and tranquil user experiences, ensuring a harmonious visual flow without overwhelming the senses. Designers and developers can leverage its soft hues for interfaces that feel approachable and sophisticated.

Best used for

Children's book illustrations and educational apps
Wedding and event stationery or websites
Spa, wellness, or beauty brand identity
Delicate fashion or jewelry e-commerce sites
Feminine lifestyle blogs and social media
Baby product packaging and branding

Suggested color roles

primary

#DDA0DD - A lovely choice for main headings or key interactive elements, providing a soft anchor without being too dominant.

secondary

#FFC0CB - Excellent for subheadings, call-to-action buttons, or decorative elements, adding warmth and approachability.

accent

#ADD8E6 - Use sparingly for highlights, icons, or small interactive states, offering a refreshing pop against warmer tones.

background

#E6E6FA - An incredibly soft and calming background, perfect for large content areas, allowing other elements to gently stand out.

text

For body text, a dark charcoal like #333333 provides good readability against light backgrounds. For larger headings, #DDA0DD can work. Avoid using very light palette colors for main body text.

Accessibility notes

Ensure sufficient contrast when pairing lighter palette colors with text. #E6E6FA or #B0E0E6 are too light for body text on their own.
Use a dark text color (e.g., #333333 or black) against #E6E6FA or #B0E0E6 for optimal readability, especially for small text.
The #DDA0DD or #FFC0CB can be used for larger text elements or headlines but should be checked with a contrast checker against their background.
Avoid placing light text (e.g., white) directly on #FFC0CB or #B0E0E6, as contrast will be insufficient for most users.

Recommended combinations

Soft Elegance

Ideal for elegant invitations, website headers, or UI elements where a gentle yet distinguished look is desired.

#E6E6FA · #DDA0DD · #FFC0CB

Dreamy Serenity

Perfect for backgrounds, hero sections, or illustrations that aim to evoke calmness, freshness, and an airy feel.

#B0E0E6 · #ADD8E6 · #E6E6FA

Playful Bloom

Great for playful branding, children's interfaces, or decorative accents that require a touch of whimsy and vibrancy.

#FFC0CB · #DDA0DD · #ADD8E6

CSS variables

:root {
  --fairy-blossom-whisper-1: #FFC0CB;
  --fairy-blossom-whisper-2: #E6E6FA;
  --fairy-blossom-whisper-3: #DDA0DD;
  --fairy-blossom-whisper-4: #B0E0E6;
  --fairy-blossom-whisper-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fairy-blossom-whisper": {
        1: "#FFC0CB",
        2: "#E6E6FA",
        3: "#DDA0DD",
        4: "#B0E0E6",
        5: "#ADD8E6",
      }
    }
  }
}

Hex values

Color 1#FFC0CB

Color 2#E6E6FA

Color 3#DDA0DD

Color 4#B0E0E6

Color 5#ADD8E6

Accessibility

Contrast checker

1.2:1Fail

1.3:1Fail

1.1:1Fail

1:1Fail

1.2:1Fail

1.7:1Fail

1.2:1Fail

1.3:1Fail

1.7:1Fail

1.4:1Fail

1.1:1Fail

1.2:1Fail

1.4:1Fail

1.1:1Fail

1:1Fail

1.2:1Fail

1.4:1Fail

1.1:1Fail

Similar palettes

More like Fairy Blossom Whisper

Fairy Blossom Whisper

See it in context.

Ready when you are.

Built with Fairy Blossom Whisper.

How to use Fairy Blossom Whisper

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Elegance

Dreamy Serenity

Playful Bloom

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Fairy Blossom Whisper