Palette

Vivid Spectrum Play

A bold and cheerful combination of fundamental colors, radiating pure energy and a sense of joyful creativity.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Vivid Spectrum Play 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 Vivid Spectrum Play.

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

Data visualization

#FF0000#0000FF#FFFF00#FFA500#9900CC

Palette guide

How to use Vivid Spectrum Play

Overview

The Vivid Spectrum Play palette is an explosion of fundamental, high-energy colors, designed to evoke pure joy and creativity. Featuring primary hues like #FF0000 (red), #0000FF (blue), and #FFFF00 (yellow), complemented by the dynamic orange #FFA500 and rich violet #9900CC, this collection is all about bold statements. Designers can use this palette to create engaging, playful, and impactful designs that demand attention. Developers will find these hex codes perfect for children's apps, creative branding, educational platforms, or any project aiming for a vibrant, expressive, and unforgettable user experience. It's a celebration of color in its most potent form.

Best used for

Children's toys and educational materials
Art and craft supply branding
Creative agency websites and portfolios
Event and festival marketing
Digital art and abstract illustrations
Playful mobile app interfaces

Suggested color roles

primary

Use #FF0000 or #0000FF for dominant elements, establishing a bold and clear focal point.

secondary

Employ #FFA500 or #9900CC for supporting sections or subheadings, providing vibrant contrast and depth.

accent

Highlight key information or interactive states with #FFFF00, offering a bright, attention-grabbing spark.

background

A crisp white or light gray background will allow these vibrant colors to truly pop.

text

For optimal readability, use black text on #FFFF00 and white text on #FF0000, #0000FF, #FFA500, and #9900CC.

Accessibility notes

Due to high saturation, ensure sufficient contrast by pairing text with black or white. Avoid color-on-color text.
Be cautious with color combinations like #FF0000 on #FFA500 or #0000FF on #9900CC for text due to low contrast.
Avoid relying solely on color to convey information, as these vibrant hues can be challenging for colorblind users.
Test all interactive elements to ensure clear visual feedback for hover/active states, using high contrast.

Recommended combinations

Primary Pop

Classic and impactful for bold headlines, primary buttons, and playful graphics.

#FF0000 · #0000FF · #FFFF00

Vivid Contrast

Great for dynamic gradients, energetic illustrations, and attention-grabbing UI elements.

#FFA500 · #9900CC · #FF0000

Bright Energy

Ideal for cheerful backgrounds, highlight elements, and engaging interactive components.

#FFFF00 · #0000FF · #FFA500

CSS variables

:root {
  --vivid-spectrum-play-1: #FF0000;
  --vivid-spectrum-play-2: #0000FF;
  --vivid-spectrum-play-3: #FFFF00;
  --vivid-spectrum-play-4: #FFA500;
  --vivid-spectrum-play-5: #9900CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vivid-spectrum-play": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#FFA500",
        5: "#9900CC",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#FFA500

Color 5#9900CC

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

2:1Fail

1.6:1Fail

2.1:1Fail

8:1AAA

4.4:1AA18

1.3:1Fail

3.7:1AA18

8:1AAA

1.8:1Fail

6.1:1AA

2:1Fail

4.4:1AA18

1.8:1Fail

3.3:1AA18

1.6:1Fail

1.3:1Fail

6.1:1AA

3.3:1AA18

Similar palettes

More like Vivid Spectrum Play

View all vibrant

Art Studio Chaos

Abstract Geometric Hue

Bauhaus Geometry Play

Carnival Pop Art

Crayola Box Blast

Playful Circus Tent