Palette

Playful Gumball Machine

A joyful explosion of bold, contrasting colors, just like a colorful gumball dispenser.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0000#FFFF00#00FFFF#FF1493#0000FF

Palette guide

How to use Playful Gumball Machine

Overview

The Playful Gumball Machine palette is a vibrant and direct collection, featuring pure primary and secondary colors that deliver maximum visual impact. With #FF0000 (Pure Red), #FFFF00 (Pure Yellow), #00FFFF (Cyan), #FF1493 (Deep Pink), and #0000FF (Pure Blue), this palette is designed for projects that need to be unmistakably bold and energetic. It's an excellent choice for designers and developers looking to create high-contrast, playful, and memorable experiences, reminiscent of classic childhood joy and strong visual statements in digital and print media.

Best used for

Retro arcade game interfaces
Children's book illustrations
Festival and event branding
Pop art-inspired graphic design
Educational apps for young learners
Bold advertising campaigns

Suggested color roles

primary

#FF0000 (Pure Red) for strong calls to action, warnings, or dominant branding.

secondary

#0000FF (Pure Blue) for stable backgrounds, navigation, or informative sections.

accent

#FFFF00 (Pure Yellow) for bright highlights, interactive elements, or attention-grabbing details.

background

A clean white or light grey provides the best canvas, allowing these intense colors to stand out. #00FFFF can be used for a bold background.

text

Black or very dark charcoal for main body text. #FF1493 can be used for vibrant headings or key phrases.

Accessibility notes

Extreme caution is needed when using #FFFF00 for text, as it has very poor contrast on light backgrounds.
Always ensure sufficient contrast for all text elements, especially with pure colors.
Consider outlining or using very large text for accent colors to improve readability.
Avoid placing light-colored text on other light, pure colors to prevent legibility issues.

Recommended combinations

Classic Primary

Forms a fundamental, high-contrast base for bold and straightforward designs.

#FF0000 · #0000FF · #FFFF00

Cyan Burst

Creates a modern and playful combination, excellent for dynamic digital content.

#00FFFF · #FF1493 · #FF0000

Deep Contrast

Provides an engaging visual hierarchy, drawing attention to key interactive elements.

#0000FF · #FF1493 · #FFFF00

CSS variables

:root {
  --playful-gumball-machine-1: #FF0000;
  --playful-gumball-machine-2: #FFFF00;
  --playful-gumball-machine-3: #00FFFF;
  --playful-gumball-machine-4: #FF1493;
  --playful-gumball-machine-5: #0000FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "playful-gumball-machine": {
        1: "#FF0000",
        2: "#FFFF00",
        3: "#00FFFF",
        4: "#FF1493",
        5: "#0000FF",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#FFFF00

Color 3#00FFFF

Color 4#FF1493

Color 5#0000FF

Accessibility

Contrast checker

3.7:1AA18

3.2:1AA18

1.1:1Fail

2.1:1Fail

3.7:1AA18

1.2:1Fail

3.4:1AA18

8:1AAA

3.2:1AA18

1.2:1Fail

2.9:1Fail

6.9:1AA

1.1:1Fail

3.4:1AA18

2.9:1Fail

2.4:1Fail

2.1:1Fail

8:1AAA

6.9:1AA

2.4:1Fail

Similar palettes

More like Playful Gumball Machine