Palette

Primary Block Party

A joyful and vibrant collection of pure primary colors, reminiscent of classic childhood building blocks and simple fun.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0000#FFD700#0000FF#008000#FFFFFF

Palette guide

How to use Primary Block Party

Overview

The Primary Block Party palette is a joyous and straightforward collection of pure primary colors, designed to evoke the simplicity and fun of childhood building blocks. It features the classic #FF0000 (Red), the brilliant #FFD700 (Gold), and the deep #0000FF (Blue), forming a vibrant and balanced triad. The palette is grounded by the rich #008000 (Green) and brightened by a clean #FFFFFF (White), offering versatility for various applications. This palette is perfect for designers and developers aiming for a playful, energetic, and highly legible aesthetic. It's particularly effective for projects related to children, community events, or any design that benefits from clear, distinct, and universally appealing color choices, ensuring a cheerful and inviting user experience.

Best used for

Children's educational websites
Community event promotions
Toy store branding
Family-friendly app interfaces
Playful product packaging
School fair marketing materials

Suggested color roles

primary

Use #FF0000 (Red) or #0000FF (Blue) as dominant brand colors or for high-impact calls-to-action.

secondary

Employ #FFD700 (Gold) for highlights, alerts, or celebratory elements, adding warmth and cheer.

accent

Apply #008000 (Green) for complementary accents, icons, or to represent growth and nature within the playful context.

background

A crisp #FFFFFF (White) serves as the ideal background, allowing all other vibrant colors to pop and maintain clarity.

text

For optimal readability, use a dark charcoal or black text on #FFFFFF and #FFD700. Use #FFFFFF for text on #FF0000, #0000FF, and #008000.

Accessibility notes

Ensure sufficient contrast when using #FFD700 text on a white background; black or very dark text is recommended.
The primary colors (#FF0000, #0000FF, #008000) offer good contrast with #FFFFFF text, but always verify with a contrast checker.
Avoid placing #FFD700 text on #008000 or #FF0000 backgrounds directly due to potential contrast issues.
Test all color pairings against WCAG standards, especially for interactive elements and critical information, to ensure broad accessibility.

Recommended combinations

Classic Fun

Excellent for main headers, navigation, or strong brand messaging, offering a universally appealing and bold look.

#FF0000 · #0000FF · #FFFFFF

Sunny Play

Ideal for cheerful accents, subtle illustrations, or informational graphics, providing a fresh and inviting feel.

#FFD700 · #008000 · #FFFFFF

Block Contrast

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

#0000FF · #FFD700 · #FF0000

CSS variables

:root {
  --primary-block-party-1: #FF0000;
  --primary-block-party-2: #FFD700;
  --primary-block-party-3: #0000FF;
  --primary-block-party-4: #008000;
  --primary-block-party-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "primary-block-party": {
        1: "#FF0000",
        2: "#FFD700",
        3: "#0000FF",
        4: "#008000",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#FFD700

Color 3#0000FF

Color 4#008000

Color 5#FFFFFF

Accessibility

Contrast checker

2.9:1Fail

2.1:1Fail

1.3:1Fail

4:1AA18

2.9:1Fail

6.1:1AA

3.7:1AA18

1.4:1Fail

2.1:1Fail

6.1:1AA

1.7:1Fail

8.6:1AAA

1.3:1Fail

3.7:1AA18

1.7:1Fail

5.1:1AA

4:1AA18

1.4:1Fail

8.6:1AAA

5.1:1AA

Similar palettes

More like Primary Block Party

Festival Marquee Lights