Palette

Bauhaus Geometric Grid

A stark, minimalist palette inspired by the foundational colors and clean lines of the Bauhaus movement.

vibrantminimal5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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 Bauhaus Geometric Grid

Overview

The Bauhaus Geometric Grid palette embodies the fundamental colors and clean lines of the Bauhaus movement with its stark, minimalist aesthetic. Featuring pure red #FF0000, pure blue #0000FF, pure yellow #FFFF00, alongside absolute black #000000 and white #FFFFFF, this collection is ideal for designers and developers seeking high-impact, geometric, and modern designs. It provides a foundational toolkit for projects that emphasize clarity, strong visual hierarchy, and a bold, artistic presence. This palette is perfect for conveying innovation, directness, and a timeless sense of functional beauty.

Best used for

High-impact graphic design and advertising
Modern art exhibition branding and collateral
Educational materials for design principles
Children's book illustrations with a bold style
Minimalist website hero sections and landing pages
Brand identity for innovative tech startups

Suggested color roles

primary

Utilize pure black #000000 for strong lines, foundational elements, and primary text, providing ultimate definition.

secondary

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

accent

Employ primary red #FF0000, blue #0000FF, and yellow #FFFF00 for geometric forms, 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.
Pure red #FF0000 and pure blue #0000FF offer good contrast on white #FFFFFF for headings and key elements.
Pure yellow #FFFF00 absolutely requires dark text (e.g., black #000000) for readability; avoid white text on it.
Always ensure sufficient contrast for all text elements, especially when layered over bright primary color backgrounds.

Recommended combinations

Core Bauhaus

Create a classic, striking aesthetic, ideal for main content, navigation, and high-impact messaging.

#000000 · #FFFFFF · #FF0000

Primary Dynamics

Design vibrant, energetic compositions, perfect for attention-grabbing elements or playful sections.

#FF0000 · #0000FF · #FFFF00

Grid Structure

Establish clear lines and bold statements, providing structure and clarity for various UI elements and content blocks.

#FFFFFF · #000000 · #0000FF

CSS variables

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

Tailwind config

theme: {
  extend: {
    colors: {
      "bauhaus-geometric-grid": {
        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