Palette

Playful Jellybean Row

A vibrant and cheerful array of bright, diverse colors like a row of assorted jellybeans.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Playful Jellybean Row 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 Jellybean Row.

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

Data visualization

#FF007F#00FFBF#FFC300#4B0082#8A2BE2

Palette guide

How to use Playful Jellybean Row

Overview

The Playful Jellybean Row palette offers a sophisticated yet energetic blend of bright and deep tones, perfect for designs that need to be both vibrant and engaging. It features a cheerful #FF007F (Rose), a refreshing #00FFBF (Aqua), a warm #FFC300 (Amber), a deep #4B0082 (Indigo), and a rich #8A2BE2 (Blue Violet). This palette allows for striking contrasts and harmonious combinations, providing designers and developers with a versatile toolkit to create memorable and visually rich experiences across various applications, from branding to digital art.

Best used for

Creative agency branding and portfolios
Educational platforms with a playful twist
Playful e-commerce website designs
Event branding for youth-oriented gatherings
Digital art projects and illustrations
Engaging mobile application themes

Suggested color roles

primary

#FF007F (Rose) for impactful branding, main calls to action, and focal points.

secondary

#00FFBF (Aqua) for supporting elements, fresh visual accents, or clean navigation.

accent

#FFC300 (Amber) for highlights, interactive elements, or adding a touch of warmth and vibrancy.

background

#4B0082 (Indigo) can serve as a deep, dramatic background, or use a light neutral for contrast.

text

White or very light grey for text on dark colors like #4B0082. Dark charcoal on lighter backgrounds. #8A2BE2 for bold headings.

Accessibility notes

Ensure sufficient contrast, especially when placing text on #FFC300 or #00FFBF, as these can be challenging.
Dark text on lighter backgrounds (like white or light grey) is generally safest for readability.
Verify WCAG contrast ratios for all text and interactive elements to ensure accessibility.
Consider using larger font sizes for text in vibrant accent colors to improve legibility.

Recommended combinations

Vibrant Core

Creates a bright and balanced foundation, ideal for energetic branding or main content areas.

#FF007F · #00FFBF · #FFC300

Deep Contrast

Offers a dramatic and eye-catching combination, perfect for impactful hero sections or calls to action.

#4B0082 · #FF007F · #FFC300

Modern Play

Provides a contemporary and engaging mix, suitable for dynamic user interfaces and digital art.

#00FFBF · #8A2BE2 · #FFC300

CSS variables

:root {
  --playful-jellybean-row-1: #FF007F;
  --playful-jellybean-row-2: #00FFBF;
  --playful-jellybean-row-3: #FFC300;
  --playful-jellybean-row-4: #4B0082;
  --playful-jellybean-row-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "playful-jellybean-row": {
        1: "#FF007F",
        2: "#00FFBF",
        3: "#FFC300",
        4: "#4B0082",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#FF007F

Color 2#00FFBF

Color 3#FFC300

Color 4#4B0082

Color 5#8A2BE2

Accessibility

Contrast checker

2.9:1Fail

2.3:1Fail

3.4:1AA18

1.6:1Fail

2.9:1Fail

1.2:1Fail

9.9:1AAA

4.6:1AA

2.3:1Fail

1.2:1Fail

8.1:1AAA

3.7:1AA18

3.4:1AA18

9.9:1AAA

8.1:1AAA

2.2:1Fail

1.6:1Fail

4.6:1AA

3.7:1AA18

2.2:1Fail

Similar palettes

More like Playful Jellybean Row

View all vibrant

Lollipop Swirl Dreams

Whimsical Candy Burst

Candy Block Fun

Gumball Machine Gleam

Gummy Bear Blast

Gummy Bear Rainbow