Back to palettes

Palette

Modernist Concrete Slab

Clean, structured grays reflecting the understated elegance of modernist concrete architecture.

minimalminimal5 colors
More minimal palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6C7A89#95A5A6#CED8DA#E8ECEE#4A5661

Palette guide

How to use Modernist Concrete Slab

Overview

The "Modernist Concrete Slab" palette offers a serene and structured collection of cool grays, embodying the understated elegance and robust simplicity of modernist architecture. Ranging from the deep, anchoring #4A5661 to the airy, almost white #E8ECEE, this palette is perfect for creating clean, functional, and sophisticated designs. Designers can utilize these shades to evoke a sense of calm, order, and timelessness. Developers will find these hex codes highly versatile for building interfaces that prioritize clarity and a strong visual hierarchy, ideal for backgrounds, typography, and subtle UI elements. The balanced mid-tones like #6C7A89 and #95A5A6 ensure harmonious transitions and professional polish.

Best used for

  • Architectural and interior design firms
  • Minimalist e-commerce platforms
  • High-end furniture or product showcases
  • Corporate branding for finance or tech
  • Editorial design for art and culture
  • Web applications with a clean, serious aesthetic

Suggested color roles

primary

#4A5661 - A deep, cool blue-gray, excellent for main navigation, bold headlines, or key interactive elements, anchoring the design.

secondary

#6C7A89 - A substantial mid-gray, suitable for subheadings, important secondary information, or content dividers, adding structure.

accent

#95A5A6 - A softer, muted gray, perfect for subtle interactive states, borders, or as a background for secondary content blocks, providing gentle emphasis.

background

#E8ECEE - A very light, almost off-white gray, serving as a clean, expansive canvas that reduces eye strain and highlights content.

text

#4A5661 - Provides excellent contrast for body text and headlines against lighter backgrounds like #E8ECEE or #CED8DA, ensuring optimal readability.

Accessibility notes

  • #4A5661 on #E8ECEE offers strong contrast, suitable for all text sizes.
  • Ensure #6C7A89 for text on #E8ECEE meets WCAG AA standards for normal text; it's generally good.
  • Avoid using #CED8DA for small text on #E8ECEE due to insufficient contrast.
  • For interactive components, ensure clear visual feedback for focus and hover states, perhaps by using #6C7A89 borders.

Recommended combinations

Base & Depth

Creates layered backgrounds and subtle card effects, providing depth without strong contrast.

#E8ECEE · #CED8DA · #95A5A6

Strong Hierarchy

Ideal for main content areas, with the light background and dark colors for titles and primary text.

#E8ECEE · #4A5661 · #6C7A89

Architectural Detail

Useful for progressive disclosure, active navigation states, or subtle graphic elements in a structured layout.

#95A5A6 · #6C7A89 · #4A5661

CSS variables

:root {
  --modernist-concrete-slab-1: #6C7A89;
  --modernist-concrete-slab-2: #95A5A6;
  --modernist-concrete-slab-3: #CED8DA;
  --modernist-concrete-slab-4: #E8ECEE;
  --modernist-concrete-slab-5: #4A5661;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "modernist-concrete-slab": {
        1: "#6C7A89",
        2: "#95A5A6",
        3: "#CED8DA",
        4: "#E8ECEE",
        5: "#4A5661",
      }
    }
  }
}

Related searches

concrete grey color schemearchitectural minimal paletteclean modern greysophisticated neutral colorsminimalist web design greys

Palette colors

Hex values

Color 1#6C7A89
·
Color 2#95A5A6
·
Color 3#CED8DA
·
Color 4#E8ECEE
·
Color 5#4A5661
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3:1AA18
3.7:1AA18
1.7:1Fail
2
1.7:1Fail
1.8:1Fail
2.2:1Fail
2.9:1Fail
3
3:1AA18
1.8:1Fail
1.2:1Fail
5.2:1AA
4
3.7:1AA18
2.2:1Fail
1.2:1Fail
6.3:1AA
5
1.7:1Fail
2.9:1Fail
5.2:1AA
6.3:1AA

Similar palettes

More like Modernist Concrete Slab

View all minimal
Coastal Driftwood Grey
Pebble Garden Calm
Whisper Clay Earth
Architectural Slate Gray
Cityscape Blueprint
Concrete Garden Grey