Palette

Rainbow Jellybean Pop

A burst of cheerful, vivid colors reminiscent of a bag full of fruity jellybeans.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rainbow Jellybean Pop 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 Rainbow Jellybean Pop.

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

Data visualization

#ff6347#ffd700#3cb371#1e90ff#9932cc

Palette guide

How to use Rainbow Jellybean Pop

Overview

The Rainbow Jellybean Pop palette is an explosion of playful and vibrant hues, perfect for projects that demand energy and cheerfulness. This lively collection features the striking orange-red of #ff6347, the sunny brilliance of #ffd700, and the fresh, inviting green of #3cb371. Completing the spectrum are the dynamic royal blue of #1e90ff and the rich, whimsical purple of #9932cc. Designers and developers can utilize this palette to create memorable, engaging experiences for a younger audience or brands that want to stand out with bold, optimistic color. It's an excellent choice for adding a burst of fun and personality to any digital or physical product.

Best used for

Children's educational apps and websites
Playful e-commerce sites for toys or candy
Event branding for festivals or parties
Creative agency portfolios
Social media graphics and campaigns
Mobile games and interactive experiences

Suggested color roles

primary

#1e90ff (Royal Blue) - A strong, friendly base color for main navigation, key headings, or large background sections.

secondary

#ff6347 (Tomato) - Excellent for secondary calls-to-action, important alerts, or vibrant graphic elements.

accent

#ffd700 (Gold) - Use sparingly for highlights, small interactive elements, or icons to add a bright, cheerful pop.

background

White or a very light off-white is recommended to let the vibrant colors truly pop.

text

Charcoal grey or black for maximum readability against light backgrounds, or white text against any of the darker primary/secondary colors like #1e90ff or #9932cc.

Accessibility notes

High contrast is crucial when using these vibrant colors for text; avoid placing light text on light colors or dark text on dark colors.
#ffd700 (Gold) is generally not suitable for body text due to low contrast on most backgrounds.
Ensure sufficient contrast for button states, especially when using multiple bright colors.
Consider WCAG guidelines carefully for text readability, particularly for #ff6347, #ffd700, and #3cb371.

Recommended combinations

Candy Pop

A classic, high-energy combination for playful branding or calls to action.

#1E90FF · #FF6347 · #FFD700

Vibrant Play

Creates a lively, engaging interface, ideal for children's content or interactive elements.

#3CB371 · #9932CC · #1E90FF

Jellybean Burst

Bright and attention-grabbing, excellent for highlights, alerts, or celebratory designs.

#FFD700 · #FF6347 · #1E90FF

CSS variables

:root {
  --rainbow-jellybean-pop-1: #ff6347;
  --rainbow-jellybean-pop-2: #ffd700;
  --rainbow-jellybean-pop-3: #3cb371;
  --rainbow-jellybean-pop-4: #1e90ff;
  --rainbow-jellybean-pop-5: #9932cc;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainbow-jellybean-pop": {
        1: "#ff6347",
        2: "#ffd700",
        3: "#3cb371",
        4: "#1e90ff",
        5: "#9932cc",
      }
    }
  }
}

Hex values

Color 1#ff6347

Color 2#ffd700

Color 3#3cb371

Color 4#1e90ff

Color 5#9932cc

Accessibility

Contrast checker

2.1:1Fail

1.1:1Fail

1.9:1Fail

2.1:1Fail

1.9:1Fail

2.3:1Fail

4.1:1AA18

1.1:1Fail

1.9:1Fail

1.2:1Fail

2.1:1Fail

1.1:1Fail

2.3:1Fail

1.2:1Fail

1.8:1Fail

1.9:1Fail

4.1:1AA18

2.1:1Fail

1.8:1Fail

Similar palettes

More like Rainbow Jellybean Pop

Rainbow Jellybean Pop

See it in context.

Ready when you are.

Built with Rainbow Jellybean Pop.

How to use Rainbow Jellybean Pop

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Candy Pop

Vibrant Play

Jellybean Burst

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Rainbow Jellybean Pop