Palette

Childhood Block Play

Bold and bright primary colors combined with light grays, reminiscent of classic toy blocks.

Vibrantplayful5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Childhood Block 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 Childhood Block Play.

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

Data visualization

#FF5733#33FF57#3357FF#F0F0F0#8A8A8A

Palette guide

How to use Childhood Block Play

Overview

The Childhood Block Play palette is a vibrant and playful collection, reminiscent of classic toy blocks and youthful imagination. It features bold primary colors: #FF5733 (Bright Orange-Red), #33FF57 (Vivid Green), and #3357FF (Electric Blue). These energetic hues are balanced by a clean, light #F0F0F0 (Light Grey) and a grounding #8A8A8A (Medium Grey), providing stability to the otherwise lively scheme. This palette is perfect for designers aiming to evoke fun, creativity, and a sense of nostalgic joy. It's particularly effective for children's brands, educational content, or any design seeking to be cheerful, approachable, and dynamic.

Best used for

Children's toy and apparel branding
Educational app interfaces
Playful event promotions
Creative workshop marketing
Family-friendly website design
Graphic design for youth programs

Suggested color roles

primary

Utilize #FF5733 (Bright Orange-Red) for impactful call-to-actions, main headings, or key branding elements.

secondary

Apply #3357FF (Electric Blue) for navigation, important links, or to provide a strong, contrasting pop.

accent

Employ #33FF57 (Vivid Green) for highlights, interactive elements, or to add a refreshing burst of color.

background

Use #F0F0F0 (Light Grey) as a clean, neutral background that allows the vibrant colors to truly stand out.

text

For body text, a dark grey like #8A8A8A or a classic black provides optimal readability against the light background.

Accessibility notes

Ensure sufficient contrast for text on #F0F0F0 background, using #8A8A8A or black for body text.
Pair white text with #FF5733, #33FF57, and #3357FF to ensure readability on these bold colors.
Avoid using light grey text on #F0F0F0 due to insufficient contrast.
Test contrast ratios for interactive elements, ensuring all users can distinguish them clearly.

Recommended combinations

Primary Pop

Ideal for bold headers and content, with #F0F0F0 as a clean background for contrast.

#FF5733 · #3357FF · #F0F0F0

Energetic Balance

Use #8A8A8A for supporting text or subtle elements, with the bright colors for main features.

#33FF57 · #8A8A8A · #FF5733

Playful Foundation

Combine for backgrounds and UI, where #3357FF adds a lively touch to neutral elements.

#F0F0F0 · #3357FF · #8A8A8A

CSS variables

:root {
  --childhood-block-play-1: #FF5733;
  --childhood-block-play-2: #33FF57;
  --childhood-block-play-3: #3357FF;
  --childhood-block-play-4: #F0F0F0;
  --childhood-block-play-5: #8A8A8A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "childhood-block-play": {
        1: "#FF5733",
        2: "#33FF57",
        3: "#3357FF",
        4: "#F0F0F0",
        5: "#8A8A8A",
      }
    }
  }
}

Hex values

Color 1#FF5733

Color 2#33FF57

Color 3#3357FF

Color 4#F0F0F0

Color 5#8A8A8A

Accessibility

Contrast checker

2.3:1Fail

1.7:1Fail

2.8:1Fail

1.1:1Fail

2.3:1Fail

3.9:1AA18

1.2:1Fail

2.6:1Fail

1.7:1Fail

3.9:1AA18

4.7:1AA

1.5:1Fail

2.8:1Fail

1.2:1Fail

4.7:1AA

3:1AA18

1.1:1Fail

2.6:1Fail

1.5:1Fail

3:1AA18

Similar palettes

More like Childhood Block Play

View all Vibrant

Carnival Flag Swirl

Bubblegum Pop Blast

Playful Gumball Brights

Retro Candy Pop

Retro Comic Pop

Crayon Box Delight