Palette

Geometric Block Pop

A striking and playful arrangement of basic, unmixed colors, like a vibrant, deconstructed art piece.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Geometric Block Pop 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 Geometric Block Pop.

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

Data visualization

#FF0000#00FF00#0000FF#FFFF00#FFA500

Palette guide

How to use Geometric Block Pop

Overview

The Geometric Block Pop palette delivers a striking and playful arrangement of basic, unmixed colors, resembling a vibrant, deconstructed art piece. Featuring the pure intensity of #FF0000, #00FF00, #0000FF, #FFFF00, and #FFA500, this palette is designed for maximum visual impact and youthful energy. Designers can leverage these bold hues to create engaging and memorable compositions, perfect for projects that aim to be energetic, artistic, and unequivocally modern. It's an excellent choice for dynamic branding and captivating digital experiences.

Best used for

Pop art inspired graphic design
Children's branding and educational materials
Interactive digital experiences and games
Event promotions and festival branding
Playful web and app interfaces
Modern product packaging with high visibility

Suggested color roles

primary

Designate #FF0000 for primary calls-to-action or dominant graphic elements, conveying excitement and urgency.

secondary

Employ #0000FF for important information or structural elements, offering a cool, stable counterpoint.

accent

Highlight key interactive components or playful details with #FFFF00 or #FFA500, ensuring high visibility and energy.

background

Use a neutral white or light gray (not in palette, but recommended) to let the vibrant colors pop, or a very dark gray.

text

For optimal readability, use black or a very dark charcoal on the bright colors, or white on the darker primary colors.

Accessibility notes

Avoid using #FFFF00 (yellow) as text on a white or light background due to extremely poor contrast.
Ensure sufficient contrast when using #FFA500 (orange) for text on lighter backgrounds; black text is usually best.
All primary colors (#FF0000, #00FF00, #0000FF) offer good contrast for white or black text.
When using these vibrant colors for backgrounds, ensure text color choice provides strong legibility for all users.

Recommended combinations

Vibrant Primary

Classic primary color trio for bold headers, infographics, or a playful brand identity.

#FF0000 · #0000FF · #FFFF00

Energetic Pop

A dynamic and energetic combination, perfect for calls to action, gaming interfaces, or event promotions.

#00FF00 · #FFA500 · #FF0000

Cool Contrast

Blue base with yellow and green accents, creating a lively yet balanced visual for digital applications.

#0000FF · #FFFF00 · #00FF00

CSS variables

:root {
  --geometric-block-pop-1: #FF0000;
  --geometric-block-pop-2: #00FF00;
  --geometric-block-pop-3: #0000FF;
  --geometric-block-pop-4: #FFFF00;
  --geometric-block-pop-5: #FFA500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "geometric-block-pop": {
        1: "#FF0000",
        2: "#00FF00",
        3: "#0000FF",
        4: "#FFFF00",
        5: "#FFA500",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#00FF00

Color 3#0000FF

Color 4#FFFF00

Color 5#FFA500

Accessibility

Contrast checker

2.9:1Fail

2.1:1Fail

3.7:1AA18

2:1Fail

2.9:1Fail

6.3:1AA

1.3:1Fail

1.4:1Fail

2.1:1Fail

6.3:1AA

8:1AAA

4.4:1AA18

3.7:1AA18

1.3:1Fail

8:1AAA

1.8:1Fail

2:1Fail

1.4:1Fail

4.4:1AA18

1.8:1Fail

Similar palettes

More like Geometric Block Pop

View all vibrant

Abstract Art Strokes

Abstract Block Play

Abstract Canvas Blend

Abstract Canvas Pop

Abstract Canvas Swirl

Abstract Expression Brush