Palette

Geometric Abstraction Bold

A striking and dynamic palette using foundational colors for bold, impactful geometric designs.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Geometric Abstraction Bold 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 Abstraction Bold.

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

Data visualization

#000000#FFFFFF#FF0000#0000FF#FFFF00

Palette guide

How to use Geometric Abstraction Bold

Overview

The Geometric Abstraction Bold palette is a striking and dynamic collection using foundational colors for impactful geometric designs. Featuring the stark contrast of #000000 and #FFFFFF, alongside the vibrant primary hues of #FF0000, #0000FF, and #FFFF00, this palette is built for maximum visual punch. Designers can leverage these pure, unmixed colors to create modern, minimalist, and highly energetic compositions, perfect for conveying directness and innovation across various digital and print applications, from branding to art.

Best used for

Modern art installations and graphic design
Tech startup branding and UI/UX
Children's educational apps and toys
Event posters and promotional materials
High-contrast data visualization
Minimalist web design with strong impact

Suggested color roles

primary

Use #FF0000 for primary calls-to-action or elements demanding immediate attention, conveying energy and urgency.

secondary

Employ #0000FF for secondary navigation or important informational blocks, providing a stable, cool contrast.

accent

Highlight key features or playful elements with #FFFF00, ensuring maximum visibility against dark backgrounds.

background

Utilize #FFFFFF for a crisp, clean background to emphasize content, or #000000 for a dramatic, immersive experience.

text

For optimal readability, use #000000 on #FFFFFF backgrounds, or #FFFFFF on #000000 and the primary colors.

Accessibility notes

Ensure #FFFF00 (yellow) is never used as text on a #FFFFFF background due to extremely poor contrast.
All primary colors (#FF0000, #0000FF, #FFFF00) provide excellent contrast with #000000 or #FFFFFF text.
When using colored backgrounds, always test text contrast. For example, white text on #0000FF is highly legible.
Consider using a bold font for text on colored backgrounds to further enhance readability, especially with #FFFF00.

Recommended combinations

Primary Impact

A classic, high-energy combination for bold branding, calls to action, or a vibrant interface header.

#FF0000 · #0000FF · #FFFFFF

High Contrast

Dramatic dark background with a bright yellow accent and a strong blue for secondary information.

#000000 · #FFFF00 · #0000FF

Modern Basic

Clean white base with black text and a powerful red accent, ideal for minimalist designs needing a pop.

#FFFFFF · #000000 · #FF0000

CSS variables

:root {
  --geometric-abstraction-bold-1: #000000;
  --geometric-abstraction-bold-2: #FFFFFF;
  --geometric-abstraction-bold-3: #FF0000;
  --geometric-abstraction-bold-4: #0000FF;
  --geometric-abstraction-bold-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "geometric-abstraction-bold": {
        1: "#000000",
        2: "#FFFFFF",
        3: "#FF0000",
        4: "#0000FF",
        5: "#FFFF00",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#FFFFFF

Color 3#FF0000

Color 4#0000FF

Color 5#FFFF00

Accessibility

Contrast checker

21:1AAA

5.3:1AA

2.4:1Fail

19.6:1AAA

21:1AAA

4:1AA18

8.6:1AAA

1.1:1Fail

5.3:1AA

4:1AA18

2.1:1Fail

3.7:1AA18

2.4:1Fail

8.6:1AAA

2.1:1Fail

8:1AAA

19.6:1AAA

1.1:1Fail

3.7:1AA18

8:1AAA

Similar palettes

More like Geometric Abstraction Bold

Abstract Canvas Blend

Abstract Canvas Pop

Abstract Canvas Swirl