Back to palettes

Palette

Playful Gumball Brights

A burst of sugary joy, reflecting the bold, sweet colors of a classic 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 Brights 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 Brights.

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

Data visualization

#FF69B4#00FF7F#FF8C00#00BFFF#DC143C

Palette guide

How to use Playful Gumball Brights

Overview

The Playful Gumball Brights palette is a vibrant explosion of color, perfect for designs that demand attention and convey a sense of fun and excitement. Featuring a bold #FF69B4 (Hot Pink), a lively #00FF7F (Spring Green), an energetic #FF8C00 (Dark Orange), a refreshing #00BFFF (Deep Sky Blue), and a striking #DC143C (Crimson). This high-energy collection is ideal for digital interfaces, branding, and promotional materials aimed at a youthful or playful audience. Designers can leverage these bright hues to create engaging visuals that pop off the screen or page, ensuring a memorable and dynamic user experience.

Best used for

  • Youth-oriented brand identity
  • Vibrant digital advertising campaigns
  • Interactive mobile game interfaces
  • Playful event posters and flyers
  • Creative children's product packaging
  • High-energy social media content

Suggested color roles

primary

#FF69B4 (Hot Pink) for making bold statements and primary calls to action.

secondary

#00FF7F (Spring Green) for supporting elements, fresh accents, or secondary navigation.

accent

#FF8C00 (Dark Orange) for highlights, warnings, or playful interactive elements.

background

#00BFFF (Deep Sky Blue) can serve as a dynamic background for specific sections, or use a clean white/light grey for contrast.

text

Dark charcoal or black for main body text to ensure readability, with #DC143C for impactful headlines.

Accessibility notes

  • Ensure sufficient contrast between bright colors and text, especially #FF8C00.
  • Avoid placing light text directly on other light, vibrant colors like #00FF7F without sufficient contrast.
  • For small text, always use a high-contrast pairing, such as dark text on a lighter background.
  • Consider using larger font sizes for accent colors like #FF69B4 or #DC143C when used for emphasis.

Recommended combinations

Vibrant Trio

Creates an energetic and eye-catching combination for branding or hero sections.

#FF69B4 · #00FF7F · #FF8C00

Cool Pop

Ideal for digital interfaces, offering a refreshing yet playful aesthetic.

#00BFFF · #00FF7F · #FF69B4

Bold Contrast

Excellent for attention-grabbing headlines or calls to action with strong visual impact.

#DC143C · #00FF7F · #FF8C00

CSS variables

:root {
  --playful-gumball-brights-1: #FF69B4;
  --playful-gumball-brights-2: #00FF7F;
  --playful-gumball-brights-3: #FF8C00;
  --playful-gumball-brights-4: #00BFFF;
  --playful-gumball-brights-5: #DC143C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "playful-gumball-brights": {
        1: "#FF69B4",
        2: "#00FF7F",
        3: "#FF8C00",
        4: "#00BFFF",
        5: "#DC143C",
      }
    }
  }
}

Related searches

bright color schemesvibrant ui colorsplayful brand palettecandy inspired colorsenergetic web design

Palette colors

Hex values

Color 1#FF69B4
·
Color 2#00FF7F
·
Color 3#FF8C00
·
Color 4#00BFFF
·
Color 5#DC143C
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
1.1:1Fail
1.2:1Fail
1.9:1Fail
2
2:1Fail
1.7:1Fail
1.6:1Fail
3.7:1AA18
3
1.1:1Fail
1.7:1Fail
1.1:1Fail
2.1:1Fail
4
1.2:1Fail
1.6:1Fail
1.1:1Fail
2.4:1Fail
5
1.9:1Fail
3.7:1AA18
2.1:1Fail
2.4:1Fail

Similar palettes

More like Playful Gumball Brights

View all Vibrant