Palette

Modern Geometric Canvas

Striking primary colors juxtaposed with stark black and white, creating a bold, contemporary art statement.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Modern Geometric Canvas 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 Modern Geometric Canvas.

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

Data visualization

#000000#FFFFFF#FF0000#00BFFF#FFFF00

Palette guide

How to use Modern Geometric Canvas

Overview

The Modern Geometric Canvas palette is a bold and energetic collection featuring stark primary colors juxtaposed with classic black and white, creating a contemporary art statement. This palette includes pure #000000 black, crisp #FFFFFF white, vibrant #FF0000 red, an electric #00BFFF blue, and a striking #FFFF00 yellow. It's designed for projects that demand a clean, modern, and high-impact visual identity, reminiscent of Mondrian or Bauhaus aesthetics. Ideal for graphic design, art installations, educational materials, or branding that seeks to convey simplicity, strength, and dynamic energy. Designers will appreciate its clarity and versatility.

Best used for

Contemporary art branding
Educational children's apps
Geometric pattern design
Minimalist event posters
Architectural visualization
Bold website hero sections

Suggested color roles

primary

Utilize #000000 and #FFFFFF as foundational colors, providing stark contrast and a clean canvas.

secondary

Employ #FF0000 or #00BFFF for prominent elements, drawing immediate attention and defining key areas.

accent

The vibrant #FFFF00 is perfect for calls to action, warnings, or playful highlights, ensuring high visibility.

background

Either #FFFFFF or #000000 serves as a primary background, creating a dramatic stage for the primary colors.

text

For text, always use #000000 on light backgrounds like #FFFFFF, or #FFFFFF on dark backgrounds like #000000. These combinations ensure maximum readability.

Accessibility notes

All primary colors (#FF0000, #00BFFF, #FFFF00) provide excellent contrast against both #000000 and #FFFFFF.
Ensure text is always black on white or white on black for maximum readability, especially for body copy.
Avoid using primary colors as background for text in another primary color (e.g., red text on blue background) due to potential vibrance issues.
This palette is inherently high contrast, making it generally accessible for visual distinction.

Recommended combinations

Bauhaus Basic

Classic, high-contrast combination for bold statements, ideal for headlines and strong branding.

#000000 · #FFFFFF · #FF0000

Digital Pop

Creates a lively and modern feel, perfect for interactive elements or energetic graphics.

#00BFFF · #FFFF00 · #000000

Clean Structure

A bright base with primary accents, suitable for clean layouts and clear information hierarchy.

#FFFFFF · #00BFFF · #FF0000

CSS variables

:root {
  --modern-geometric-canvas-1: #000000;
  --modern-geometric-canvas-2: #FFFFFF;
  --modern-geometric-canvas-3: #FF0000;
  --modern-geometric-canvas-4: #00BFFF;
  --modern-geometric-canvas-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "modern-geometric-canvas": {
        1: "#000000",
        2: "#FFFFFF",
        3: "#FF0000",
        4: "#00BFFF",
        5: "#FFFF00",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#FFFFFF

Color 3#FF0000

Color 4#00BFFF

Color 5#FFFF00

Accessibility

Contrast checker

21:1AAA

5.3:1AA

9.9:1AAA

19.6:1AAA

21:1AAA

4:1AA18

2.1:1Fail

1.1:1Fail

5.3:1AA

4:1AA18

1.9:1Fail

3.7:1AA18