Back to palettes

Palette

City Night Concrete

A stark, muted palette capturing the raw, modern essence of a concrete city at night.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4750#5C6F7C#8C9CA6#BFC8CD#263138

Palette guide

How to use City Night Concrete

Overview

The "City Night Concrete" palette is a stark, muted collection capturing the raw, modern essence of a concrete city at night. Ranging from the deep #263138 and robust #3A4750 to the versatile #5C6F7C, a lighter #8C9CA6, and a soft #BFC8CD, this palette offers a sophisticated, moody aesthetic. Designers can leverage these cool, desaturated tones to create minimalist interfaces, industrial-inspired branding, and digital experiences that evoke urban grit and quiet strength. Developers will find these hex codes excellent for implementing clean UI elements, subtle gradients, and a consistent, professional look across applications, ideal for architectural, tech, or contemporary lifestyle projects.

Best used for

  • Modern architecture firm websites
  • Industrial design portfolios
  • Minimalist app UI themes
  • Urban fashion e-commerce
  • Tech product landing pages
  • Abstract art platforms

Suggested color roles

primary

#3A4750 - A deep, cool grey, excellent for primary content areas, bold headings, or strong brand elements, establishing a solid, modern foundation.

secondary

#5C6F7C - A versatile mid-tone, suitable for subheadings, secondary content blocks, or background sections, providing visual depth.

accent

#8C9CA6 - A lighter, softer grey that can subtly highlight interactive elements, borders, or informational text without overpowering the darker tones.

background

#263138 - The deepest shade, serving as a rich, dark canvas that allows lighter elements to emerge and creates an immersive, moody experience.

text

#BFC8CD - A light, cool grey, optimal for primary body text against #263138 or #3A4750, ensuring excellent readability and a cohesive, understated aesthetic.

Accessibility notes

  • Ensure high contrast for #BFC8CD text on #263138 or #3A4750 backgrounds to meet WCAG AA standards.
  • Avoid using #8C9CA6 for small text on #5C6F7C, as contrast may be insufficient.
  • Provide clear non-color-based indicators for interactive elements, as the subtle palette can sometimes obscure color changes.
  • For critical information, consider using a pure white text against the darkest backgrounds for maximum readability.

Recommended combinations

Deep Concrete

Ideal for creating immersive dark mode interfaces, setting a strong, industrial mood for digital platforms.

#263138 · #3A4750 · #5C6F7C

Urban Texture

Perfect for subtle gradients, background textures, or layered UI elements that evoke a concrete feel.

#5C6F7C · #8C9CA6 · #BFC8CD

Modern Edge

Great for establishing clear visual hierarchy in web applications, guiding users through content with a clean, modern aesthetic.

#3A4750 · #8C9CA6 · #BFC8CD

CSS variables

:root {
  --city-night-concrete-1: #3A4750;
  --city-night-concrete-2: #5C6F7C;
  --city-night-concrete-3: #8C9CA6;
  --city-night-concrete-4: #BFC8CD;
  --city-night-concrete-5: #263138;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-night-concrete": {
        1: "#3A4750",
        2: "#5C6F7C",
        3: "#8C9CA6",
        4: "#BFC8CD",
        5: "#263138",
      }
    }
  }
}

Related searches

dark concrete palettemoody grey urban colorsminimalist industrial schemecity night muted tonesmodern cool grey hex

Palette colors

Hex values

Color 1#3A4750
·
Color 2#5C6F7C
·
Color 3#8C9CA6
·
Color 4#BFC8CD
·
Color 5#263138
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.4:1AA18
5.6:1AA
1.4:1Fail
2
1.8:1Fail
1.8:1Fail
3.1:1AA18
2.5:1Fail
3
3.4:1AA18
1.8:1Fail
1.7:1Fail
4.7:1AA
4
5.6:1AA
3.1:1AA18
1.7:1Fail
7.8:1AAA
5
1.4:1Fail
2.5:1Fail
4.7:1AA
7.8:1AAA

Similar palettes

More like City Night Concrete

View all dark
Acid Rain Gloom
City Rain Puddle
Urban Industrial Grit
Volcanic Ash Glow
Asteroid Belt Shadow
Charcoal Depths