Back to palettes

Palette

Concrete Garden Grey

A sophisticated selection of cool grays, echoing the muted tones of modern urban architecture and quiet strength.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Concrete Garden Grey 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 Concrete Garden Grey.

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

Data visualization

#6D777F#9CA9B3#C8D1D8#4D565F#87949C

Palette guide

How to use Concrete Garden Grey

Overview

The "Concrete Garden Grey" palette offers a sophisticated range of cool grays, perfect for designs seeking a minimalist and modern aesthetic. Inspired by urban architecture, these muted tones evoke quiet strength and timeless elegance. With a deep foundational grey like #4D565F, a versatile mid-tone #6D777F, and lighter shades such as #C8D1D8, this collection provides excellent depth and contrast. Designers will appreciate its ability to create serene, professional, and understated digital or physical environments. It's an ideal choice for projects aiming for a clean, unobtrusive visual identity that subtly communicates contemporary sophistication.

Best used for

  • Modern architectural portfolios
  • Minimalist UI/UX designs
  • Corporate branding for tech or design firms
  • Contemporary home decor websites
  • Urban lifestyle blogs or apps
  • High-end product packaging

Suggested color roles

primary

#6D777F - A balanced medium grey, excellent for main content areas or primary branding elements, providing a strong yet understated presence.

secondary

#9CA9B3 - A lighter, airy grey, ideal for supporting information, secondary navigation, or backgrounds that require a subtle lift from the primary.

accent

#87949C - A slightly warmer, inviting grey that can be used for interactive elements, subtle highlights, or calls to action without overwhelming the minimalist feel.

background

#C8D1D8 - The lightest shade, perfect for clean, expansive backgrounds, ensuring readability and a sense of openness.

text

#4D565F - A deep, cool charcoal that offers excellent contrast against lighter backgrounds like #C8D1D8 or #9CA9B3, ensuring optimal readability.

Accessibility notes

  • Ensure #4D565F text has sufficient contrast against #C8D1D8 or #9CA9B3 backgrounds for WCAG AA compliance.
  • Avoid placing lighter grays like #C8D1D8 on #9CA9B3 for critical text, as contrast may be too low.
  • Use a strong contrast for interactive elements, e.g., #6D777F buttons on a #C8D1D8 background.
  • Consider using pure black or near-black for very small text if the palette's darker grays don't meet minimum contrast ratios on light backgrounds.

Recommended combinations

Urban Foundation

Creates a strong, grounded base with clear hierarchy, suitable for website footers or sophisticated layouts.

#4D565F · #6D777F · #C8D1D8

Soft Contrast

Ideal for clean, readable content blocks where a softer visual distinction is desired.

#9CA9B3 · #6D777F · #C8D1D8

Accent Lift

Highlights specific elements against deeper tones, maintaining the cool, modern aesthetic.

#87949C · #4D565F · #9CA9B3

CSS variables

:root {
  --concrete-garden-grey-1: #6D777F;
  --concrete-garden-grey-2: #9CA9B3;
  --concrete-garden-grey-3: #C8D1D8;
  --concrete-garden-grey-4: #4D565F;
  --concrete-garden-grey-5: #87949C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "concrete-garden-grey": {
        1: "#6D777F",
        2: "#9CA9B3",
        3: "#C8D1D8",
        4: "#4D565F",
        5: "#87949C",
      }
    }
  }
}

Related searches

cool grey color schemesmodern minimalist palettesurban architectural colorsneutral grey brandingsophisticated grey design

Palette colors

Hex values

Color 1#6D777F
·
Color 2#9CA9B3
·
Color 3#C8D1D8
·
Color 4#4D565F
·
Color 5#87949C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3:1Fail
1.6:1Fail
1.5:1Fail
2
1.9:1Fail
1.6:1Fail
3.1:1AA18
1.3:1Fail
3
3:1Fail
1.6:1Fail
4.8:1AA
2:1Fail
4
1.6:1Fail
3.1:1AA18
4.8:1AA
2.4:1Fail
5
1.5:1Fail
1.3:1Fail
2:1Fail
2.4:1Fail

Similar palettes

More like Concrete Garden Grey

View all neutral
Metro Grid Serene
Steel Frame Grit
Urban Loft Serene
Architectural Concrete Edge
Bare Concrete Stillness
Brutalist Bloom Grey