Palette

Abstract Block Play

A straightforward and impactful palette of pure primary colors, reflecting a playful yet sophisticated geometric abstraction.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0000#0000FF#FFFF00#000000#FFFFFF

Palette guide

How to use Abstract Block Play

Overview

The "Abstract Block Play" palette delivers a straightforward yet impactful aesthetic, built upon pure primary colors. Featuring classic #FF0000 (red), #0000FF (blue), and #FFFF00 (yellow), it evokes a playful geometric abstraction reminiscent of Bauhaus design principles. The inclusion of stark #000000 (black) and crisp #FFFFFF (white) provides essential contrast and grounding, allowing these vibrant hues to truly pop. Designers can harness this palette for projects requiring clear visual hierarchy and a bold, direct message. Developers will appreciate the distinctness of these colors for creating impactful UI elements, ensuring high visibility and a memorable user experience.

Best used for

Children's educational apps
Toy brand identity
Modern art exhibition branding
Graphic design posters
Website landing pages with strong calls-to-action
Bauhaus-inspired design projects

Suggested color roles

primary

#FF0000 (Red) - Use for high-impact calls-to-action, warnings, or dominant brand elements to convey urgency and excitement.

secondary

#0000FF (Blue) - Excellent for navigation, links, or secondary interactive elements, providing a sense of stability and trust.

accent

#FFFF00 (Yellow) - Ideal for highlighting key information, notifications, or small, energetic graphic details.

background

#FFFFFF (White) - Provides a clean, minimalist canvas that maximizes readability and allows the primary colors to stand out sharply.

text

#000000 (Black) - The optimal choice for body text and headings on white backgrounds, ensuring maximum legibility and stark contrast.

Accessibility notes

Ensure sufficient contrast when pairing #FFFF00 with #FFFFFF; it will likely fail WCAG AA for text.
Always use #000000 for text on #FFFFFF backgrounds for optimal readability.
Consider larger font sizes for #FF0000 or #0000FF text on #FFFFFF backgrounds to aid readability, even if contrast passes.
Avoid using #FF0000 and #0000FF solely as indicators for colorblind users; provide additional visual cues.

Recommended combinations

Primary Pop

For bold headers and essential navigation elements, leveraging the classic primary contrast.

#FF0000 · #0000FF · #FFFFFF

High Contrast Read

Ideal for text-heavy sections where readability is paramount, with yellow as a subtle highlight.

#000000 · #FFFFFF · #FFFF00

Energetic Focus

Perfect for calls-to-action or banners that demand immediate attention and a vibrant feel.

#FF0000 · #FFFF00 · #000000

CSS variables

:root {
  --abstract-block-play-1: #FF0000;
  --abstract-block-play-2: #0000FF;
  --abstract-block-play-3: #FFFF00;
  --abstract-block-play-4: #000000;
  --abstract-block-play-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abstract-block-play": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#000000",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#000000

Color 5#FFFFFF

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

5.3:1AA

4:1AA18

2.1:1Fail

8:1AAA

2.4:1Fail

8.6:1AAA

3.7:1AA18

8:1AAA

19.6:1AAA

1.1:1Fail

5.3:1AA

2.4:1Fail

19.6:1AAA

21:1AAA

4:1AA18

8.6:1AAA

1.1:1Fail

21:1AAA

Similar palettes

More like Abstract Block Play

View all vibrant

Bold Art Canvas

Geometric Block Pop

Primary Abstract Edge

Abstract Art Strokes

Abstract Canvas Blend

Abstract Canvas Pop