Palette

Playful Gumball Burst

A vibrant explosion of bold, primary colors, just like a mix of sweet and juicy gumballs.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Playful Gumball Burst 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 Gumball Burst.

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

Data visualization

#F73F52#FFC107#2196F3#FFEB3B#9C27B0

Palette guide

How to use Playful Gumball Burst

Overview

The Playful Gumball Burst palette is an energetic collection of bold, primary-inspired colors, designed to evoke cheerfulness and dynamism. It features a vivid #F73F52 (Scarlet Red), a sunny #FFC107 (Amber), a clear #2196F3 (Royal Blue), a bright #FFEB3B (Canary Yellow), and a rich #9C27B0 (Purple). This palette is perfect for projects that require a strong, confident, and fun visual language. Designers and developers can utilize these intense hues to create memorable interfaces, engaging branding, and lively digital experiences that capture attention.

Best used for

Children's product packaging and marketing
Mobile app user interfaces (UI)
Educational content and platforms
Vibrant event promotion materials
Playful e-commerce website design
Youth-focused social media campaigns

Suggested color roles

primary

#F73F52 (Scarlet Red) for impactful branding elements and primary calls to action.

secondary

#2196F3 (Royal Blue) for complementary sections, navigation, or informative graphics.

accent

#FFEB3B (Canary Yellow) for bright highlights, interactive elements, or warnings.

background

A clean white or light grey background works best to let these colors pop, or use #2196F3 for a bold, thematic background.

text

Dark grey or black for main body text to ensure readability, with #9C27B0 for distinctive headings or emphasis.

Accessibility notes

Ensure high contrast when placing text on bright backgrounds like #FFEB3B or #FFC107.
Avoid using light text on light colors; opt for dark text on lighter shades for better legibility.
Check WCAG contrast ratios for all text and interactive elements, especially with #F73F52.
For small text, use very high contrast pairings to ensure readability across devices.

Recommended combinations

Primary Pop

Creates a classic, bold, and highly energetic visual foundation for branding.

#F73F52 · #2196F3 · #FFC107

Energetic Focus

Ideal for engaging interactive elements or highlighting key information with vibrancy.

#FFC107 · #9C27B0 · #F73F52

Youthful Dynamic

Perfect for playful interfaces or digital content aimed at a younger audience.

#2196F3 · #FFEB3B · #F73F52

CSS variables

:root {
  --playful-gumball-burst-1: #F73F52;
  --playful-gumball-burst-2: #FFC107;
  --playful-gumball-burst-3: #2196F3;
  --playful-gumball-burst-4: #FFEB3B;
  --playful-gumball-burst-5: #9C27B0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "playful-gumball-burst": {
        1: "#F73F52",
        2: "#FFC107",
        3: "#2196F3",
        4: "#FFEB3B",
        5: "#9C27B0",
      }
    }
  }
}

Hex values

Color 1#F73F52

Color 2#FFC107

Color 3#2196F3

Color 4#FFEB3B

Color 5#9C27B0

Accessibility

Contrast checker

2.2:1Fail

1.2:1Fail

3:1Fail

1.7:1Fail

2.2:1Fail

1.9:1Fail

1.3:1Fail

3.9:1AA18

1.2:1Fail

1.9:1Fail

2.6:1Fail

2:1Fail

3:1Fail

1.3:1Fail

2.6:1Fail

5.2:1AA

1.7:1Fail

3.9:1AA18

2:1Fail

5.2:1AA

Similar palettes

More like Playful Gumball Burst

Bright Carnival Swirl

Bubblegum Pop