Back to palettes

Palette

Architectural Slate Gray

The sleek, cool grays of modern architecture, inspired by slate and urban structures.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Architectural Slate Gray 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 Slate Gray.

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

Data visualization

#36454F#576574#788996#9BB0C0#BCCCDF

Palette guide

How to use Architectural Slate Gray

Overview

The "Architectural Slate Gray" palette embodies the sleek, cool grays of modern architecture, inspired by slate and urban structures. This sophisticated neutral collection features a harmonious gradient from the deep Charcoal Grey #36454F and the robust Slate Grey #576574 to the balanced Medium Grey #788996. Lighter, ethereal tones like Light Grey #9BB0C0 and the very pale Blue Grey #BCCCDF complete this versatile set, offering subtle depth and elegance. Developers can utilize these shades for polished, professional user interfaces that prioritize clarity, functionality, and a refined aesthetic. Designers will find this palette ideal for projects related to high-end architecture, corporate branding, luxury products, or any brand seeking a modern, sophisticated, and understated visual identity.

Best used for

  • Luxury real estate websites
  • Corporate branding and reports
  • Industrial design portfolios
  • Minimalist app interfaces
  • High-tech product displays
  • Modern interior design concepts

Suggested color roles

primary

A deep, rich charcoal grey #36454F, providing a strong, sophisticated foundation for headers, primary branding, or dominant backgrounds.

secondary

A balanced slate grey #576574 that adds depth and elegance, suitable for large content blocks, sidebars, or secondary navigation.

accent

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

background

A very light blue-grey #BCCCDF, offering a clean, expansive backdrop that enhances readability and maintains the sleek feel.

text

Use #36454F for headings and primary body text on light backgrounds like #BCCCDF or #9BB0C0.

Accessibility notes

  • Ensure sufficient contrast for text using #36454F or #576574 on light backgrounds like #BCCCDF and #9BB0C0.
  • Lighter shades like #788996, #9BB0C0, and #BCCCDF 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 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

Slate Base

For establishing a sleek, modern base in websites or apps, with charcoal grey as primary, light blue-grey as background, and slate grey for secondary elements.

#36454F · #BCCCDF · #576574

Architectural Layers

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

#788996 · #9BB0C0 · #BCCCDF

Refined Contrast

Effective for highlighting important information or calls to action, using slate grey for buttons, light blue-grey for surrounding space, and charcoal grey for button text.

#576574 · #BCCCDF · #36454F

CSS variables

:root {
  --architectural-slate-gray-1: #36454F;
  --architectural-slate-gray-2: #576574;
  --architectural-slate-gray-3: #788996;
  --architectural-slate-gray-4: #9BB0C0;
  --architectural-slate-gray-5: #BCCCDF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "architectural-slate-gray": {
        1: "#36454F",
        2: "#576574",
        3: "#788996",
        4: "#9BB0C0",
        5: "#BCCCDF",
      }
    }
  }
}

Related searches

modern grey palettesleek architectural colorsslate blue grey schememinimalist corporate designconcrete neutral aesthetic

Palette colors

Hex values

Color 1#36454F
·
Color 2#576574
·
Color 3#788996
·
Color 4#9BB0C0
·
Color 5#BCCCDF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.7:1Fail
4.4:1AA18
6.1:1AA
2
1.7:1Fail
1.7:1Fail
2.7:1Fail
3.6:1AA18
3
2.7:1Fail
1.7:1Fail
1.6:1Fail
2.2:1Fail
4
4.4:1AA18
2.7:1Fail
1.6:1Fail
1.4:1Fail
5
6.1:1AA
3.6:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Architectural Slate Gray

View all neutral
City Concrete Grind
Concrete Garden Grey
Concrete Garden Wall
Graffiti Alley Hue
Graffiti Wall Grind
Gritty Urban Canvas