Back to palettes

Palette

Architectural Concrete Edge

A clean, cool grayscale palette reflecting modern architectural lines and the raw beauty of concrete.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#EEEEEE#CCCCCC#AAAAAA#888888#666666

Palette guide

How to use Architectural Concrete Edge

Overview

The "Architectural Concrete Edge" palette is a clean, cool grayscale collection reflecting modern architectural lines and the raw beauty of concrete. This minimalist palette features a range of sophisticated greys, from the very light Whisper Grey #EEEEEE and the soft Silver #CCCCCC to the balanced Medium Grey #AAAAAA. Deeper tones like Slate Grey #888888 and the robust Dark Grey #666666 complete this versatile set, offering depth and structure. Developers can utilize these shades for sleek, professional user interfaces that prioritize clarity and functionality. Designers will find this palette ideal for projects related to architecture, urban development, technology, or any brand seeking a modern, sophisticated, and understated aesthetic.

Best used for

  • Modern architecture portfolios
  • Tech startup websites
  • Minimalist product design
  • Urban planning presentations
  • Industrial design branding
  • Professional corporate interfaces

Suggested color roles

primary

A strong, dark grey #666666 that provides a solid foundation, ideal for main headings, navigation, or primary structural elements.

secondary

A balanced medium grey #888888 that supports the primary, suitable for subheadings, secondary buttons, or large content blocks.

accent

A lighter grey #AAAAAA that offers a subtle accent, perfect for borders, dividers, or subtle interactive elements.

background

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

text

Use #666666 for headings and #333333 (charcoal) or black for body text on light backgrounds for optimal readability.

Accessibility notes

  • Ensure sufficient contrast for text using #666666 or #888888 on light backgrounds like #EEEEEE or #CCCCCC.
  • Lighter shades like #AAAAAA, #CCCCCC, and #EEEEEE are generally not suitable for small body text; use a darker alternative.
  • Use a very dark neutral (e.g., black or charcoal) for all body text on light backgrounds to ensure wcag compliance.
  • Interactive elements should have clear visual feedback, potentially using a slightly darker or lighter shade on hover.

Recommended combinations

Concrete Base

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

#666666 · #EEEEEE · #888888

Subtle Depth

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

#AAAAAA · #CCCCCC · #EEEEEE

Urban Edge

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

#888888 · #EEEEEE · #666666

CSS variables

:root {
  --architectural-concrete-edge-1: #EEEEEE;
  --architectural-concrete-edge-2: #CCCCCC;
  --architectural-concrete-edge-3: #AAAAAA;
  --architectural-concrete-edge-4: #888888;
  --architectural-concrete-edge-5: #666666;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "architectural-concrete-edge": {
        1: "#EEEEEE",
        2: "#CCCCCC",
        3: "#AAAAAA",
        4: "#888888",
        5: "#666666",
      }
    }
  }
}

Related searches

minimalist grey palettemodern concrete colorsarchitectural neutral schemesleek urban designgrayscale tech interface

Palette colors

Hex values

Color 1#EEEEEE
·
Color 2#CCCCCC
·
Color 3#AAAAAA
·
Color 4#888888
·
Color 5#666666
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2:1Fail
3.1:1AA18
4.9:1AA
2
1.4:1Fail
1.4:1Fail
2.2:1Fail
3.6:1AA18
3
2:1Fail
1.4:1Fail
1.5:1Fail
2.5:1Fail
4
3.1:1AA18
2.2:1Fail
1.5:1Fail
1.6:1Fail
5
4.9:1AA
3.6:1AA18
2.5:1Fail
1.6:1Fail

Similar palettes

More like Architectural Concrete Edge

View all neutral
Bare Concrete Stillness
City Loft Grey
Concrete Garden Grey
Metro Grid Serene
Steel Frame Grit
Terrazzo Floor Art