Back to palettes

Palette

Muted Urban Concrete

Reflects the understated coolness of city structures and the varied textures of concrete.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Muted Urban Concrete 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 Muted Urban Concrete.

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

Data visualization

#778899#A9A9A9#B0C4DE#D3D3D3#696969

Palette guide

How to use Muted Urban Concrete

Overview

The Muted Urban Concrete palette captures the sophisticated, understated essence of cityscapes and raw architectural materials. This collection features a cool slate gray, #778899, a classic dark gray, #A9A9A9, and a soft, muted steel blue, #B0C4DE. A light gray, #D3D3D3, provides a clean, neutral base, while a deep charcoal, #696969, offers strong grounding. This palette is perfect for designs that aim for a modern, minimalist, and industrial aesthetic. It evokes a sense of strength, clarity, and contemporary style, ideal for tech brands, architecture firms, or urban-inspired projects.

Best used for

  • Modern architecture firm websites
  • Tech startup branding
  • Minimalist product design
  • Urban lifestyle blogs
  • Industrial interior design showcases
  • Professional corporate presentations

Suggested color roles

primary

Use #696969 (Charcoal Gray) for main headings, footers, or strong graphical elements to provide a solid, contemporary anchor.

secondary

Apply #778899 (Slate Gray) for subheadings, navigation, or card backgrounds, offering a sophisticated, cool undertone.

accent

Utilize #B0C4DE (Steel Blue) for interactive elements, icons, or subtle highlights to add a touch of modern cool without overpowering.

background

Employ #D3D3D3 (Light Gray) as an excellent, clean, and neutral canvas for content, providing high readability for darker text.

text

A dark gray or black works best for body text on #D3D3D3. For text on #696969 or #778899, white or a very light gray is recommended.

Accessibility notes

  • Ensure robust contrast when using #696969 or #778899 with white or light gray text for optimal readability.
  • #D3D3D3 provides excellent contrast with the darker grays for text, making it a reliable background.
  • Avoid using #A9A9A9 for small text on #B0C4DE as their mid-range values might lead to insufficient contrast.
  • Always verify text and interactive element contrast ratios with accessibility checkers to meet WCAG standards.

Recommended combinations

Cityscape Core

Ideal for a professional website header, using #696969 for the main bar, #D3D3D3 for navigation, and #B0C4DE for active states.

#696969 · #D3D3D3 · #B0C4DE

Concrete Layers

Great for creating hierarchical data dashboards, with #778899 for primary data, #A9A9A9 for secondary, and #D3D3D3 for the background.

#778899 · #A9A9A9 · #D3D3D3

Modern Steel

Perfect for minimalist icons or UI components, using #B0C4DE as the fill, #696969 for outlines, and #A9A9A9 for subtle details.

#B0C4DE · #696969 · #A9A9A9

CSS variables

:root {
  --muted-urban-concrete-1: #778899;
  --muted-urban-concrete-2: #A9A9A9;
  --muted-urban-concrete-3: #B0C4DE;
  --muted-urban-concrete-4: #D3D3D3;
  --muted-urban-concrete-5: #696969;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "muted-urban-concrete": {
        1: "#778899",
        2: "#A9A9A9",
        3: "#B0C4DE",
        4: "#D3D3D3",
        5: "#696969",
      }
    }
  }
}

Related searches

modern gray color schemeurban minimalist paletteconcrete inspired colorsindustrial cool tonesneutral architecture palette

Palette colors

Hex values

Color 1#778899
·
Color 2#A9A9A9
·
Color 3#B0C4DE
·
Color 4#D3D3D3
·
Color 5#696969
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2:1Fail
2.4:1Fail
1.5:1Fail
2
1.5:1Fail
1.3:1Fail
1.6:1Fail
2.3:1Fail
3
2:1Fail
1.3:1Fail
1.2:1Fail
3.1:1AA18
4
2.4:1Fail
1.6:1Fail
1.2:1Fail
3.7:1AA18
5
1.5:1Fail
2.3:1Fail
3.1:1AA18
3.7:1AA18

Similar palettes

More like Muted Urban Concrete

View all neutral
Urban Concrete Calm
City Concrete Grind
Concrete Garden Grey
Concrete Jungle Bloom
Graffiti Alley Hue
Graffiti Wall Grind