Back to palettes

Palette

Sugared Confection Dreams

A delightful, sugary palette inspired by whimsical candy shops and soft, sweet confections.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sugared Confection 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 Sugared Confection Dreams.

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

Data visualization

#FFDDE1#FFC3C8#F9A4AE#E87A88#CC5B6A

Palette guide

How to use Sugared Confection Dreams

Overview

The Sugared Confection Dreams palette is a delightful journey into a world of sweet, playful hues, perfect for projects requiring a touch of whimsical charm. Featuring a range from the softest #FFDDE1 to the vibrant #CC5B6A, this palette evokes images of candy shops and sugary treats. The gentle pinks like #FFC3C8 and #F9A4AE are ideal for feminine branding, children's products, or romantic themes. Developers will find these colors excellent for creating cheerful user interfaces, while designers can leverage the warmth of #E87A88 for captivating illustrations and marketing materials. Its sugary aesthetic promises to bring a joyful and approachable feel to any design.

Best used for

  • Children's apparel and toys
  • Sweet shop branding (bakery, candy store)
  • Feminine beauty product packaging
  • Wedding or baby shower invitations
  • Playful website interfaces
  • Romantic stationery designs

Suggested color roles

primary

#F9A4AE serves as the core sweet aesthetic, inviting and soft.

secondary

#FFC3C8 supports the primary, adding a lighter, delicate touch.

accent

#CC5B6A provides a deeper pop, perfect for calls-to-action or important highlights.

background

#FFDDE1 offers the lightest, airy foundation for a clean base.

text

#E87A88 can be used for larger headings, while a dark charcoal or black is recommended for body text on lighter backgrounds for readability.

Accessibility notes

  • Colors like #FFDDE1 and #FFC3C8 have very low contrast; avoid using them for essential text.
  • Ensure sufficient contrast when pairing text with backgrounds, particularly for smaller font sizes.
  • For body text on lighter palette colors, use a dark neutral color (e.g., #333333) to meet accessibility standards.
  • Provide clear visual cues beyond color alone for interactive elements, as many hues are close in luminosity.

Recommended combinations

Light & Sweet

Creates gentle, airy backgrounds for web banners, illustrations, or soft gradients.

#FFDDE1 · #FFC3C8 · #F9A4AE

Playful Pop

Ideal for dynamic gradients, buttons, or highlighting key information with a vibrant touch.

#F9A4AE · #E87A88 · #CC5B6A

Subtle Contrast

Useful for UI elements where a light background meets a soft accent and a prominent call-to-action.

#FFDDE1 · #F9A4AE · #CC5B6A

CSS variables

:root {
  --sugared-confection-dreams-1: #FFDDE1;
  --sugared-confection-dreams-2: #FFC3C8;
  --sugared-confection-dreams-3: #F9A4AE;
  --sugared-confection-dreams-4: #E87A88;
  --sugared-confection-dreams-5: #CC5B6A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sugared-confection-dreams": {
        1: "#FFDDE1",
        2: "#FFC3C8",
        3: "#F9A4AE",
        4: "#E87A88",
        5: "#CC5B6A",
      }
    }
  }
}

Related searches

sweet pastel color schemepink candy palettewhimsical dessert colorslight feminine designplayful soft pinks

Palette colors

Hex values

Color 1#FFDDE1
·
Color 2#FFC3C8
·
Color 3#F9A4AE
·
Color 4#E87A88
·
Color 5#CC5B6A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
2.2:1Fail
3.2:1AA18
2
1.2:1Fail
1.3:1Fail
1.8:1Fail
2.6:1Fail
3
1.5:1Fail
1.3:1Fail
1.4:1Fail
2.1:1Fail
4
2.2:1Fail
1.8:1Fail
1.4:1Fail
1.4:1Fail
5
3.2:1AA18
2.6:1Fail
2.1:1Fail
1.4:1Fail

Similar palettes

More like Sugared Confection Dreams

View all pastel