Back to palettes

Palette

Sweet Tart Sugar

A cheerfully bright explosion of sugary, fruity flavors, reminiscent of favorite retro candies.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sweet Tart Sugar 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 Sweet Tart Sugar.

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

Data visualization

#FF99CC#FFCC66#99CCFF#CCFF99#FF66B2

Palette guide

How to use Sweet Tart Sugar

Overview

The Sweet Tart Sugar palette is a cheerful and energetic collection of bright pastels, perfectly capturing the essence of retro candies and playful design. Featuring lively pinks like #FF99CC and #FF66B2, a sunny yellow #FFCC66, a sky blue #99CCFF, and a fresh green #CCFF99, this palette is ideal for projects seeking a vibrant, youthful, and fun aesthetic. Designers and developers will find these hues excellent for creating engaging user interfaces, playful branding, or eye-catching digital illustrations that evoke a sense of sweet nostalgia and boundless cheer. It's a delightful blend that promises to infuse any project with sugary charm.

Best used for

  • Children's product branding and packaging
  • Playful mobile game interfaces
  • Event invitations for birthdays or parties
  • Creative digital art and illustrations
  • Fashion accessories and apparel design
  • Youth-oriented websites and social media graphics

Suggested color roles

primary

Use #FF99CC as a soft, inviting base for main sections or large graphic elements, setting a friendly and approachable tone.

secondary

Apply #FFCC66 for secondary content blocks, navigation elements, or as a vibrant complementary hue that adds warmth and cheer.

accent

Deploy #FF66B2 sparingly for calls to action, important notifications, or small decorative details that demand attention with its bright, energetic pop.

background

Utilize #99CCFF for clean, airy backgrounds, providing a sense of openness and tranquility that allows other colors to shine.

text

Pair with a dark charcoal or black for maximum readability on lighter backgrounds, or use a deep navy for a softer contrast.

Accessibility notes

  • Ensure sufficient contrast between light pastel backgrounds (like #99CCFF) and text colors for readability.
  • Avoid using light text colors on #CCFF99 or #FFCC66 without careful contrast checking (WCAG AA standards).
  • Reserve #FF66B2 for accents or larger text elements where its vibrancy won't hinder readability.
  • Consider providing a dark mode option where colors can be reversed for better contrast on dark backgrounds.

Recommended combinations

Playful Pop

Excellent for vibrant headlines, playful icons, or graphic elements that need to convey energy and joy.

#FF99CC · #FF66B2 · #FFCC66

Sweet Harmony

Ideal for softer backgrounds, content cards, or illustrations where a gentle, harmonious feel is desired.

#99CCFF · #CCFF99 · #FF99CC

Energetic Contrast

Use this trio for dynamic call-to-action buttons, interactive elements, or sections requiring a playful yet clear distinction.

#CCFF99 · #FF66B2 · #FFCC66

CSS variables

:root {
  --sweet-tart-sugar-1: #FF99CC;
  --sweet-tart-sugar-2: #FFCC66;
  --sweet-tart-sugar-3: #99CCFF;
  --sweet-tart-sugar-4: #CCFF99;
  --sweet-tart-sugar-5: #FF66B2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sweet-tart-sugar": {
        1: "#FF99CC",
        2: "#FFCC66",
        3: "#99CCFF",
        4: "#CCFF99",
        5: "#FF66B2",
      }
    }
  }
}

Related searches

candy color schemeplayful pastel palettebright retro colorssweet design aestheticvibrant ui pastels

Palette colors

Hex values

Color 1#FF99CC
·
Color 2#FFCC66
·
Color 3#99CCFF
·
Color 4#CCFF99
·
Color 5#FF66B2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.2:1Fail
1.7:1Fail
1.4:1Fail
2
1.3:1Fail
1.1:1Fail
1.3:1Fail
1.8:1Fail
3
1.2:1Fail
1.1:1Fail
1.5:1Fail
1.6:1Fail
4
1.7:1Fail
1.3:1Fail
1.5:1Fail
2.4:1Fail
5
1.4:1Fail
1.8:1Fail
1.6:1Fail
2.4:1Fail

Similar palettes

More like Sweet Tart Sugar

View all pastel
Candy Shop Whimsy
Lollipop Swirl Parade
Lollypop Swirl Dream
Sweet Candy Stripe
Sweet Confection Delight
Sweet Shop Candy