Palette

Primary Block Fun

Bold and cheerful, inspired by the basic primary colors of building blocks and childhood joy.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Primary Block Fun 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 Primary Block Fun.

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

Data visualization

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

Palette guide

How to use Primary Block Fun

Overview

The Primary Block Fun palette is a cheerful and energetic collection of pure, vibrant colors, reminiscent of classic building blocks. It features the bold #FF0000 (Red), the solid #0000FF (Blue), and the sunny #FFFF00 (Yellow) as its primary anchors. These are playfully complemented by the lively #00FF00 (Lime) and the delightful #FF69B4 (Hot Pink), adding a modern twist to the traditional primary set. This palette is ideal for designers and developers creating projects aimed at children, or any design needing to convey a sense of joy, simplicity, and active engagement. Its high saturation and clear distinction make it perfect for creating approachable, fun, and highly visible interfaces or marketing materials.

Best used for

Children's toy packaging
Kids' learning apps and websites
Playground design concepts
Party invitations and decorations
Youth sports team branding
Bright, engaging infographics

Suggested color roles

primary

Use #FF0000 (Red) or #0000FF (Blue) as foundational brand colors or for strong calls-to-action, conveying energy and reliability.

secondary

Employ #FFFF00 (Yellow) for highlights, alerts, or to add a cheerful pop, drawing immediate attention.

accent

Apply #00FF00 (Lime) or #FF69B4 (Hot Pink) for interactive elements, icons, or playful graphic details to add a modern, fun flair.

background

A pure white or very light gray background will allow these vibrant colors to shine without competition.

text

For optimal readability on any of these bright colors, use pure white or pure black text. Avoid using colors from this palette for text on other palette colors.

Accessibility notes

Most color combinations from this palette will have poor contrast for text. Always use black or white text for readability.
Be cautious with #FFFF00 for text against light backgrounds; ensure sufficient contrast by using a dark text color or a strong outline.
Ensure interactive elements are clearly distinguishable, especially for users with color vision deficiencies, by incorporating icons or patterns.
Test all text and interactive element color pairings against WCAG standards, aiming for AA or AAA compliance where possible.

Recommended combinations

Playful Core

Excellent for main branding elements, clear headers, or educational content, establishing a classic and engaging tone.

#FF0000 · #0000FF · #FFFF00

Vibrant Fun

Ideal for playful accents, interactive buttons, or illustrations that require a fresh, energetic, and youthful appeal.

#00FF00 · #FF69B4 · #FFFF00

Bold Contrast

Suitable for creating dynamic posters, game interfaces, or impactful call-out boxes, ensuring high visibility and energy.

#0000FF · #FF0000 · #FF69B4

CSS variables

:root {
  --primary-block-fun-1: #FF0000;
  --primary-block-fun-2: #0000FF;
  --primary-block-fun-3: #FFFF00;
  --primary-block-fun-4: #00FF00;
  --primary-block-fun-5: #FF69B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "primary-block-fun": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#00FF00",
        5: "#FF69B4",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#00FF00

Color 5#FF69B4

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

2.9:1Fail

1.5:1Fail

2.1:1Fail

8:1AAA

6.3:1AA

3.2:1AA18

3.7:1AA18

8:1AAA

1.3:1Fail

2.5:1Fail

2.9:1Fail

6.3:1AA

1.3:1Fail

1.9:1Fail

1.5:1Fail

3.2:1AA18

2.5:1Fail

1.9:1Fail

Similar palettes

More like Primary Block Fun

Playroom Primary Brights

Art Studio Chaos

Big Top Parade