Back to palettes

Palette

Bauhaus Geometric Form

Bold primary colors balanced with stark neutrals, inspired by the clean lines of Bauhaus design.

vibrantminimal5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E60023#005EBB#FFCD00#363636#D4D4D4

Palette guide

How to use Bauhaus Geometric Form

Overview

The Bauhaus Geometric Form palette offers bold primary colors balanced with stark neutrals, inspired by the clean lines of Bauhaus design. Featuring the vibrant red #E60023, deep blue #005EBB, and cheerful yellow #FFCD00, alongside charcoal #363636 and light grey #D4D4D4, this collection is perfect for designers and developers seeking a modern, abstract, and art-inspired aesthetic. It provides a dynamic yet structured foundation for projects that aim for impactful visual communication and a clear, functional design. This palette is ideal for conveying creativity, innovation, and a strong sense of artistic integrity.

Best used for

  • Modern art and design branding and logos
  • Educational platforms for creativity and design
  • Children's educational apps or toy design
  • Graphic design portfolios and showcases
  • Bold website headers and hero sections
  • Event branding for design conferences or workshops

Suggested color roles

primary

Utilize the bold red #E60023 for energetic accents, call-to-actions, or striking headers, ensuring immediate attention.

secondary

Apply the deep blue #005EBB for main navigation, important sections, or stable content blocks, providing a sense of reliability.

accent

Employ the vibrant yellow #FFCD00 for highlights, interactive elements, or playful details, adding a cheerful touch.

background

Use the light grey #D4D4D4 for a clean, neutral canvas, allowing the bold primary colors to truly pop.

text

Integrate the dark charcoal #363636 for excellent readability on light backgrounds, or use white for text on bold primary colors.

Accessibility notes

  • The dark charcoal #363636 provides excellent contrast on #D4D4D4 for body text, ensuring high readability.
  • The vibrant red #E60023 and deep blue #005EBB offer good contrast on #D4D4D4 for headings and key elements.
  • Be cautious when using #FFCD00 as text on #D4D4D4; always check WCAG contrast ratios and consider dark text for legibility.
  • Ensure interactive elements using bold colors have sufficient contrast with their surrounding text or background.

Recommended combinations

Primary Impact

Create a dynamic and engaging visual, perfect for attention-grabbing elements or vibrant hero sections.

#E60023 · #005EBB · #FFCD00

Balanced Modern

Design clean layouts with a bold accent, ideal for branding or informational content with a contemporary feel.

#D4D4D4 · #363636 · #E60023

Geometric Play

Achieve a striking and artistic composition, combining a vibrant duo with a strong neutral for balance.

#005EBB · #FFCD00 · #363636

CSS variables

:root {
  --bauhaus-geometric-form-1: #E60023;
  --bauhaus-geometric-form-2: #005EBB;
  --bauhaus-geometric-form-3: #FFCD00;
  --bauhaus-geometric-form-4: #363636;
  --bauhaus-geometric-form-5: #D4D4D4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bauhaus-geometric-form": {
        1: "#E60023",
        2: "#005EBB",
        3: "#FFCD00",
        4: "#363636",
        5: "#D4D4D4",
      }
    }
  }
}

Related searches

bauhaus primary colorsgeometric art palettemodern abstract designbold primary brandingclean graphic colors

Palette colors

Hex values

Color 1#E60023
·
Color 2#005EBB
·
Color 3#FFCD00
·
Color 4#363636
·
Color 5#D4D4D4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
3.2:1AA18
2.5:1Fail
3.2:1AA18
2
1.3:1Fail
4.2:1AA18
1.9:1Fail
4.3:1AA18
3
3.2:1AA18
4.2:1AA18
8:1AAA
1:1Fail
4
2.5:1Fail
1.9:1Fail
8:1AAA
8.2:1AAA
5
3.2:1AA18
4.3:1AA18
1:1Fail
8.2:1AAA

Similar palettes

More like Bauhaus Geometric Form

View all vibrant
Bauhaus Geometric Grid
Bauhaus Grid Vision
Abstract Geometric Canvas
Abstract Geometric Canvas
Abstract Geometric Canvas
Geometric Abstraction Bold