Palette

Lego Block Primary

Classic, bold primary colors reflecting the simple, vibrant joy of Lego blocks.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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 Lego Block Primary

Overview

The Lego Block Primary palette is a vibrant and energetic collection of classic, bold colors, reminiscent of beloved building blocks. Featuring pure #FF0000 (red), #0000FF (blue), #FFFF00 (yellow), #00FF00 (green), and a playful #FF69B4 (hot pink), this palette is designed for maximum impact and joy. It's an excellent choice for designers and developers looking to create engaging, playful, or high-energy designs. These colors are inherently attention-grabbing and convey a sense of fun, making them ideal for projects targeting a younger audience or requiring a strong, direct visual statement.

Best used for

Children's toy branding
Educational app interfaces
Playful event promotions
High-contrast warning systems
Vibrant digital art projects
Youth-focused marketing campaigns

Suggested color roles

primary

Use #FF0000 as a dominant, attention-grabbing primary color for calls-to-action or critical information.

secondary

Employ #0000FF for supporting elements, navigation, or to provide a strong, stable contrast to the red.

accent

Apply #FF69B4 for playful highlights, interactive elements, or to inject a burst of energetic fun into the design.

background

A pure white background (e.g., #FFFFFF) is recommended to allow these vibrant colors to truly pop and maximize contrast.

text

Utilize #000000 (black) for text on light backgrounds or #0000FF for titles on white, ensuring maximum readability.

Accessibility notes

Ensure sufficient contrast when using #FFFF00 for text; it generally requires black text for readability.
Avoid placing highly saturated colors like #FF0000 and #0000FF immediately adjacent to each other for small elements, as it can cause visual vibration.
For users with color blindness, differentiate information not solely by color, as red and green can be problematic.
When using #00FF00 for text, ensure it's on a very dark background or use a darker green to meet WCAG contrast standards.

Recommended combinations

Bold Statement

Classic primary combination for impactful branding or high-contrast infographics, using each color distinctly.

#FF0000 · #0000FF · #FFFF00

Playful Pop

Great for a fun, energetic UI element, with #00FF00 as background, #FF69B4 for a button, and #0000FF for text.

#00FF00 · #FF69B4 · #0000FF

Bright Contrast

Effective for alerts or warnings, using #FFFF00 as a background with #FF0000 text and #0000FF for icons.

#FFFF00 · #FF0000 · #0000FF

CSS variables

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

Tailwind config

theme: {
  extend: {
    colors: {
      "lego-block-primary": {
        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 Lego Block Primary

Primary Toy Block Party

Vivid Toy Box Joy

Carnival Pop Art