Back to palettes

Palette

Bauhaus Geometry Play

A bold and striking palette inspired by the fundamental shapes and primary colors of the Bauhaus art movement.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Bauhaus Geometry Play 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 Geometry Play.

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

Data visualization

#f44336#2196f3#ffeb3b#4caf50#9e9e9e

Palette guide

How to use Bauhaus Geometry Play

Overview

The Bauhaus Geometry Play palette is a bold and striking collection inspired by the fundamental shapes and primary colors of the Bauhaus art movement. Featuring vibrant red #f44336, bright blue #2196f3, cheerful yellow #ffeb3b, and fresh green #4caf50, alongside a balancing neutral grey #9e9e9e, this collection is perfect for designers and developers seeking an energetic, modern, and playful 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 exploration.

Best used for

  • Creative agency branding and digital marketing
  • Playful educational content and children's apps
  • Interactive web applications and UI/UX
  • Children's media and toy design
  • Modern art and design events branding
  • Editorial layouts with a contemporary and artistic feel

Suggested color roles

primary

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

secondary

Apply the bright blue #2196f3 for main navigation, important sections, or stable content blocks, providing a sense of reliability.

accent

Employ the cheerful yellow #ffeb3b and fresh green #4caf50 for playful highlights, interactive elements, or dynamic details.

background

Use the neutral grey #9e9e9e for a balanced, modern canvas, allowing the vibrant primary colors to truly pop.

text

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

Accessibility notes

  • The neutral grey #9e9e9e provides a good base for all vibrant primary colors when used as text, ensuring readability.
  • Ensure #ffeb3b text has sufficient contrast against any background, especially lighter ones; always consider dark text for legibility.
  • Vibrant red #f44336, bright blue #2196f3, and fresh green #4caf50 generally offer good contrast on #9e9e9e.
  • Always check WCAG guidelines for text and interactive element contrast, particularly with the brighter accents.

Recommended combinations

Playful Primaries

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

#F44336 · #2196F3 · #FFEB3B

Modern Balance

Design balanced layouts with vibrant pops of color, ideal for branding or informational content with a contemporary feel.

#9E9E9E · #F44336 · #2196F3

Geometric Harmony

Achieve a fresh and engaging color trio, combining cool and warm accents for a dynamic visual presentation.

#2196F3 · #4CAF50 · #FFEB3B

CSS variables

:root {
  --bauhaus-geometry-play-1: #f44336;
  --bauhaus-geometry-play-2: #2196f3;
  --bauhaus-geometry-play-3: #ffeb3b;
  --bauhaus-geometry-play-4: #4caf50;
  --bauhaus-geometry-play-5: #9e9e9e;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bauhaus-geometry-play": {
        1: "#f44336",
        2: "#2196f3",
        3: "#ffeb3b",
        4: "#4caf50",
        5: "#9e9e9e",
      }
    }
  }
}

Related searches

playful bauhaus palettevibrant geometric colorsmodern primary designenergetic art palettecolorful abstract branding

Palette colors

Hex values

Color 1#f44336
·
Color 2#2196f3
·
Color 3#ffeb3b
·
Color 4#4caf50
·
Color 5#9e9e9e
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
3:1AA18
1.3:1Fail
1.4:1Fail
2
1.2:1Fail
2.6:1Fail
1.1:1Fail
1.2:1Fail
3
3:1AA18
2.6:1Fail
2.3:1Fail
2.2:1Fail
4
1.3:1Fail
1.1:1Fail
2.3:1Fail
1:1Fail
5
1.4:1Fail
1.2:1Fail
2.2:1Fail
1:1Fail

Similar palettes

More like Bauhaus Geometry Play

View all vibrant