Back to palettes

Palette

Bubblegum Pop Zing

An energetic burst of candy-colored cheer, perfect for a lively, whimsical design.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Bubblegum Pop Zing 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 Bubblegum Pop Zing.

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

Data visualization

#FF82A9#FFDAE2#B8F2E6#FFEA7C#7DDFFF

Palette guide

How to use Bubblegum Pop Zing

Overview

The Bubblegum Pop Zing palette delivers an energetic burst of candy-colored cheer, perfect for lively and whimsical designs. This vibrant collection features the bright pink of #FF82A9, the sunny yellow of #FFEA7C, and the refreshing bright blue of #7DDFFF, complemented by the softer #FFDAE2 and #B8F2E6. It's a fantastic choice for designers looking to infuse projects with a youthful, playful, and retro-inspired spirit. The palette offers a dynamic range that can create engaging visuals, from bold statements to subtle, cheerful accents, ensuring a memorable and energetic user experience.

Best used for

  • Youth-focused brands and marketing
  • Playful mobile app interfaces
  • Whimsical party decor and invitations
  • Children's book illustrations
  • Cheerful packaging for snacks and candy
  • Vibrant blog designs and social media graphics

Suggested color roles

primary

Use #FF82A9 as an energetic primary color, ideal for main brand elements, headlines, or calls to action.

secondary

Apply #7DDFFF as a bright and complementary secondary color, providing a lively contrast for sections or interactive elements.

accent

Introduce #FFEA7C as a sunny and cheerful accent, perfect for highlights, icons, or decorative details.

background

Utilize #FFDAE2 as a soft, warm, and inviting background base that allows the more vibrant colors to pop.

text

For headings, #FF82A9 offers a vibrant touch. For body text, a dark grey or charcoal is essential for optimal readability against light backgrounds.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using lighter colors like #FFDAE2 or #B8F2E6 as backgrounds.
  • Pair lighter shades like #FFEA7C with darker text, or use them as accents rather than primary information carriers.
  • Test color combinations for readability; some pastels in this palette may not meet WCAG AA for small text.
  • Consider using borders or strong visual cues to differentiate interactive elements if color contrast is inherently low.

Recommended combinations

Candy Burst

Ideal for vibrant calls-to-action, prominent graphic elements, or energetic interactive components.

#FF82A9 · #FFEA7C · #7DDFFF

Youthful Glow

Perfect for soft, playful backgrounds, subtle illustrations, or serene section dividers.

#FFDAE2 · #B8F2E6 · #FF82A9

Whimsical Pop

Use for engaging infographics, cheerful header designs, or fun data visualizations.

#7DDFFF · #FFEA7C · #B8F2E6

CSS variables

:root {
  --bubblegum-pop-zing-1: #FF82A9;
  --bubblegum-pop-zing-2: #FFDAE2;
  --bubblegum-pop-zing-3: #B8F2E6;
  --bubblegum-pop-zing-4: #FFEA7C;
  --bubblegum-pop-zing-5: #7DDFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bubblegum-pop-zing": {
        1: "#FF82A9",
        2: "#FFDAE2",
        3: "#B8F2E6",
        4: "#FFEA7C",
        5: "#7DDFFF",
      }
    }
  }
}

Related searches

youthful candy colorsbright whimsical paletteenergetic pink blue yellowplayful UI colorscheerful brand identity

Palette colors

Hex values

Color 1#FF82A9
·
Color 2#FFDAE2
·
Color 3#B8F2E6
·
Color 4#FFEA7C
·
Color 5#7DDFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
1.9:1Fail
1.9:1Fail
1.5:1Fail
2
1.8:1Fail
1:1Fail
1.1:1Fail
1.2:1Fail
3
1.9:1Fail
1:1Fail
1:1Fail
1.2:1Fail
4
1.9:1Fail
1.1:1Fail
1:1Fail
1.2:1Fail
5
1.5:1Fail
1.2:1Fail
1.2:1Fail
1.2:1Fail

Similar palettes

More like Bubblegum Pop Zing

View all vibrant