Back to palettes

Palette

Cotton Candy Sky

Soft, sugary hues that resemble the delightful, airy clouds of a magical, candy-floss sunset.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F8BBD0#E1BEE7#B3E5FC#A7FFEB#FFECB3

Palette guide

How to use Cotton Candy Sky

Overview

The 'Cotton Candy Sky' palette captures the delightful, airy clouds of a magical, candy-floss sunset with its soft, sugary hues. This playful collection includes a vibrant pink (#F8BBD0), a gentle lavender (#E1BEE7), a bright sky blue (#B3E5FC), a fresh mint green (#A7FFEB), and a warm, creamy yellow (#FFECB3). Ideal for designers and developers aiming to create whimsical, lighthearted, and inviting digital or physical products. These harmonious pastels lend themselves beautifully to projects requiring a youthful, dreamy, or sweet aesthetic, ensuring a charming and memorable user experience.

Best used for

  • Children's toy packaging
  • Sweet shop branding and interiors
  • Creative art and craft supplies
  • Whimsical event invitations
  • Mobile game interfaces
  • Summer fashion accessories

Suggested color roles

primary

#F8BBD0 (Pink) - A dominant, sweet hue perfect for main branding elements, hero sections, or playful calls-to-action.

secondary

#B3E5FC (Sky Blue) - Offers a refreshing contrast, excellent for backgrounds, complementary sections, or UI accents.

accent

#A7FFEB (Mint Green) - A crisp, enlivening accent for interactive elements, icons, or subtle highlights.

background

#E1BEE7 (Lavender) - Provides a soft, dreamy foundation for content, creating a serene and inviting atmosphere.

text

#FFECB3 (Creamy Yellow) - Best for large, decorative text. For readability, use a dark neutral like black or dark grey (#444444) on lighter backgrounds.

Accessibility notes

  • Many colors are light; ensure sufficient contrast for text, especially when pairing light colors.
  • Avoid using #FFECB3 for small body text against other light pastels to maintain readability.
  • For critical text, use a dark, contrasting color such as charcoal or a deep navy on #E1BEE7 or #B3E5FC.
  • Test color combinations for WCAG AA compliance, particularly for interactive elements and small text.

Recommended combinations

Sunset Glow

Ideal for vibrant, playful marketing materials or digital illustrations.

#F8BBD0 · #B3E5FC · #FFECB3

Minty Dream

Great for unique branding, refreshing web layouts, or creative product designs.

#E1BEE7 · #A7FFEB · #F8BBD0

Airy Pastels

Perfect for light backgrounds, subtle gradients, or decorative UI components.

#B3E5FC · #FFECB3 · #A7FFEB

CSS variables

:root {
  --cotton-candy-sky-1: #F8BBD0;
  --cotton-candy-sky-2: #E1BEE7;
  --cotton-candy-sky-3: #B3E5FC;
  --cotton-candy-sky-4: #A7FFEB;
  --cotton-candy-sky-5: #FFECB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cotton-candy-sky": {
        1: "#F8BBD0",
        2: "#E1BEE7",
        3: "#B3E5FC",
        4: "#A7FFEB",
        5: "#FFECB3",
      }
    }
  }
}

Related searches

candy floss colorsdreamy pastel palettepink blue green yellowwhimsical sunset huesairy design scheme

Palette colors

Hex values

Color 1#F8BBD0
·
Color 2#E1BEE7
·
Color 3#B3E5FC
·
Color 4#A7FFEB
·
Color 5#FFECB3
·

Accessibility

Contrast checker

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

Similar palettes

More like Cotton Candy Sky

View all pastel
Sugared Cloud Puff
Bubblegum Dream Cloud
Candy Floss Dream
Cotton Candy Clouds
Whimsical Unicorn Treat
Bubblegum Carnival Pop