Back to palettes

Palette

Architectural Grid Hues

A crisp and clean monochrome palette inspired by modern architectural lines and subtle shades of concrete and steel.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Architectural Grid Hues 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 Architectural Grid Hues.

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

Data visualization

#e0e0e0#bdbdbd#9e9e9e#616161#212121

Palette guide

How to use Architectural Grid Hues

Overview

The "Architectural Grid Hues" palette is a crisp and clean monochrome collection inspired by modern architectural lines and subtle shades of concrete and steel. This minimalist palette features a precise gradient of greys, from the very light Pale Grey #e0e0e0 and the soft Grey #bdbdbd to the balanced Medium Grey #9e9e9e. Deeper, more commanding tones like Dark Grey #616161 and the profound Charcoal Black #212121 complete this versatile set, offering structured depth. Developers can utilize these shades for sleek, professional user interfaces that prioritize clarity, functionality, and a strong visual hierarchy. Designers will find this palette ideal for projects related to architecture, industrial design, luxury tech, or any brand seeking a modern, sophisticated, and understated aesthetic.

Best used for

  • High-end architectural firms
  • Minimalist e-commerce platforms
  • Urban design concepts
  • Corporate branding
  • Tech product interfaces
  • Modern art galleries

Suggested color roles

primary

A very dark charcoal black #212121, providing a strong, sophisticated foundation for headers, primary branding, or dominant text.

secondary

A robust dark grey #616161 that adds depth and structure, suitable for large content blocks, sidebars, or secondary navigation.

accent

A balanced medium grey #9e9e9e that offers a subtle accent, perfect for borders, dividers, or subtle interactive elements.

background

A very light pale grey #e0e0e0, offering a clean, expansive backdrop that enhances readability and maintains the minimalist feel.

text

Use #212121 for headings and primary body text on light backgrounds like #e0e0e0 or #bdbdbd.

Accessibility notes

  • Ensure sufficient contrast for text using #212121 or #616161 on light backgrounds like #e0e0e0 and #bdbdbd.
  • Lighter shades like #9e9e9e, #bdbdbd, and #e0e0e0 are generally not suitable for small body text; use a darker alternative.
  • Use #212121 for all body text on the lightest backgrounds to ensure wcag compliance.
  • Interactive elements should have clear visual feedback, potentially using a slightly darker or lighter shade on hover.

Recommended combinations

Sleek Foundation

For establishing a clean, modern base in websites or apps, with charcoal black as primary, pale grey as background, and dark grey for secondary elements.

#212121 · #E0E0E0 · #616161

Grid Depth

Ideal for creating layered effects, subtle gradients, or backgrounds that need a hint of texture without overpowering the minimalist aesthetic.

#9E9E9E · #BDBDBD · #E0E0E0

Modern Contrast

Effective for highlighting important information or calls to action, using dark grey for buttons, pale grey for surrounding space, and charcoal black for button text.

#616161 · #E0E0E0 · #212121

CSS variables

:root {
  --architectural-grid-hues-1: #e0e0e0;
  --architectural-grid-hues-2: #bdbdbd;
  --architectural-grid-hues-3: #9e9e9e;
  --architectural-grid-hues-4: #616161;
  --architectural-grid-hues-5: #212121;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "architectural-grid-hues": {
        1: "#e0e0e0",
        2: "#bdbdbd",
        3: "#9e9e9e",
        4: "#616161",
        5: "#212121",
      }
    }
  }
}

Related searches

monochrome architectural palettemodern grey schememinimalist ui colorssleek concrete designindustrial aesthetic branding

Palette colors

Hex values

Color 1#e0e0e0
·
Color 2#bdbdbd
·
Color 3#9e9e9e
·
Color 4#616161
·
Color 5#212121
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
4.7:1AA
12.2:1AAA
2
1.4:1Fail
1.4:1Fail
3.3:1AA18
8.6:1AAA
3
2:1Fail
1.4:1Fail
2.3:1Fail
6:1AA
4
4.7:1AA
3.3:1AA18
2.3:1Fail
2.6:1Fail
5
12.2:1AAA
8.6:1AAA
6:1AA
2.6:1Fail

Similar palettes

More like Architectural Grid Hues

View all monochrome
Charcoal Whisper Scale
Grey Scale Journey
Minimalist Stone Carve
Monochrome City Grid
Steel City Sheen
Urban Grid Echo