Palette

Minimalist Concrete

Clean and understated, reflecting the quiet strength and modernity of concrete textures.

NeutralMinimal5 colors

More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#373A3C#6C757D#ADB5BD#CED4DA#E9ECEF

Palette guide

How to use Minimalist Concrete

Overview

The Minimalist Concrete palette embodies the quiet strength and modernity of concrete textures through a clean, understated range of greys. From the deep, grounding #373A3C to the bright, airy #E9ECEF, with intermediate shades like #6C757D, #ADB5BD, and #CED4DA, this palette offers a robust and versatile foundation for contemporary design. It's ideal for architectural visualizations, urban-themed branding, or minimalist UI/UX where a sense of structure, durability, and refined simplicity is paramount. The consistent cool undertones provide a cohesive and professional aesthetic, allowing designers to build strong, uncluttered visual experiences.

Best used for

Modern architecture and urban planning
Industrial product design
Minimalist web and app interfaces
Corporate branding with a strong identity
Photography and art portfolios
Automotive design showcases

Suggested color roles

primary

#6C757D - A balanced, solid grey, excellent for main content areas, primary navigation, or prominent UI elements, providing a stable and modern feel.

secondary

#ADB5BD - A lighter, more reflective grey, suitable for supporting information, subtle dividers, or backgrounds that need a gentle lift.

accent

#373A3C - The deepest, most impactful shade, ideal for strong calls to action, important headlines, or sleek UI icons, offering significant contrast.

background

#E9ECEF - A very light, almost off-white grey, creating a clean, expansive canvas that enhances other colors without being stark white.

text

#373A3C - A dark, highly readable charcoal grey, perfect for body text on light backgrounds like #E9ECEF or #CED4DA, ensuring excellent legibility.

Accessibility notes

Ensure #373A3C text has strong contrast against #E9ECEF or #CED4DA for optimal readability.
Avoid using #ADB5BD text on #CED4DA background due to insufficient contrast, especially for smaller fonts.
For interactive elements, use #373A3C or #6C757D to ensure clear visibility against lighter backgrounds.
When using lighter tones for text, like #ADB5BD, ensure it's on a significantly darker background such as #373A3C.

Recommended combinations

Urban Foundation

High-contrast pairing for headlines and essential interactive elements on a bright, clean background.

#373A3C · #E9ECEF · #6C757D

Concrete Layers

Gradual shifts for background elements, data visualizations, or multi-level information display.

#6C757D · #ADB5BD · #CED4DA

Modern Structure

A light background with a mid-tone primary and a deep accent for a balanced, modern, and professional design.

#E9ECEF · #6C757D · #373A3C

CSS variables

:root {
  --minimalist-concrete-1: #373A3C;
  --minimalist-concrete-2: #6C757D;
  --minimalist-concrete-3: #ADB5BD;
  --minimalist-concrete-4: #CED4DA;
  --minimalist-concrete-5: #E9ECEF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "minimalist-concrete": {
        1: "#373A3C",
        2: "#6C757D",
        3: "#ADB5BD",
        4: "#CED4DA",
        5: "#E9ECEF",
      }
    }
  }
}

Hex values

Color 1#373A3C

Color 2#6C757D

Color 3#ADB5BD

Color 4#CED4DA

Color 5#E9ECEF

Accessibility

Contrast checker

2.4:1Fail

5.5:1AA

7.7:1AAA

9.7:1AAA

2.4:1Fail

2.3:1Fail

3.1:1AA18

4:1AA18

5.5:1AA

2.3:1Fail

1.4:1Fail

1.7:1Fail

7.7:1AAA

3.1:1AA18

1.4:1Fail

1.3:1Fail

9.7:1AAA

4:1AA18

1.7:1Fail

1.3:1Fail

Similar palettes

More like Minimalist Concrete

Urban Concrete Jungle

Cityscape Window Glint

Urban Grunge Wall