Back to palettes

Palette

Brutalist Concrete Form

Harsh, unadorned tones reflect the strong, imposing presence of brutalist architecture and raw concrete.

darkminimal5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Brutalist Concrete 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 Brutalist Concrete Form.

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

Data visualization

#2C3E50#6D7B8D#9BA4AB#CFD9DB#4A5B6F

Palette guide

How to use Brutalist Concrete Form

Overview

The Brutalist Concrete Form palette features harsh, unadorned tones that reflect the strong, imposing presence of brutalist architecture and raw concrete. This dark and minimalist collection includes #2C3E50 (a deep charcoal blue), #6D7B8D (a medium slate grey), #9BA4AB (a lighter concrete grey), #CFD9DB (a very light, almost white grey), and #4A5B6F (a dark steel blue). Designers and developers will find this palette ideal for creating robust, modern, and sophisticated designs that emphasize structure, form, and a powerful, understated aesthetic.

Best used for

  • Architectural firm portfolios and websites
  • Industrial design and engineering branding
  • Minimalist tech brands and software interfaces
  • Urban development project presentations
  • Sophisticated menswear and minimalist fashion
  • Abstract art and photography displays

Suggested color roles

primary

Use #2C3E50 for a commanding, foundational presence, ideal for backgrounds, headers, or main content blocks.

secondary

Employ #4A5B6F and #6D7B8D for supporting sections, subheadings, or to create subtle textural depth.

accent

Apply #9BA4AB and #CFD9DB for clean highlights, separators, or as airy background elements to balance the darker tones.

background

A light #CFD9DB provides a stark, clean base, while #2C3E50 offers a powerful, deep foundation for dramatic effect.

text

White or a very light grey (#F0F0F0) is excellent for text on the darker shades. Black or dark grey works best on #CFD9DB.

Accessibility notes

  • The lightest shades, #9BA4AB and #CFD9DB, require dark text (black or dark grey) for sufficient contrast.
  • Deeper tones like #2C3E50, #4A5B6F, and #6D7B8D are excellent for white or light grey text.
  • Ensure good contrast between all text and background elements, especially for body text.
  • Avoid using mid-tone greys for text on similar backgrounds without careful contrast checking.

Recommended combinations

Raw Structure

Creates a deep, robust, and industrial feel, perfect for strong branding or architectural layouts.

#2C3E50 · #6D7B8D · #4A5B6F

Concrete Facade

Offers a light, airy, and architectural aesthetic, ideal for clean interfaces or subtle details.

#9BA4AB · #CFD9DB · #6D7B8D

Shadow Play

Provides strong contrast, depth, and form, suitable for impactful visuals or feature sections.

#4A5B6F · #2C3E50 · #9BA4AB

CSS variables

:root {
  --brutalist-concrete-form-1: #2C3E50;
  --brutalist-concrete-form-2: #6D7B8D;
  --brutalist-concrete-form-3: #9BA4AB;
  --brutalist-concrete-form-4: #CFD9DB;
  --brutalist-concrete-form-5: #4A5B6F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "brutalist-concrete-form": {
        1: "#2C3E50",
        2: "#6D7B8D",
        3: "#9BA4AB",
        4: "#CFD9DB",
        5: "#4A5B6F",
      }
    }
  }
}

Related searches

concrete color palettebrutalist design colorsindustrial grey schememinimalist architecture palettedark neutral colors

Palette colors

Hex values

Color 1#2C3E50
·
Color 2#6D7B8D
·
Color 3#9BA4AB
·
Color 4#CFD9DB
·
Color 5#4A5B6F
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
4.3:1AA18
7.6:1AAA
1.6:1Fail
2
2.5:1Fail
1.7:1Fail
3:1Fail
1.6:1Fail
3
4.3:1AA18
1.7:1Fail
1.8:1Fail
2.7:1Fail
4
7.6:1AAA
3:1Fail
1.8:1Fail
4.8:1AA
5
1.6:1Fail
1.6:1Fail
2.7:1Fail
4.8:1AA

Similar palettes

More like Brutalist Concrete Form

View all dark