Palette

Playful Toy Box

A joyful collection of bright primary colors, like scattered toys from a child's colorful toy box.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Playful Toy Box 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 Toy Box.

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

Data visualization

#FF0000#0000FF#00FF00#FFFF00#FF69B4

Palette guide

How to use Playful Toy Box

Overview

The Playful Toy Box palette is a joyful collection of classic primary colors, evoking the nostalgia of scattered toys and carefree childhood moments. Featuring bright and fundamental hues like the pure red #FF0000, the deep blue #0000FF, the vivid green #00FF00, the sunny yellow #FFFF00, and the cheerful pink #FF69B4, this collection is perfect for designers and developers aiming to create energetic, clear, and universally appealing experiences. Its strong, foundational colors make it excellent for projects that need to convey enthusiasm, simplicity, and a welcoming, playful atmosphere. This palette ensures high visual impact, making elements stand out with a familiar yet exciting burst of color.

Best used for

Children's book illustrations and websites
Early childhood education materials
Toy store branding and packaging
Family entertainment apps and games
Kids' event and party promotions
Creative learning platforms

Suggested color roles

primary

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

secondary

Utilize #0000FF for stable navigation or secondary interactive elements, providing a grounded 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.

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

Primary Play

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

#FF0000 · #0000FF · #FFFF00

Vibrant Fun

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

#00FF00 · #FF69B4 · #FF0000

Bold Contrast

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

#0000FF · #FFFF00 · #00FF00

CSS variables

:root {
  --playful-toy-box-1: #FF0000;
  --playful-toy-box-2: #0000FF;
  --playful-toy-box-3: #00FF00;
  --playful-toy-box-4: #FFFF00;
  --playful-toy-box-5: #FF69B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "playful-toy-box": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#00FF00",
        4: "#FFFF00",
        5: "#FF69B4",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#00FF00

Color 4#FFFF00

Color 5#FF69B4

Accessibility

Contrast checker

2.1:1Fail

2.9:1Fail

3.7:1AA18

1.5:1Fail

2.1:1Fail

6.3:1AA

8:1AAA

3.2:1AA18

2.9:1Fail

6.3:1AA

1.3:1Fail

1.9:1Fail

3.7:1AA18

8:1AAA

1.3:1Fail

2.5:1Fail

1.5:1Fail

3.2:1AA18

1.9:1Fail

2.5:1Fail

Similar palettes

More like Playful Toy Box

View all vibrant

Lego Block Primary

Primary Toy Block Party

Skybound Kite

Toy Box Imagination

Big Top Parade

Bright Carnival Swirl