Palette

Bauhaus Primary Forms

A bold and direct palette using primary colors, inspired by the fundamental forms of Bauhaus art.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Bauhaus Primary Forms 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 Primary Forms.

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

Data visualization

#FF0000#0000FF#FFFF00#FF4500#008000

Palette guide

How to use Bauhaus Primary Forms

Overview

The Bauhaus Primary Forms palette is a bold and direct collection using primary colors, inspired by the fundamental forms of Bauhaus art. Featuring pure red #FF0000, pure blue #0000FF, pure yellow #FFFF00, alongside vibrant orange #FF4500 and a balanced green #008000, this collection is perfect for designers and developers seeking an energetic, modern, and impactful aesthetic. It provides a dynamic and straightforward foundation for projects that aim for strong visual communication and a clear, functional design. This palette is ideal for conveying creativity, vibrancy, and a timeless sense of artistic integrity.

Best used for

Creative branding and logos for innovative companies
Children's educational materials and apps
Art and design workshops and educational platforms
Interactive web experiences and gamified interfaces
Graphic design projects needing high visual impact
Event promotions with a vibrant and energetic feel

Suggested color roles

primary

Utilize the bold red #FF0000 for attention-grabbing elements, call-to-actions, or striking headers, ensuring immediate visibility.

secondary

Apply pure blue #0000FF for stable, foundational areas, main navigation, or important content blocks, providing reliability.

accent

Employ bright yellow #FFFF00 for highlights, and vibrant orange #FF4500 and green #008000 for playful dynamics and visual interest.

background

Use neutral white or a light grey to allow the vibrant primary colors to truly pop and maintain a clean aesthetic.

text

Integrate black or dark grey on light backgrounds, or white on dark primary colors for optimal readability and contrast.

Accessibility notes

Pure red #FF0000, pure blue #0000FF, vibrant orange #FF4500, and green #008000 provide good contrast for white text on themselves.
Pure yellow #FFFF00 absolutely requires dark text (e.g., black or dark grey) for readability; avoid white text on it.
Ensure sufficient contrast for all text elements, especially when layered over bright primary color backgrounds, by checking WCAG guidelines.
Avoid using light text on #FFFF00 to prevent readability issues.

Recommended combinations

Classic Primary

Create a fundamental and bold statement, ideal for main content, navigation, and high-impact messaging.

#FF0000 · #0000FF · #FFFF00

Energetic Mix

Design a vibrant and dynamic composition, perfect for attention-grabbing elements or playful sections.

#FF4500 · #008000 · #FF0000

Geometric Focus

Achieve a playful yet structured visual, combining cool and warm accents for a dynamic presentation.

#0000FF · #FFFF00 · #FF4500

CSS variables

:root {
  --bauhaus-primary-forms-1: #FF0000;
  --bauhaus-primary-forms-2: #0000FF;
  --bauhaus-primary-forms-3: #FFFF00;
  --bauhaus-primary-forms-4: #FF4500;
  --bauhaus-primary-forms-5: #008000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bauhaus-primary-forms": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#FF4500",
        5: "#008000",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000FF

Color 3#FFFF00

Color 4#FF4500

Color 5#008000

Accessibility

Contrast checker

2.1:1Fail

3.7:1AA18

1.2:1Fail

1.3:1Fail

2.1:1Fail

8:1AAA

2.5:1Fail

1.7:1Fail