Palette

Childhood Color Blocks

A vibrant explosion of classic primary colors, evoking the boundless energy of a child's playroom.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Childhood Color Blocks 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 Childhood Color Blocks.

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

Data visualization

#FF0000#0000FF#FFFF00#008000#FFA500

Palette guide

How to use Childhood Color Blocks

Overview

The Childhood Color Blocks palette is a vibrant explosion of classic primary and secondary colors, directly inspired by children's playrooms and boundless energy. Featuring iconic hues like #FF0000 (Pure Red), #0000FF (Pure Blue), #FFFF00 (Pure Yellow), #008000 (Forest Green), and #FFA500 (Orange), it's designed to be instantly recognizable and cheerful. This palette is perfect for designers aiming to evoke fun, simplicity, and a sense of nostalgic playfulness. It's particularly effective for children's brands, educational materials, or any design that benefits from bold, straightforward color communication and a lively, energetic aesthetic.

Best used for

Children's media and entertainment
Educational material design
Toy and game branding
Playful event promotions
Creative workshop marketing
Family-oriented website design

Suggested color roles

primary

Designate #FF0000 (Pure Red) for dominant branding elements, call-to-actions, or significant headings.

secondary

Utilize #0000FF (Pure Blue) for navigation, important links, or to provide strong visual anchors.

accent

Employ #FFFF00 (Pure Yellow) for highlights, warnings, or playful decorative elements to add cheer.

background

For optimal clarity, use a clean white background (e.g., #FFFFFF) to allow these vibrant colors to pop.

text

Black (#000000) is the most suitable text color for maximum contrast and readability against these vivid hues.

Accessibility notes

Pair white or very light text with #FF0000, #0000FF, #008000, and #FFA500 for readability.
Ensure black text on #FFFF00 has sufficient contrast (WCAG AA requires 4.5:1, AAA requires 7:1 for normal text).
Avoid using two highly saturated colors together for text and background without careful contrast checking.
Interactive elements should be clearly distinguishable, possibly by using white text on a primary color.

Recommended combinations

Classic Primary

Ideal for main branding, logos, or any design needing a strong, universally recognized color scheme.

#FF0000 · #0000FF · #FFFF00

Playful Mix

Combine for illustrations, infographics, or sections requiring multiple vibrant, contrasting colors.

#008000 · #FFA500 · #FF0000

Bold Contrast

Use for headers, call-to-actions, or to create dynamic visual sections with high energy.

#0000FF · #FFFF00 · #FFA500

CSS variables

:root {
  --childhood-color-blocks-1: #FF0000;
  --childhood-color-blocks-2: #0000FF;
  --childhood-color-blocks-3: #FFFF00;
  --childhood-color-blocks-4: #008000;
  --childhood-color-blocks-5: #FFA500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "childhood-color-blocks": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#008000",
        5: "#FFA500",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#008000

Color 5#FFA500

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

1.3:1Fail

2:1Fail

2.1:1Fail

8:1AAA

1.7:1Fail

4.4:1AA18

3.7:1AA18

8:1AAA

4.8:1AA

1.8:1Fail

1.3:1Fail

1.7:1Fail

4.8:1AA

2.6:1Fail

2:1Fail

4.4:1AA18

1.8:1Fail

2.6:1Fail

Similar palettes

More like Childhood Color Blocks

Playroom Primary Brights

Retro Toy Box

Toy Box Imagination