Palette

Playroom Primary Brights

A vivid and uninhibited collection of classic primary and secondary colors for boundless creativity.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Playroom Primary Brights 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 Playroom Primary Brights.

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

Data visualization

#FF0000#0000FF#FFFF00#00FF00#FFA500

Palette guide

How to use Playroom Primary Brights

Overview

The Playroom Primary Brights palette is a vivid and uninhibited collection of classic primary and secondary colors, designed for boundless creativity and energetic expression. Featuring strong hues like the intense red #FF0000, the deep blue #0000FF, the sunny yellow #FFFF00, the vibrant green #00FF00, and the cheerful orange #FFA500, this palette is perfect for designers and developers aiming to create lively, clear, and highly engaging experiences. Its fundamental yet bold tones make it excellent for projects that need to convey enthusiasm, simplicity, and a welcoming, playful atmosphere, especially for younger audiences. This palette ensures a strong visual presence, making elements pop with pure, unadulterated color.

Best used for

Children's educational apps and websites
Toy product branding and packaging
Kids' activity centers and play spaces
Family-friendly digital game interfaces
Creative arts and crafts promotions
Early learning materials and books

Suggested color roles

primary

Designate #FF0000 as a commanding primary for calls-to-action or main branding elements, demanding immediate attention.

secondary

Utilize #0000FF for stable navigation or secondary interactive elements, providing a grounded and clear contrast.

accent

Highlight critical content or playful graphics with #FFFF00 for an undeniable burst of sunshine and clarity.

background

Employ #00FF00 as an energetic background for specific sections or graphic features, bringing a fresh, lively feel to the design.

text

Pair with pure black (e.g., #000000) for text on lighter hues, and white text for sufficient contrast on darker primary colors.

Accessibility notes

Ensure high contrast for text on bright backgrounds; dark text is often essential for WCAG AA compliance.
Be cautious with adjacent use of #FF0000 (red) and #00FF00 (green) for critical information due to potential red-green color blindness issues.
For body text, use these vibrant colors sparingly or against a neutral background to maintain readability.
Provide clear non-color-dependent indicators for interactive states and feedback to ensure accessibility for all users.

Recommended combinations

Core Brights

Ideal for fundamental branding, iconic logos, or clear call-to-action elements in a playful design.

#FF0000 · #0000FF · #FFFF00

Energetic Mix

Perfect for dynamic illustrations, game elements, or distinct content blocks in a children's interface.

#00FF00 · #FFA500 · #FF0000

Vibrant Structure

Use for highlighting key information, creating vibrant patterns, or structuring interactive UI components.

#0000FF · #FFFF00 · #FFA500

CSS variables

:root {
  --playroom-primary-brights-1: #FF0000;
  --playroom-primary-brights-2: #0000FF;
  --playroom-primary-brights-3: #FFFF00;
  --playroom-primary-brights-4: #00FF00;
  --playroom-primary-brights-5: #FFA500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "playroom-primary-brights": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#00FF00",
        5: "#FFA500",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#00FF00

Color 5#FFA500

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

2.9:1Fail

2:1Fail

2.1:1Fail

8:1AAA

6.3:1AA

4.4:1AA18

3.7:1AA18

8:1AAA

1.3:1Fail

1.8:1Fail

2.9:1Fail

6.3:1AA

1.3:1Fail

1.4:1Fail

2:1Fail

4.4:1AA18

1.8:1Fail

1.4:1Fail

Similar palettes

More like Playroom Primary Brights

View all vibrant

Carnival Pop Art

Childhood Color Blocks