Back to palettes

Palette

Modernist Concrete Art

Cool, sleek grays reflect the stark, clean lines and robust simplicity of modernist architecture and concrete design.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F363F#4A525C#6F7883#9DA7B2#C9D4DF

Palette guide

How to use Modernist Concrete Art

Overview

The "Modernist Concrete Art" palette offers a sophisticated range of cool, muted grays, evoking the raw elegance and robust simplicity of concrete and modernist architecture. From the deep, almost black-gray #2F363F to the airy light gray #C9D4DF, this monochrome collection provides a strong foundation for structured and minimalist designs. Designers can leverage these shades to create a sense of calm, strength, and understated sophistication. Developers will find these hex codes highly effective for building interfaces that prioritize functionality and clean aesthetics, ideal for backgrounds, typography, and subtle UI elements. The consistent cool undertone across #4A525C, #6F7883, and #9DA7B2 ensures harmonious transitions and visual depth.

Best used for

  • Industrial design presentations
  • Architectural portfolio websites
  • Urban fashion branding
  • High-tech product interfaces
  • Minimalist art gallery websites
  • Data-heavy dashboards requiring clarity

Suggested color roles

primary

#2F363F - A deep, dark gray that serves as a powerful anchor for main navigation, key headings, or a strong brand element, akin to polished concrete.

secondary

#4A525C - A rich, dark gray, perfect for subheadings, prominent secondary information, or card backgrounds, providing solid visual weight.

accent

#6F7883 - A balanced mid-gray, suitable for subtle interactive elements, borders, or as a background for focused content areas, adding refinement.

background

#C9D4DF - A very light, cool gray that provides a clean, expansive canvas, mimicking the soft glow of concrete in natural light.

text

#2F363F - Excellent for body text and headlines against lighter backgrounds like #C9D4DF or #9DA7B2, ensuring high readability and a sophisticated feel.

Accessibility notes

  • #2F363F on #C9D4DF provides excellent contrast, suitable for all text sizes.
  • Ensure #6F7883 for text on #C9D4DF meets WCAG AA for normal text; it's generally good for large text.
  • Avoid using #9DA7B2 for small text on #C9D4DF as contrast may be insufficient.
  • For interactive elements, ensure distinct hover/focus states, perhaps by using #4A525C as a highlight.

Recommended combinations

Concrete Base

Ideal for creating layered backgrounds, subtle card components, or soft transitions in UI elements.

#C9D4DF · #9DA7B2 · #6F7883

Deep & Light

Best for strong visual hierarchy, using the light for background and the darks for text and primary elements.

#C9D4DF · #2F363F · #4A525C

Tonal Harmony

Useful for secondary navigation, subtle dividers, or progressive disclosure elements within a minimalist layout.

#4A525C · #6F7883 · #9DA7B2

CSS variables

:root {
  --modernist-concrete-art-1: #2F363F;
  --modernist-concrete-art-2: #4A525C;
  --modernist-concrete-art-3: #6F7883;
  --modernist-concrete-art-4: #9DA7B2;
  --modernist-concrete-art-5: #C9D4DF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "modernist-concrete-art": {
        1: "#2F363F",
        2: "#4A525C",
        3: "#6F7883",
        4: "#9DA7B2",
        5: "#C9D4DF",
      }
    }
  }
}

Related searches

concrete inspired color palettemodernist grey schemeindustrial minimal colorsarchitectural neutral paletteurban cool grey design

Palette colors

Hex values

Color 1#2F363F
·
Color 2#4A525C
·
Color 3#6F7883
·
Color 4#9DA7B2
·
Color 5#C9D4DF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.7:1Fail
5:1AA
8.1:1AAA
2
1.5:1Fail
1.8:1Fail
3.2:1AA18
5.3:1AA
3
2.7:1Fail
1.8:1Fail
1.8:1Fail
3:1Fail
4
5:1AA
3.2:1AA18
1.8:1Fail
1.6:1Fail
5
8.1:1AAA
5.3:1AA
3:1Fail
1.6:1Fail

Similar palettes

More like Modernist Concrete Art

View all monochrome
City Steel Gleam
Concrete Bloom Grey
Industrial Chic Echo
Industrial Cityscape Grey
Modern Loft Concrete
Pavement Abstract Greys