Back to palettes

Palette

Cotton Candy Clouds

A delightful and airy palette reminiscent of fluffy, sugary confections and dreamy skies.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FDDDE6#CDEBF7#E6F5DD#FFF8DD#FFD9EC

Palette guide

How to use Cotton Candy Clouds

Overview

The Cotton Candy Clouds palette is a delightful and airy collection reminiscent of fluffy, sugary confections and dreamy skies. It features soft pinks like #FDDDE6 and #FFD9EC, alongside gentle blues like #CDEBF7. Soothing greens like #E6F5DD and creamy yellows like #FFF8DD complete this whimsical spectrum. This palette is ideal for designs that aim for a sweet, innocent, and playful feel, perfect for confectionary branding, children's products, or any project requiring a touch of lighthearted charm and ethereal beauty.

Best used for

  • Confectionery branding and packaging
  • Children's book illustrations
  • Baby clothing and accessories design
  • Whimsical event invitations
  • Lifestyle blogs with a soft, cheerful vibe
  • Pastel-themed social media content

Suggested color roles

primary

Use #FFF8DD or #E6F5DD as a soft, inviting background, creating an open and airy space.

secondary

Apply #CDEBF7 or #FDDDE6 for distinct sections, headers, or subtle patterned elements.

accent

Utilize #FFD9EC for delicate highlights, small icons, or a subtle glow on interactive components.

background

The lightest hues #FFF8DD and #E6F5DD 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

Sweet Dreams

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

#FFF8DD · #CDEBF7 · #FDDDE6

Confectionery Pop

Ideal for playful graphics, blending pink, green, and a deeper pink for a cheerful contrast.

#FDDDE6 · #E6F5DD · #FFD9EC

Airy Gradient

Perfect for subtle background gradients, evoking a gentle transition of sky-like colors.

#CDEBF7 · #FFF8DD · #E6F5DD

CSS variables

:root {
  --cotton-candy-clouds-1: #FDDDE6;
  --cotton-candy-clouds-2: #CDEBF7;
  --cotton-candy-clouds-3: #E6F5DD;
  --cotton-candy-clouds-4: #FFF8DD;
  --cotton-candy-clouds-5: #FFD9EC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cotton-candy-clouds": {
        1: "#FDDDE6",
        2: "#CDEBF7",
        3: "#E6F5DD",
        4: "#FFF8DD",
        5: "#FFD9EC",
      }
    }
  }
}

Related searches

pastel candy color palettesweet pink blue green schemewhimsical light brandingchildren's design colorsairy dreamy aesthetic

Palette colors

Hex values

Color 1#FDDDE6
·
Color 2#CDEBF7
·
Color 3#E6F5DD
·
Color 4#FFF8DD
·
Color 5#FFD9EC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.1:1Fail
1.2:1Fail
1:1Fail
2
1:1Fail
1.1:1Fail
1.2:1Fail
1:1Fail
3
1.1:1Fail
1.1:1Fail
1.1:1Fail
1.1:1Fail
4
1.2:1Fail
1.2:1Fail
1.1:1Fail
1.2:1Fail
5
1:1Fail
1:1Fail
1.1:1Fail
1.2:1Fail

Similar palettes

More like Cotton Candy Clouds

View all pastel
Bubblegum Dream Cloud
Confection Cloud Blush
Cotton Candy Dream
Cotton Candy Dream
Cotton Candy Sky
Cotton Candy Sunset