Back to palettes

Palette

Playful Gummy Bears

A super fun and bright mix of classic primary and secondary colors, reminiscent of colorful gummy candies.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Playful Gummy Bears 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 Gummy Bears.

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

Data visualization

#FF0000#0000FF#FFFF00#FF00FF#00FF00

Palette guide

How to use Playful Gummy Bears

Overview

The Playful Gummy Bears palette is a super fun and bright mix of classic primary and secondary colors, reminiscent of colorful gummy candies. This palette includes a vibrant #FF0000 (Red), a deep #0000FF (Blue), a cheerful #FFFF00 (Yellow), an electric #FF00FF (Magenta), and a lively #00FF00 (Lime Green). It’s perfect for designers and developers aiming to create high-energy, cheerful, and unmistakable designs. Its clear, distinct colors allow for strong visual separation and a playful, direct communication style, ideal for youth-oriented projects.

Best used for

  • Educational software and apps
  • Toy branding and packaging
  • Festival and carnival graphics
  • Children's entertainment websites
  • Interactive kiosks and displays
  • Pop art-inspired illustrations

Suggested color roles

primary

#FF0000 (Red) for urgency, main calls to action, or prominent branding.

secondary

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

accent

#FFFF00 (Yellow) for highlights, warnings, or interactive points that demand attention.

background

A neutral light grey or pure white is recommended to let the vibrant colors truly pop and maintain clarity.

text

Black or very dark grey for main body text to ensure maximum legibility. #FF00FF can be used for vibrant headings.

Accessibility notes

  • Extreme care is needed when using #FFFF00 for any text, as it has very poor contrast on light backgrounds.
  • Ensure all text and interactive elements meet WCAG contrast guidelines, especially with pure colors.
  • For critical information, use high-contrast pairings like black text on white or a dark color on #FFFF00 if used as a background.
  • Consider using larger font sizes or outlines for text in vibrant colors like #00FF00 to improve readability.

Recommended combinations

Primary Base

Forms a foundational and clear color scheme for straightforward designs.

#FF0000 · #0000FF · #FFFF00

Vibrant Duo

Creates an energetic and fun combination, great for dynamic visual elements.

#00FF00 · #FF00FF · #FF0000

Full Spectrum

Offers a diverse and lively mix, suitable for playful and engaging interfaces.

#0000FF · #FFFF00 · #00FF00

CSS variables

:root {
  --playful-gummy-bears-2-1: #FF0000;
  --playful-gummy-bears-2-2: #0000FF;
  --playful-gummy-bears-2-3: #FFFF00;
  --playful-gummy-bears-2-4: #FF00FF;
  --playful-gummy-bears-2-5: #00FF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "playful-gummy-bears-2": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#FF00FF",
        5: "#00FF00",
      }
    }
  }
}

Related searches

primary secondary colorsvibrant learning palettekids branding colorspure color designhigh energy UI

Palette colors

Hex values

Color 1#FF0000
·
Color 2#0000FF
·
Color 3#FFFF00
·
Color 4#FF00FF
·
Color 5#00FF00
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
3.7:1AA18
1.3:1Fail
2.9:1Fail
2
2.1:1Fail
8:1AAA
2.7:1Fail
6.3:1AA
3
3.7:1AA18
8:1AAA
2.9:1Fail
1.3:1Fail
4
1.3:1Fail
2.7:1Fail
2.9:1Fail
2.3:1Fail
5
2.9:1Fail
6.3:1AA
1.3:1Fail
2.3:1Fail

Similar palettes

More like Playful Gummy Bears

View all vibrant
Gumball Machine Frenzy
Bubblegum Pop
Bubblegum Pop Burst
Candy Block Fun
Candy Carnival Swirl
Candy Rainbow Burst