Palette

Playful Jelly Bean

A riot of bright, bold colors, reminiscent of a bag full of delicious, fruity jelly beans.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Playful Jelly Bean 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 Jelly Bean.

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

Data visualization

#E6007A#FF5F00#FFF100#00AAFF#A500FF

Palette guide

How to use Playful Jelly Bean

Overview

The Playful Jelly Bean palette is a vibrant and modern collection of saturated hues, perfect for designs that aim to be energetic and fun. It showcases a strong #E6007A (Raspberry), a fiery #FF5F00 (Orange Red), a bright #FFF100 (Lemon Yellow), a clear #00AAFF (Azure), and a striking #A500FF (Electric Purple). This palette offers excellent versatility for creating eye-catching and memorable visuals across digital and print media. Designers and developers can leverage these intense colors to craft engaging user experiences and bold brand identities that truly pop.

Best used for

Youth-focused brand identities
Interactive application interfaces
Creative packaging design
Digital marketing campaigns
Content platforms for creative industries
Playful e-commerce graphics

Suggested color roles

primary

#E6007A (Raspberry) for bold branding, main calls to action, and focal points.

secondary

#00AAFF (Azure) for complementary sections, navigation, or informative graphics.

accent

#FFF100 (Lemon Yellow) for bright highlights, warnings, or playful interactive elements.

background

A very light grey or pure white is recommended as a clean canvas, allowing the bright colors to pop.

text

Dark charcoal or black for main body text to ensure readability. #A500FF can be used for distinctive, vibrant headings.

Accessibility notes

Avoid using #FFF100 for small text due to its low contrast on light backgrounds; use it for large headings or accents.
Ensure strong contrast for all text elements against chosen backgrounds, especially with #FF5F00.
Verify WCAG contrast ratios for interactive components to ensure usability for all users.
For optimal readability, pair dark text with lighter palette colors and vice versa.

Recommended combinations

Bold & Bright

Creates a high-energy, attention-grabbing combination for impactful designs.

#E6007A · #FF5F00 · #FFF100

Cool Contrast

Offers a modern and engaging blend, ideal for sophisticated yet playful branding.

#00AAFF · #A500FF · #E6007A

Dynamic Trio

Provides a lively and versatile mix, suitable for dynamic digital interfaces or marketing.

#FF5F00 · #FFF100 · #00AAFF

CSS variables

:root {
  --playful-jelly-bean-1: #E6007A;
  --playful-jelly-bean-2: #FF5F00;
  --playful-jelly-bean-3: #FFF100;
  --playful-jelly-bean-4: #00AAFF;
  --playful-jelly-bean-5: #A500FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "playful-jelly-bean": {
        1: "#E6007A",
        2: "#FF5F00",
        3: "#FFF100",
        4: "#00AAFF",
        5: "#A500FF",
      }
    }
  }
}

Hex values

Color 1#E6007A

Color 2#FF5F00

Color 3#FFF100

Color 4#00AAFF

Color 5#A500FF

Accessibility

Contrast checker

1.5:1Fail

3.8:1AA18

1.8:1Fail

1.1:1Fail

1.5:1Fail

2.6:1Fail

1.2:1Fail

1.7:1Fail

3.8:1AA18

2.6:1Fail

2.2:1Fail

4.4:1AA18

1.8:1Fail

1.2:1Fail

2.2:1Fail

2:1Fail

1.1:1Fail

1.7:1Fail

4.4:1AA18

2:1Fail

Similar palettes

More like Playful Jelly Bean

Lollipop Swirl Dreams

Lollipop Swirl Sugar