Back to palettes

Palette

Concrete Urbanity

Stark greys and muted blues embody the cool, unyielding aesthetic of modern concrete structures in an urban setting.

Neutralminimal5 colors
More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#36454F#5A5A5A#778899#B0C4DE#DCDCDC

Palette guide

How to use Concrete Urbanity

Overview

The "Concrete Urbanity" palette features stark grays and muted blues, embodying the cool, unyielding aesthetic of modern concrete structures in an urban setting. Ranging from a deep #36454F to a very light #DCDCDC, with versatile mid-tones like #5A5A5A, #778899, and #B0C4DE, this collection is perfect for designers seeking a minimalist, cool, and industrial-modern aesthetic. It excels in creating designs that convey strength, sophistication, and a clean, uncluttered visual identity, making it ideal for high-tech, architectural, or urban-themed projects where clarity and understated elegance are paramount.

Best used for

  • Modern architectural firm websites
  • Urban planning visualizations
  • Tech company branding with a sophisticated feel
  • Corporate consulting services
  • High-end product packaging
  • Industrial design portfolios

Suggested color roles

primary

#5A5A5A - A strong, dark grey that provides a robust foundation for primary content and branding elements, conveying urban strength.

secondary

#778899 - A versatile cool grey, excellent for supporting information, subtle backgrounds, or secondary UI elements, offering a clean look.

accent

#36454F - A very deep, almost black, blue-charcoal that provides a powerful, grounding accent for calls to action, important headings, or bold graphic elements.

background

#DCDCDC - The lightest shade, offering a crisp, expansive, and highly readable background for all content.

text

#36454F - This deepest blue-charcoal ensures excellent contrast for all body text against lighter backgrounds like #DCDCDC or #B0C4DE, promoting optimal readability.

Accessibility notes

  • Ensure #36454F text on #DCDCDC or #B0C4DE backgrounds meets WCAG AA contrast standards.
  • Avoid using #DCDCDC for small text on #B0C4DE as contrast will be insufficient.
  • Lighter grays like #B0C4DE should be used carefully for text on mid-tones like #778899 to maintain readability.
  • Always check contrast ratios for interactive elements, especially if using a lighter grey for a button on a similar background.

Recommended combinations

Urban Foundation

Creates a strong, high-contrast visual hierarchy, ideal for headers, footers, or impactful sections.

#36454F · #5A5A5A · #DCDCDC

Cool Structure

Provides a harmonious, cool feel for content blocks, navigation, or subtle background variations.

#778899 · #B0C4DE · #5A5A5A

Minimal Clarity

Emphasizes a clean, airy aesthetic with dark text, suitable for body content and minimalist layouts.

#DCDCDC · #B0C4DE · #36454F

CSS variables

:root {
  --concrete-urbanity-1: #36454F;
  --concrete-urbanity-2: #5A5A5A;
  --concrete-urbanity-3: #778899;
  --concrete-urbanity-4: #B0C4DE;
  --concrete-urbanity-5: #DCDCDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "concrete-urbanity": {
        1: "#36454F",
        2: "#5A5A5A",
        3: "#778899",
        4: "#B0C4DE",
        5: "#DCDCDC",
      }
    }
  }
}

Related searches

concrete blue grey palettemodern industrial colorsminimalist urban designcool concrete schemesleek architectural branding

Palette colors

Hex values

Color 1#36454F
·
Color 2#5A5A5A
·
Color 3#778899
·
Color 4#B0C4DE
·
Color 5#DCDCDC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.7:1Fail
5.6:1AA
7.2:1AAA
2
1.4:1Fail
1.9:1Fail
3.9:1AA18
5:1AA
3
2.7:1Fail
1.9:1Fail
2:1Fail
2.7:1Fail
4
5.6:1AA
3.9:1AA18
2:1Fail
1.3:1Fail
5
7.2:1AAA
5:1AA
2.7:1Fail
1.3:1Fail

Similar palettes

More like Concrete Urbanity

View all Neutral
Cityscape Blueprint
Urban Zen Stone
Calm Pebble Path
Modern Loft
Urban Loft Minimal
Bare Concrete Stillness