Back to palettes

Palette

Playful Bubblegum Pop

Sugary sweet pastels bursting with cheerful, youthful energy, reminiscent of classic bubblegum flavors.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF4081#FFECB3#80D8FF#D1C4E9#F06292

Palette guide

How to use Playful Bubblegum Pop

Overview

The "Playful Bubblegum Pop" palette is a sugary sweet collection of pastels bursting with cheerful, youthful energy. Centered around a vibrant hot pink `#FF4081` and a softer rose `#F06292`, it's complemented by a creamy yellow `#FFECB3`, a light sky blue `#80D8FF`, and a delicate lavender `#D1C4E9`. This palette is perfectly suited for designers and developers aiming to create lighthearted, inviting, and fun interfaces or branding. Its combination of soft hues with energetic pops makes it ideal for projects that seek to evoke a sense of sweet nostalgia and playful charm, reminiscent of classic bubblegum flavors.

Best used for

  • Children's fashion or toy brands
  • Sweet shop or bakery branding
  • Playful mobile app interfaces
  • Teen-focused lifestyle blogs
  • Baby shower invitations or decor
  • Digital art with a whimsical, soft aesthetic

Suggested color roles

primary

`#FF4081` serves as a high-energy primary for calls-to-action, important headlines, or interactive elements that need to pop.

secondary

`#80D8FF` can be used for secondary sections, backgrounds, or larger UI components, offering a calming contrast.

accent

`#FFECB3` provides a soft, warm highlight for subtle details, icons, or decorative elements, adding a creamy touch.

background

`#D1C4E9` or a pure white are excellent choices for a light, airy background that lets the other colors shine.

text

For general body text, dark charcoal or black is recommended. White text can work on `#FF4081` and `#80D8FF`.

Accessibility notes

  • The lighter colors like `#FFECB3` and `#D1C4E9` require dark text (e.g., black or dark gray) for sufficient contrast.
  • Ensure `#FF4081` and `#F06292` have enough contrast when used together for text and background, as they are close in hue.
  • Avoid placing light blue (`#80D8FF`) text on a light lavender (`#D1C4E9`) background, or vice-versa, due to low contrast.
  • Always verify text readability, especially for smaller font sizes, as pastels can sometimes blend into each other.

Recommended combinations

Sweet Treats

Ideal for playful product packaging or website sections, using pink for main elements, yellow for highlights, and blue for supporting details.

#FF4081 · #FFECB3 · #80D8FF

Pastel Dream

Great for soft backgrounds or illustrations, with lavender as the base, rose for gentle accents, and blue for subtle pops.

#D1C4E9 · #F06292 · #80D8FF

Energetic Pop

Use for interactive UI elements, where the vibrant pink and blue create a dynamic contrast against a creamy highlight.

#FF4081 · #80D8FF · #FFECB3

CSS variables

:root {
  --playful-bubblegum-pop-1: #FF4081;
  --playful-bubblegum-pop-2: #FFECB3;
  --playful-bubblegum-pop-3: #80D8FF;
  --playful-bubblegum-pop-4: #D1C4E9;
  --playful-bubblegum-pop-5: #F06292;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "playful-bubblegum-pop": {
        1: "#FF4081",
        2: "#FFECB3",
        3: "#80D8FF",
        4: "#D1C4E9",
        5: "#F06292",
      }
    }
  }
}

Related searches

playful pastel color schemebubblegum pink palettesweet youthful colorslighthearted app design colorspink yellow blue lavender palette

Palette colors

Hex values

Color 1#FF4081
·
Color 2#FFECB3
·
Color 3#80D8FF
·
Color 4#D1C4E9
·
Color 5#F06292
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.8:1Fail
2.1:1Fail
2:1Fail
1.1:1Fail
2
2.8:1Fail
1.4:1Fail
1.4:1Fail
2.6:1Fail
3
2.1:1Fail
1.4:1Fail
1:1Fail
1.9:1Fail
4
2:1Fail
1.4:1Fail
1:1Fail
1.9:1Fail
5
1.1:1Fail
2.6:1Fail
1.9:1Fail
1.9:1Fail

Similar palettes

More like Playful Bubblegum Pop

View all pastel
Bubblegum Carnival Pop
Bubblegum Pop Burst
Candy Cloud Dream
Candy Floss Cloud
Candy Floss Cloud
Candy Floss Clouds