Palette

Whimsical Candy Clouds

A soft, dreamy collection reminiscent of fluffy, sweet candy floss and gentle clouds.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Whimsical Candy Clouds 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 Whimsical Candy Clouds.

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

Data visualization

#F9EBEA#F5DDE7#E0BBE4#957DAD#D2ADD8

Palette guide

How to use Whimsical Candy Clouds

Overview

The Whimsical Candy Clouds palette offers a soft, dreamy collection perfect for designs requiring a gentle and ethereal touch. With hues like the airy pink #F9EBEA, the delicate #F5DDE7, and the more pronounced #E0BBE4, this palette evokes feelings of calm and sweetness. The deeper #957DAD and the balanced #D2ADD8 provide subtle depth without sacrificing the overall lightness. Designers and developers can leverage these pastels to create sophisticated yet playful interfaces, branding, or illustrations that feel both inviting and serene, ideal for projects targeting a soft, feminine, or child-friendly aesthetic.

Best used for

Baby product branding and packaging
Wedding invitations and decor
Spa or beauty website design
Children's book illustrations
Gentle mobile app interfaces
Fashion accessory lines

Suggested color roles

primary

Use #957DAD as a primary color for navigation or key headings, providing a soft anchor for the lighter shades.

secondary

Employ #E0BBE4 for subheadings, secondary buttons, or larger graphic elements to expand the palette's gentle theme.

accent

Apply #D2ADD8 sparingly for subtle highlights, interactive states, or decorative flourishes to add a touch of playful elegance.

background

Utilize #F9EBEA as a primary background color to maintain an airy, light, and clean canvas across your design.

text

For body text, consider a dark charcoal or black for readability. Use #957DAD for larger, less critical text elements like subheadings or captions.

Accessibility notes

Ensure sufficient contrast when using lighter text on #F9EBEA or #F5DDE7 backgrounds.
For body text, always use a dark neutral color (e.g., black or dark grey) to guarantee readability.
The darker #957DAD offers the best contrast for text against the lighter background colors.
Consider increasing font sizes for text elements rendered in #E0BBE4 or #D2ADD8 to improve legibility.

Recommended combinations

Soft Gradient

Ideal for creating ethereal backgrounds, subtle transitions, or layered graphical elements.

#F9EBEA · #F5DDE7 · #E0BBE4

Dreamy Contrast

Effective for main headers against a light background, paired with a complementary accent for calls to action.

#957DAD · #F9EBEA · #D2ADD8

Playful Trio

Perfect for UI elements, playful illustrations, or subtle decorative patterns.

#E0BBE4 · #D2ADD8 · #F5DDE7

CSS variables

:root {
  --whimsical-candy-clouds-1: #F9EBEA;
  --whimsical-candy-clouds-2: #F5DDE7;
  --whimsical-candy-clouds-3: #E0BBE4;
  --whimsical-candy-clouds-4: #957DAD;
  --whimsical-candy-clouds-5: #D2ADD8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "whimsical-candy-clouds": {
        1: "#F9EBEA",
        2: "#F5DDE7",
        3: "#E0BBE4",
        4: "#957DAD",
        5: "#D2ADD8",
      }
    }
  }
}

Hex values

Color 1#F9EBEA

Color 2#F5DDE7

Color 3#E0BBE4

Color 4#957DAD

Color 5#D2ADD8

Accessibility

Contrast checker

1.1:1Fail

1.5:1Fail

3.1:1AA18

1.7:1Fail

1.1:1Fail

1.3:1Fail

2.8:1Fail

1.5:1Fail

1.3:1Fail

2.1:1Fail

1.2:1Fail

3.1:1AA18

2.8:1Fail

2.1:1Fail

1.8:1Fail

1.7:1Fail

1.5:1Fail

1.2:1Fail

1.8:1Fail

Similar palettes

More like Whimsical Candy Clouds

Whimsical Candy Clouds

See it in context.

Ready when you are.

Built with Whimsical Candy Clouds.

How to use Whimsical Candy Clouds

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Gradient

Dreamy Contrast

Playful Trio

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Whimsical Candy Clouds