Palette

Gumball Machine Gleam

A whimsical and vibrant palette reminiscent of colorful gumballs spinning in a vintage machine.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F0A500#F7C59F#D82F3B#F08080#E04D4D

Palette guide

How to use Gumball Machine Gleam

Overview

The Gumball Machine Gleam palette is a whimsical and vibrant collection reminiscent of colorful gumballs spinning in a vintage machine. It features a golden orange #F0A500, a soft light peach #F7C59F, a classic deep red #D82F3B, a lighter coral red #F08080, and a vibrant red #E04D4D. This palette is perfect for designers and developers aiming to evoke a sense of playful nostalgia, warmth, and sugary charm. Its blend of cheerful oranges and appealing reds makes it ideal for projects that require a retro yet fresh feel, across various digital and print applications.

Best used for

Retro packaging and labels
Playful branding for dessert shops
Vintage arcade game interfaces
Children's book illustrations
Holiday or seasonal campaigns
Sweet treat website designs

Suggested color roles

primary

Use #F0A500 (Golden Orange) as the cheerful, inviting primary color, perfect for main calls-to-action or prominent headings.

secondary

Employ #D82F3B (Deep Red) for strong supporting elements, important alerts, or to add a classic, bold accent.

accent

Apply #E04D4D (Vibrant Red) as a lively, playful accent, ideal for small highlights, icons, or decorative details.

background

Utilize #F7C59F (Light Peach) as a warm, soft background, providing a gentle canvas that allows the bolder colors to shine.

text

For text, #D82F3B (Deep Red) offers strong contrast on lighter backgrounds like #F7C59F. A deep charcoal or black is also excellent for body text on light backgrounds.

Accessibility notes

Ensure sufficient contrast for text on #F7C59F (Light Peach); dark text, such as #D82F3B or black, is crucial for readability.
Avoid using #F08080 (Coral Red) for small text on similarly light backgrounds, as its contrast might be insufficient.
The vibrant #F0A500 (Golden Orange) and #E04D4D (Vibrant Red) can be challenging for text on certain backgrounds; check contrast ratios carefully.
Prioritize clear hierarchy and contrast for all interactive elements to ensure accessibility for all users.

Recommended combinations

Retro Pop

Creates a vibrant and classic retro feel, ideal for eye-catching headers or energetic branding.

#F0A500 · #D82F3B · #F7C59F

Warm Glow

Offers a soft, harmonious blend of reds, perfect for backgrounds, subtle gradients, or romantic themes.

#E04D4D · #F08080 · #F7C59F

Bold & Bright

A strong and cheerful combination, great for highlighting key information or creating impactful graphic elements.

#D82F3B · #F0A500 · #F08080

CSS variables

:root {
  --gumball-machine-gleam-2-1: #F0A500;
  --gumball-machine-gleam-2-2: #F7C59F;
  --gumball-machine-gleam-2-3: #D82F3B;
  --gumball-machine-gleam-2-4: #F08080;
  --gumball-machine-gleam-2-5: #E04D4D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gumball-machine-gleam-2": {
        1: "#F0A500",
        2: "#F7C59F",
        3: "#D82F3B",
        4: "#F08080",
        5: "#E04D4D",
      }
    }
  }
}

Hex values

Color 1#F0A500

Color 2#F7C59F

Color 3#D82F3B

Color 4#F08080

Color 5#E04D4D

Accessibility

Contrast checker

1.3:1Fail

2.3:1Fail

1.2:1Fail

1.9:1Fail

1.3:1Fail

3.1:1AA18

1.7:1Fail

2.5:1Fail

2.3:1Fail

3.1:1AA18

1.8:1Fail

1.2:1Fail

1.7:1Fail

1.8:1Fail

1.5:1Fail

1.9:1Fail

2.5:1Fail

1.2:1Fail

1.5:1Fail

Similar palettes

More like Gumball Machine Gleam

Gumball Machine Gleam

See it in context.

Ready when you are.

Built with Gumball Machine Gleam.

How to use Gumball Machine Gleam

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Retro Pop

Warm Glow

Bold & Bright

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Gumball Machine Gleam