Palette

Toy Box Primary

A vibrant and cheerful collection of classic primary colors, reminiscent of a child's toy box full of colorful blocks.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ff0000#0000ff#ffff00#008000#ff69b4

Palette guide

How to use Toy Box Primary

Overview

The Toy Box Primary palette delivers a classic, cheerful collection of foundational colors, reminiscent of a child's vibrant playthings. Featuring true red #ff0000, royal blue #0000ff, sunny yellow #ffff00, a rich green #008000, and a touch of playful pink #ff69b4, this palette is direct and universally appealing. Designers can leverage these bold, clear hues to create engaging and accessible experiences, especially in contexts that benefit from straightforward color communication. It's an excellent choice for projects needing a sense of simplicity, energy, and broad appeal, evoking nostalgia and immediate recognition.

Best used for

Children's branding and product design
Educational materials and interfaces
Simple, direct marketing campaigns
Game design for a broad audience
Event signage and decorations
User interfaces requiring clear visual hierarchy

Suggested color roles

primary

Use #ff0000 for high-impact calls to action, critical alerts, or dominant brand elements that need immediate attention.

secondary

Employ #0000ff for navigation, core interactive components, or to provide a stable, trustworthy anchor in the design.

accent

Apply #ffff00 for highlights, warnings, or playful decorative elements, adding a bright, energetic pop.

background

A clean white or light gray background is ideal to let these vibrant colors truly shine and maintain visual clarity.

text

Black or a very dark charcoal (e.g., #333333) is essential for text to ensure maximum contrast and readability on any of these bright colors.

Accessibility notes

Most of these pure, saturated colors (e.g., #ffff00 on white) will fail WCAG contrast ratios for text; always use dark text.
Ensure sufficient contrast for interactive elements, especially when using two bright colors in close proximity (e.g., #ff0000 and #ff69b4).
Avoid using #ffff00 for small text; it has inherently poor contrast against light backgrounds.
Pair these bold colors with neutral backgrounds and clear, dark typography to enhance readability and reduce visual strain.

Recommended combinations

Classic Play

Emphasizes fundamental primary colors, perfect for a straightforward, high-impact, and universally recognizable design.

#FF0000 · #0000FF · #FFFF00

Energetic Mix

Creates a lively and cheerful combination, suitable for playful sections, badges, or accentuating diverse content.

#FF69B4 · #008000 · #FF0000

Bold Contrast

Provides strong visual separation and a balanced, vibrant look, great for infographics or distinct content blocks.

#0000FF · #FFFF00 · #008000

CSS variables

:root {
  --toy-box-primary-1: #ff0000;
  --toy-box-primary-2: #0000ff;
  --toy-box-primary-3: #ffff00;
  --toy-box-primary-4: #008000;
  --toy-box-primary-5: #ff69b4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "toy-box-primary": {
        1: "#ff0000",
        2: "#0000ff",
        3: "#ffff00",
        4: "#008000",
        5: "#ff69b4",
      }
    }
  }
}

Hex values

Color 1#ff0000

Color 2#0000ff

Color 3#ffff00

Color 4#008000

Color 5#ff69b4

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

1.3:1Fail

1.5:1Fail

2.1:1Fail

8:1AAA

1.7:1Fail

3.2:1AA18

3.7:1AA18

8:1AAA

4.8:1AA

2.5:1Fail

1.3:1Fail

1.7:1Fail

4.8:1AA

1.9:1Fail

1.5:1Fail

3.2:1AA18

2.5:1Fail

1.9:1Fail

Similar palettes

More like Toy Box Primary

View all vibrant

Childhood Color Blocks

Playful Toy Blocks

Playroom Primary Brights

Retro Toy Box

Toy Box Imagination

Building Blocks Bright