Palette

Cloud Whisper Bloom

A delicate array of soft pastels, capturing the gentle, airy feel of blossoms drifting on a cloudy breeze.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloud Whisper Bloom 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 Cloud Whisper Bloom.

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

Data visualization

#F0F8FF#E6E6FA#D8BFD8#FAFAD2#B0E0E6

Palette guide

How to use Cloud Whisper Bloom

Overview

The Cloud Whisper Bloom palette offers a delicate array of soft pastels, capturing the gentle, airy feel of blossoms drifting on a cloudy breeze. With ethereal hues like the inviting #F0F8FF, the subtle #E6E6FA, the muted #D8BFD8, the warm #FAFAD2, and the refreshing #B0E0E6, this collection offers a truly tranquil aesthetic. It's an excellent choice for designers and developers aiming for a dreamy, soothing, and light-hearted feel. Leverage these subtle pastels to create enchanting digital experiences, gentle branding, or serene physical spaces, fostering an inviting and visually calming presence that evokes the quiet charm of a delicate bloom.

Best used for

Baby product marketing
Children's website design
Spring event invitations
Confectionery branding
Relaxation and wellness apps
Romantic blog themes

Suggested color roles

primary

Use #B0E0E6 as a gentle primary for headers or main elements, offering a soft sky-blue anchor.

secondary

Employ #D8BFD8 for supporting sections or subheadings, introducing a delicate lavender element.

accent

Apply #FAFAD2 for drawing attention to delightful details, calls-to-action, or soft highlights. Its warmth adds a charming touch.

background

Utilize #F0F8FF for clean, expansive backgrounds. This very light blue-white creates an airy, serene canvas.

text

For body text on light backgrounds like #F0F8FF or #E6E6FA, a dark charcoal (#333333) or black is recommended, as palette colors are too light for extensive text.

Accessibility notes

This palette is very light. Most text-on-color combinations within the palette will likely fail WCAG contrast standards.
Always use a very dark charcoal or black text color for all body text and critical information to ensure readability.
The palette is best for backgrounds, accents, and subtle layering, not for text-heavy interfaces without external dark text colors.
Use a contrast checker diligently for any text elements, even if using an external dark color, to ensure sufficient contrast against the chosen background shade.

Recommended combinations

Blossom Breeze

Ideal for a soft, airy brand. #B0E0E6 for gentle headers, #D8BFD8 for accents, and #F0F8FF for a clean background.

#B0E0E6 · #D8BFD8 · #F0F8FF

Petal Haze

Excellent for delicate accents or subtle gradients, adding warmth and softness.

#E6E6FA · #FAFAD2 · #D8BFD8

Ethereal Bloom

Creates an expansive, bright feel. #D8BFD8 for main content, with #E6E6FA and #F0F8FF for layered backgrounds.

#D8BFD8 · #E6E6FA · #F0F8FF

CSS variables

:root {
  --cloud-whisper-bloom-1: #F0F8FF;
  --cloud-whisper-bloom-2: #E6E6FA;
  --cloud-whisper-bloom-3: #D8BFD8;
  --cloud-whisper-bloom-4: #FAFAD2;
  --cloud-whisper-bloom-5: #B0E0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-whisper-bloom": {
        1: "#F0F8FF",
        2: "#E6E6FA",
        3: "#D8BFD8",
        4: "#FAFAD2",
        5: "#B0E0E6",
      }
    }
  }
}

Hex values

Color 1#F0F8FF

Color 2#E6E6FA

Color 3#D8BFD8

Color 4#FAFAD2

Color 5#B0E0E6

Accessibility

Contrast checker

1.1:1Fail

1.6:1Fail

1:1Fail

1.3:1Fail

1.1:1Fail

1.4:1Fail

1.2:1Fail

1.6:1Fail

1.4:1Fail

1.6:1Fail

1.2:1Fail

1:1Fail

1.2:1Fail

1.6:1Fail

1.3:1Fail

1.2:1Fail

1.3:1Fail

Similar palettes

More like Cloud Whisper Bloom

Cloud Whisper Bloom

See it in context.

Ready when you are.

Built with Cloud Whisper Bloom.

How to use Cloud Whisper Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Blossom Breeze

Petal Haze

Ethereal Bloom

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Cloud Whisper Bloom