Palette

Bauhaus Block Subtle

Clean lines and simple forms inspired by the modern aesthetic of Bauhaus design, in cool neutral tones.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Bauhaus Block Subtle 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 Block Subtle.

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

Data visualization

#3A3A3A#6C6C6C#A2A2A2#D8D8D8#222222

Palette guide

How to use Bauhaus Block Subtle

Overview

The Bauhaus Block Subtle palette embodies clean lines and simple forms with its cool neutral tones, inspired by the modern aesthetic of Bauhaus design. Featuring the deep charcoal #222222, dark grey #3A3A3A, and very light grey #D8D8D8, this collection is perfect for designers and developers seeking a minimalist and sophisticated aesthetic. The additional shades of #6C6C6C and #A2A2A2 complete a spectrum that provides subtle variations, creating depth and distinction within a monochromatic scheme. This palette is ideal for projects that require understated elegance, robust modernity, and a focus on clarity and structure.

Best used for

Modern art gallery websites and branding
Minimalist product design and packaging
Architectural portfolios and firm identities
Branding for design-focused businesses
Clean and uncluttered user interfaces and applications
Editorial design with a sophisticated, contemporary edge

Suggested color roles

primary

Utilize the deep charcoal #222222 for strong outlines, primary text, or dominant sections, providing a powerful anchor.

secondary

Apply the dark grey #3A3A3A for main content areas, headers, or significant textual blocks, offering strong readability.

accent

Employ the mid-grey #A2A2A2 for subtle interactive elements, borders, or delicate UI components, adding refinement.

background

Use the very light grey #D8D8D8 for a clean, expansive canvas, creating a neutral and sophisticated backdrop.

text

Integrate the darkest grey #222222 or #3A3A3A for primary text on light backgrounds, or use white for optimal readability on darker shades.

Accessibility notes

The deepest charcoal #222222 and dark grey #3A3A3A provide excellent contrast on #D8D8D8 for body text, ensuring high readability.
Ensure #6C6C6C text on #A2A2A2 background meets WCAG contrast requirements for legibility.
For primary body text, use the darkest shades like #222222 or #3A3A3A to maintain optimal readability.
Avoid low-contrast pairings such as #A2A2A2 text on #D8D8D8, as it may significantly hinder readability.

Recommended combinations

Bauhaus Contrast

Create a stark, modern, and readable design, ideal for main content, navigation, and high-impact messaging.

#222222 · #D8D8D8 · #3A3A3A

Subtle Layers

Design a sophisticated, layered grayscale effect for content panels, sections, or background textures, providing visual depth.

#3A3A3A · #6C6C6C · #A2A2A2

Clean Background

Establish a light theme with strong textual elements, providing clarity and a modern aesthetic for various UI components.

#D8D8D8 · #222222 · #6C6C6C

CSS variables

:root {
  --bauhaus-block-subtle-1: #3A3A3A;
  --bauhaus-block-subtle-2: #6C6C6C;
  --bauhaus-block-subtle-3: #A2A2A2;
  --bauhaus-block-subtle-4: #D8D8D8;
  --bauhaus-block-subtle-5: #222222;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "bauhaus-block-subtle": {
        1: "#3A3A3A",
        2: "#6C6C6C",
        3: "#A2A2A2",
        4: "#D8D8D8",
        5: "#222222",
      }
    }
  }
}

Hex values

Color 1#3A3A3A

Color 2#6C6C6C

Color 3#A2A2A2

Color 4#D8D8D8

Color 5#222222

Accessibility

Contrast checker

2.2:1Fail

4.5:1AA18

8:1AAA

1.4:1Fail

2.2:1Fail

2.1:1Fail

3.7:1AA18

3:1AA18

4.5:1AA18

2.1:1Fail

1.8:1Fail

6.2:1AA

8:1AAA

3.7:1AA18

1.8:1Fail

11.2:1AAA

1.4:1Fail

3:1AA18

6.2:1AA

11.2:1AAA

Similar palettes

More like Bauhaus Block Subtle

View all neutral

Concrete Garden Grey

Concrete Grid Lines

Concrete Jungle Bloom

Concrete Loft Living

Gallery Wall Azure

Industrial Chic Loft