Palette

Cotton Candy Dreams

Soft, airy pastels that float like clouds of cotton candy, bringing a whimsical, dreamlike feel.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cotton Candy Dreams 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 Cotton Candy Dreams.

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

Data visualization

#F0FFF0#FFE4E1#FFC0CB#E0BBE4#957DAD

Palette guide

How to use Cotton Candy Dreams

Overview

The Cotton Candy Dreams palette offers soft, airy pastels that float like clouds of cotton candy, bringing a whimsical, dreamlike feel. It features pristine #F0FFF0 (Honeydew) and #FFE4E1 (Misty Rose), alongside gentle pinks like #FFC0CB (Pink) and #E0BBE4 (Lavender). A deeper #957DAD (Lavender Gray) adds a grounding, sophisticated touch. This palette is ideal for designs that aim for a sweet, innocent, and playful feel, perfect for baby brands, romantic aesthetics, or any project requiring a touch of lighthearted charm and ethereal beauty.

Best used for

Baby and children's product branding
Romantic lifestyle blogs and websites
Sweet shop or dessert branding
Wedding and baby shower invitations
Spa or wellness brand aesthetics
Soft and whimsical social media content

Suggested color roles

primary

Use #F0FFF0 or #FFE4E1 as a soft, ethereal background, creating an open and inviting space.

secondary

Apply #FFC0CB or #E0BBE4 for distinct sections, headers, or subtle patterned elements.

accent

Utilize #957DAD for delicate highlights, small icons, or a subtle glow on interactive components, offering depth.

background

The lightest hues #F0FFF0 and #FFE4E1 are excellent for creating airy, gentle backdrops.

text

For primary text, use a dark charcoal or medium gray. Avoid using light pastels for body text.

Accessibility notes

Ensure sufficient contrast between dark text (charcoal, medium gray) and all light pastel backgrounds.
Avoid using any of the palette's colors for text on other light colors; they will fail contrast checks for readability.
Use these colors primarily for backgrounds, illustrations, and non-textual elements.
When using for critical information, pair with a highly contrasting dark text color like black or #333333.

Recommended combinations

Dreamy Blend

Creates a serene, layered background effect, perfect for a dreamy and inviting atmosphere.

#F0FFF0 · #FFE4E1 · #E0BBE4

Sweet Whisper

Ideal for delicate elements, blending soft pinks and lavender for a gentle, whimsical feel.

#FFC0CB · #E0BBE4 · #957DAD

Cloud Gradient

Combines a soft pink, near-white, and a brighter pink for playful yet gentle patterns or section dividers.

#FFE4E1 · #F0FFF0 · #FFC0CB

CSS variables

:root {
  --cotton-candy-dreams-1: #F0FFF0;
  --cotton-candy-dreams-2: #FFE4E1;
  --cotton-candy-dreams-3: #FFC0CB;
  --cotton-candy-dreams-4: #E0BBE4;
  --cotton-candy-dreams-5: #957DAD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cotton-candy-dreams": {
        1: "#F0FFF0",
        2: "#FFE4E1",
        3: "#FFC0CB",
        4: "#E0BBE4",
        5: "#957DAD",
      }
    }
  }
}

Hex values

Color 1#F0FFF0

Color 2#FFE4E1

Color 3#FFC0CB

Color 4#E0BBE4

Color 5#957DAD

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

1.6:1Fail

3.5:1AA18

1.2:1Fail

1.3:1Fail

1.4:1Fail

3:1Fail

1.5:1Fail

1.3:1Fail

1.1:1Fail

2.3:1Fail

1.6:1Fail

1.4:1Fail

1.1:1Fail

2.1:1Fail

3.5:1AA18

3:1Fail

2.3:1Fail

2.1:1Fail

Similar palettes

More like Cotton Candy Dreams

View all pastel

Bubblegum Dream Pop

Cotton Candy Dream

Powdered Macaron Bliss

Sugarplum Fairy Dream

Sweet Candy Floss

Bubblegum Dream Cloud