Back to palettes

Palette

Urban Concrete Calm

A sleek, understated palette of greys and near-whites, perfect for a modern urban aesthetic.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#708090#D3D3D3#C0C0C0#ECEFF1

Palette guide

How to use Urban Concrete Calm

Overview

The Urban Concrete Calm palette (version 2) is a sleek, understated collection of grays and near-whites, perfectly embodying a modern urban aesthetic. It's a sophisticated choice for designs seeking clarity, structure, and a tranquil mood. The palette includes a deep, almost teal-black `#2F4F4F`, a balanced medium cool gray `#708090`, and a range of luminous lighter grays: `#D3D3D3`, `#C0C0C0`, and the pristine near-white `#ECEFF1`. This selection creates a seamless gradient from dark to light, ideal for minimalist designs that prioritize clean lines and a refined visual experience, evoking calm and precision.

Best used for

  • Architectural firm branding
  • High-tech product interfaces
  • Minimalist website designs
  • Luxury lifestyle applications
  • Modern art exhibition materials
  • Clean editorial layouts

Suggested color roles

primary

Use `#2F4F4F` as a strong, grounding color for headlines, primary navigation, or impactful graphic elements, providing deep contrast.

secondary

Apply `#708090` for body text, subheadings, or as a background for sections requiring a softer, yet substantial, presence.

accent

Introduce `#C0C0C0` for subtle highlights, icons, or dividers, adding a touch of refined sparkle without overwhelming the calm.

background

Utilize `#ECEFF1` for expansive, clean backgrounds, creating an airy and sophisticated canvas that enhances readability.

text

For dark text on light backgrounds, `#2F4F4F` offers excellent contrast. For lighter text on darker elements, a crisp white or light gray like `#C0C0C0` works well.

Accessibility notes

  • Ensure `#2F4F4F` text on `#ECEFF1` background meets WCAG contrast standards for all text sizes.
  • Verify that `#708090` text on `#ECEFF1` also maintains sufficient contrast for readability.
  • Avoid using `#D3D3D3` or `#C0C0C0` for small text on very light backgrounds, as contrast may be insufficient.
  • Distinguish clearly between `#D3D3D3` and `#C0C0C0` if they are used for adjacent UI elements to prevent confusion.

Recommended combinations

Sleek Foundation

Ideal for constructing a modern website or app, providing strong base colors and a clean, readable background.

#2F4F4F · #708090 · #ECEFF1

Calm Layers

Excellent for subtle background textures, overlays, or UI elements where a soft, layered gradient of light grays is desired.

#ECEFF1 · #C0C0C0 · #D3D3D3

Refined Contrast

Perfect for headings, dividers, or prominent graphic elements that require a strong dark anchor with a sophisticated light highlight.

#2F4F4F · #C0C0C0 · #708090

CSS variables

:root {
  --urban-concrete-calm-2-1: #2F4F4F;
  --urban-concrete-calm-2-2: #708090;
  --urban-concrete-calm-2-3: #D3D3D3;
  --urban-concrete-calm-2-4: #C0C0C0;
  --urban-concrete-calm-2-5: #ECEFF1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-calm-2": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#D3D3D3",
        4: "#C0C0C0",
        5: "#ECEFF1",
      }
    }
  }
}

Related searches

slate grey palettemodern urban calmminimalist grey whiteunderstated design colorscool concrete aesthetic

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#708090
·
Color 3#D3D3D3
·
Color 4#C0C0C0
·
Color 5#ECEFF1
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
6:1AA
4.9:1AA
7.7:1AAA
2
2.2:1Fail
2.7:1Fail
2.2:1Fail
3.5:1AA18
3
6:1AA
2.7:1Fail
1.2:1Fail
1.3:1Fail
4
4.9:1AA
2.2:1Fail
1.2:1Fail
1.6:1Fail
5
7.7:1AAA
3.5:1AA18
1.3:1Fail
1.6:1Fail

Similar palettes

More like Urban Concrete Calm

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