Back to palettes

Palette

Cloud Cotton Fluff

Light and airy, this palette captures the whimsical softness and sugary sweetness of cotton candy clouds.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloud Cotton Fluff 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 Cotton Fluff.

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

Data visualization

#FFB6C1#FFDAB9#E0BBE4#957DAD#FFC0CB

Palette guide

How to use Cloud Cotton Fluff

Overview

This soft, dreamy Cloud Cotton Fluff palette evokes a whimsical and sweet aesthetic, perfect for designs requiring a gentle touch. Featuring delicate pinks like #FFB6C1 (Light Pink) and #FFC0CB (Pink), it's balanced by the warm peach hue of #FFDAB9 (Peach Puff) and subtle purples. The muted lavender #E0BBE4 (Lavender Blush) and deeper plum #957DAD (Amethyst) add depth without losing the palette's inherent lightness. Developers can leverage these hex codes for UI elements, branding, or digital illustrations where a soft, approachable feel is paramount. Its pastel nature makes it ideal for backgrounds, subtle accents, or feminine-leaning projects.

Best used for

  • Baby and children's product branding
  • Feminine lifestyle blogs and websites
  • Dessert shop or bakery branding
  • Wedding invitations and event decor
  • Beauty and skincare packaging
  • Soft UI themes for mobile apps

Suggested color roles

primary

Use #FFB6C1 as a gentle, inviting base for main content areas or hero sections, conveying softness and warmth.

secondary

Apply #E0BBE4 for secondary buttons, navigation elements, or as a complementary background shade, maintaining the ethereal feel.

accent

Highlight key calls-to-action or interactive elements with #957DAD for a sophisticated pop against the lighter tones.

background

Utilize #FFDAB9 for large background areas or card surfaces to create a light, airy canvas that feels warm and welcoming.

text

For body text, a dark charcoal or black is recommended for readability. For headings, use #957DAD on light backgrounds.

Accessibility notes

  • Ensure sufficient contrast between #957DAD and lighter colors like #FFDAB9 for text readability.
  • Avoid using #FFB6C1 and #FFC0CB together for text and background as their low contrast will hinder accessibility.
  • Pair lighter colors like #FFDAB9 with very dark text (e.g., #222222) for optimal readability.
  • Consider larger font sizes or bolding when using pastel colors for important information.

Recommended combinations

Soft UI

Ideal for gentle user interface elements, cards, and subtle gradients.

#FFDAB9 · #E0BBE4 · #957DAD

Whimsical Branding

Perfect for feminine brand identities, social media graphics, and playful headers.

#FFB6C1 · #FFC0CB · #E0BBE4

Dreamy Backdrop

Creates a serene, layered background effect for web pages or digital art.

#FFDAB9 · #E0BBE4 · #FFB6C1

CSS variables

:root {
  --cloud-cotton-fluff-1: #FFB6C1;
  --cloud-cotton-fluff-2: #FFDAB9;
  --cloud-cotton-fluff-3: #E0BBE4;
  --cloud-cotton-fluff-4: #957DAD;
  --cloud-cotton-fluff-5: #FFC0CB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-cotton-fluff": {
        1: "#FFB6C1",
        2: "#FFDAB9",
        3: "#E0BBE4",
        4: "#957DAD",
        5: "#FFC0CB",
      }
    }
  }
}

Related searches

pastel pink purple palettesoft sweet color schemedreamy cotton candy colorslight feminine web designgentle UI color ideas

Palette colors

Hex values

Color 1#FFB6C1
·
Color 2#FFDAB9
·
Color 3#E0BBE4
·
Color 4#957DAD
·
Color 5#FFC0CB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1:1Fail
2.2:1Fail
1.1:1Fail
2
1.3:1Fail
1.3:1Fail
2.7:1Fail
1.2:1Fail
3
1:1Fail
1.3:1Fail
2.1:1Fail
1.1:1Fail
4
2.2:1Fail
2.7:1Fail
2.1:1Fail
2.3:1Fail
5
1.1:1Fail
1.2:1Fail
1.1:1Fail
2.3:1Fail

Similar palettes

More like Cloud Cotton Fluff

View all pastel