Back to palettes

Palette

Pastel Cotton Candy

A delightful blend of airy pastels, like spun sugar floating in a whimsical sky.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F6D1F0#F8E6FE#D5F9D1#F9F9D1#D1DDF9

Palette guide

How to use Pastel Cotton Candy

Overview

The Pastel Cotton Candy palette is a delightful blend of airy pastels, like spun sugar floating in a whimsical sky. Featuring enchanting hues such as the soft pink #F6D1F0, the delicate lavender #F8E6FE, and the cheerful mint #D5F9D1, this collection is perfect for creating playful and dreamy designs. Developers will find these light, harmonious colors excellent for engaging user interfaces, while designers can leverage their sweet aesthetic for branding that conveys innocence, joy, and a touch of fantasy. The inclusion of #F9F9D1 adds a sunny, inviting element, making the palette versatile for projects needing a gentle, uplifting feel.

Best used for

  • Children's toy packaging and branding
  • Baby shower invitations and decor
  • Sweet shop or candy store visual identity
  • Whimsical blog or personal website design
  • Mobile app interfaces for casual games or lifestyle
  • Social media campaigns for playful brands

Suggested color roles

primary

Use #F6D1F0 as a charming primary color for brand identity or prominent design elements.

secondary

Employ #F8E6FE for supporting content blocks, subheadings, or subtle background textures.

accent

Apply #D1DDF9 for interactive elements, call-to-action buttons, or to add a refreshing, cool touch.

background

Utilize #F9F9D1 for main content areas, providing a bright, cheerful, and inviting canvas.

text

A dark charcoal or deep navy text color will provide excellent contrast and maintain the palette's playful yet legible aesthetic.

Accessibility notes

  • All colors are very light; ensure text has sufficient contrast by using dark text (e.g., black, dark gray, or navy).
  • Avoid using light text on any of these pastel backgrounds to prevent readability issues, especially for small fonts.
  • When using #F9F9D1 or #F8E6FE as backgrounds, ensure any overlaid text or icons are significantly darker.
  • Consider using a slightly bolder font weight for body text to improve readability against these soft backgrounds.

Recommended combinations

Candy Swirl

Create vibrant, layered backgrounds or playful graphic elements for a sweet theme.

#F6D1F0 · #F8E6FE · #D5F9D1

Dreamy Sky

Design soft, ethereal gradients for headers or large visual sections.

#F9F9D1 · #D1DDF9 · #F8E6FE

Playful Pop

Highlight key information or interactive components with a balanced mix of warm and cool pastels.

#F6D1F0 · #D1DDF9 · #D5F9D1

CSS variables

:root {
  --pastel-cotton-candy-1: #F6D1F0;
  --pastel-cotton-candy-2: #F8E6FE;
  --pastel-cotton-candy-3: #D5F9D1;
  --pastel-cotton-candy-4: #F9F9D1;
  --pastel-cotton-candy-5: #D1DDF9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pastel-cotton-candy": {
        1: "#F6D1F0",
        2: "#F8E6FE",
        3: "#D5F9D1",
        4: "#F9F9D1",
        5: "#D1DDF9",
      }
    }
  }
}

Related searches

cotton candy color schemesweet pastel palettedreamy light colorsplayful soft designairy candy aesthetic

Palette colors

Hex values

Color 1#F6D1F0
·
Color 2#F8E6FE
·
Color 3#D5F9D1
·
Color 4#F9F9D1
·
Color 5#D1DDF9
·

Accessibility

Contrast checker

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

Similar palettes

More like Pastel Cotton Candy

View all pastel