Palette

Bauhaus Grid Vision

Bold and fundamental, this palette embraces the simplicity and stark contrasts of geometric abstraction.

vibrantminimal5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Bauhaus Grid Vision 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 Bauhaus Grid Vision.

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

Data visualization

#E60026#0033A0#FFED00#000000#FFFFFF

Palette guide

How to use Bauhaus Grid Vision

Overview

The Bauhaus Grid Vision palette embraces the simplicity and stark contrasts of geometric abstraction with bold, fundamental colors. Featuring the striking red #E60026, deep blue #0033A0, and bright yellow #FFED00, alongside absolute black #000000 and white #FFFFFF, this collection is ideal for designers and developers seeking high-contrast, modern, and minimalist designs. It provides a robust toolkit for projects that emphasize clear structure, strong visual hierarchy, and a bold, art-deco inspired presence. This palette is perfect for conveying precision, innovation, and a timeless sense of functional beauty.

Best used for

High-contrast web interfaces and digital applications
Modern art and design publications and branding
Architectural firm branding and presentations
Educational materials for graphic design principles
Bold advertising campaigns and marketing collateral
Minimalist product packaging with a striking aesthetic

Suggested color roles

primary

Utilize pure black #000000 for strong structural elements, foundational text, and dominant sections, providing ultimate definition.

secondary

Apply pure white #FFFFFF for clean backgrounds, expansive negative space, and contrasting text, ensuring clarity.

accent

Employ bold red #E60026, deep blue #0033A0, and bright yellow #FFED00 for geometric accents, highlights, and dynamic visual elements.

background

Use white #FFFFFF for a crisp, clean canvas, or black #000000 for dramatic impact and a sophisticated dark theme.

text

Integrate black #000000 on white backgrounds, or white #FFFFFF on black or primary colors for optimal readability and contrast.

Accessibility notes

Black #000000 on white #FFFFFF (and vice-versa) provides maximum contrast, ensuring optimal readability.
Bold red #E60026 and deep blue #0033A0 offer good contrast on white #FFFFFF for headings and key elements.
Bright yellow #FFED00 requires dark text (e.g., black #000000) for readability; avoid white text on it.
Ensure sufficient contrast for all text elements, especially smaller fonts, when layered over bright primary color backgrounds.

Recommended combinations

Classic Bauhaus

Create a stark, iconic look, ideal for main content, navigation, and high-impact messaging with strong contrast.

#000000 · #FFFFFF · #E60026

Primary Dynamics

Design bold and energetic compositions, perfect for attention-grabbing elements or dynamic visual sections.

#E60026 · #0033A0 · #FFED00

Grid Foundation

Establish a clean, structured, and modern design, providing clarity and visual hierarchy for various UI elements.

#FFFFFF · #000000 · #0033A0

CSS variables

:root {
  --bauhaus-grid-vision-1: #E60026;
  --bauhaus-grid-vision-2: #0033A0;
  --bauhaus-grid-vision-3: #FFED00;
  --bauhaus-grid-vision-4: #000000;
  --bauhaus-grid-vision-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bauhaus-grid-vision": {
        1: "#E60026",
        2: "#0033A0",
        3: "#FFED00",
        4: "#000000",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#E60026

Color 2#0033A0

Color 3#FFED00

Color 4#000000

Color 5#FFFFFF

Accessibility

Contrast checker

2.2:1Fail

4:1AA18

4.4:1AA18

4.8:1AA

2.2:1Fail

8.8:1AAA

2:1Fail

10.6:1AAA

4:1AA18

8.8:1AAA

17.4:1AAA

1.2:1Fail

4.4:1AA18

2:1Fail

17.4:1AAA

21:1AAA

4.8:1AA

10.6:1AAA

1.2:1Fail

21:1AAA

Similar palettes

More like Bauhaus Grid Vision

View all vibrant

Bauhaus Geometric Form

Bauhaus Geometric Grid

Urban Teal Oasis

Abstract Geometric Canvas

Abstract Geometric Hue

Digital Interface Matrix