Back to palettes

Palette

Urban Concrete Flow

Cool, crisp shades of concrete and steel, defining the clean lines and textures of a modern city.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8A8F95#AEB4B9#D2D8DD#656C73#4B5258

Palette guide

How to use Urban Concrete Flow

Overview

The Urban Concrete Flow palette features cool, crisp shades of concrete and steel, defining the clean lines and textures of a modern city. With slightly blue-tinted grays, this palette offers a sophisticated and fluid aesthetic, perfect for designs that prioritize clarity, structure, and a contemporary feel. It moves from a dark cool gray `#4B5258` to a very light cool gray `#D2D8DD`. Other key colors include a balanced medium dark cool gray `#656C73`, a versatile medium cool gray `#8A8F95`, and a gentle medium light cool gray `#AEB4B9`. This collection is ideal for creating a refined, cohesive, and modern visual experience across various applications.

Best used for

  • Modern architecture portfolios
  • Tech product interfaces and dashboards
  • Minimalist fashion branding
  • Urban photography websites
  • Clean data visualization tools
  • Contemporary art catalogs

Suggested color roles

primary

Use `#4B5258` as a dominant, grounding color for headlines, primary navigation, or strong graphic elements, providing a deep, cool anchor.

secondary

Apply `#656C73` for body text, subheadings, or larger content blocks, offering robust support with a cool undertone.

accent

Introduce `#AEB4B9` for subtle highlights, interactive elements, or to provide a gentle visual break, adding a touch of lightness.

background

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

text

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

Accessibility notes

  • Ensure `#4B5258` text on `#D2D8DD` background meets WCAG contrast standards for body text.
  • Verify that `#656C73` text on `#D2D8DD` also maintains sufficient contrast for readability.
  • Avoid using `#AEB4B9` or `#8A8F95` for small text elements against very light backgrounds due to potential low contrast.
  • When using multiple light grays, ensure enough visual distinction between them for users with low vision.

Recommended combinations

Modern UI Flow

Ideal for clean web interfaces, providing clear hierarchy with strong dark elements on a light, crisp background.

#4B5258 · #656C73 · #D2D8DD

Steel Layers

Excellent for backgrounds, overlays, or graphic elements that require a smooth, subtle gradient effect, evoking modern architectural surfaces.

#D2D8DD · #AEB4B9 · #8A8F95

Crisp Contrast

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

#4B5258 · #AEB4B9 · #656C73

CSS variables

:root {
  --urban-concrete-flow-1: #8A8F95;
  --urban-concrete-flow-2: #AEB4B9;
  --urban-concrete-flow-3: #D2D8DD;
  --urban-concrete-flow-4: #656C73;
  --urban-concrete-flow-5: #4B5258;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-flow": {
        1: "#8A8F95",
        2: "#AEB4B9",
        3: "#D2D8DD",
        4: "#656C73",
        5: "#4B5258",
      }
    }
  }
}

Related searches

crisp grey paletteconcrete steel colorsmodern city flowblue grey minimalisturban tech design

Palette colors

Hex values

Color 1#8A8F95
·
Color 2#AEB4B9
·
Color 3#D2D8DD
·
Color 4#656C73
·
Color 5#4B5258
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.3:1Fail
1.6:1Fail
2.4:1Fail
2
1.6:1Fail
1.5:1Fail
2.5:1Fail
3.8:1AA18
3
2.3:1Fail
1.5:1Fail
3.7:1AA18
5.5:1AA
4
1.6:1Fail
2.5:1Fail
3.7:1AA18
1.5:1Fail
5
2.4:1Fail
3.8:1AA18
5.5:1AA
1.5:1Fail

Similar palettes

More like Urban Concrete Flow

View all monochrome
Urban Grid Echo
City Steel Gleam
Concrete Jungle Bloom
Grayscale Urban Loft
Industrial Chic Echo
Industrial Cityscape Grey