Back to palettes

Palette

Urban Concrete Jungle

A cool, muted set reflecting the varied textures and shades of a bustling concrete cityscape.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#525C5C#6B7B7B#8B9A9A#AAB8B8#D1DFDF

Palette guide

How to use Urban Concrete Jungle

Overview

The Urban Concrete Jungle palette offers a sophisticated, cool-toned neutral foundation perfect for projects seeking a minimalist or industrial aesthetic. Inspired by bustling cityscapes, this versatile collection ranges from the deep, grounding grey of #525C5C to the light, airy #D1DFDF, with intermediate shades like #8B9A9A providing smooth transitions. Designers will find these hues excellent for creating clean, professional interfaces, architectural visualizations, or branding that conveys strength and modernity. Developers can leverage this palette for robust UI frameworks, ensuring consistency and visual calm. Its inherent versatility allows for subtle depth without overwhelming the user, making it a go-to for contemporary digital and physical designs.

Best used for

  • Architectural firm branding and websites
  • Modern tech product interfaces (UI/UX)
  • Urban photography portfolio designs
  • Industrial design product showcases
  • Minimalist interior design mood boards
  • Professional corporate reports and presentations

Suggested color roles

primary

#525C5C (Deepest shade for strong headers, primary buttons, or dominant background elements where a grounded, serious tone is desired.)

secondary

#6B7B7B (A solid supporting grey, ideal for secondary navigation, subheadings, or dividing lines, providing good contrast without being stark.)

accent

#AAB8B8 (A lighter, subtle accent for hover states, active menu items, or small informational icons, offering a gentle visual cue.)

background

#D1DFDF (The lightest hue, perfect for clean, expansive backgrounds that provide a sense of space and allow other elements to stand out.)

text

#525C5C (Excellent for primary body text on light backgrounds like #D1DFDF to ensure strong readability, or consider a near-black for maximum contrast.)

Accessibility notes

  • Ensure sufficient contrast when using lighter palette colors like #AAB8B8 for text against #D1DFDF backgrounds; aim for WCAG AA or AAA.
  • Darker text, such as #525C5C, provides excellent readability against the lightest background, #D1DFDF, for body copy.
  • Avoid placing similar mid-tone greys, like #6B7B7B and #8B9A9A, directly adjacent for critical information to prevent visual ambiguity.
  • For interactive elements, use distinct color changes on hover/focus (e.g., from #8B9A9A to #AAB8B8) to clearly indicate state without relying solely on subtle shade shifts.

Recommended combinations

Monochromatic Depth

Ideal for creating strong visual hierarchies in dashboards or data visualizations where depth and seriousness are key.

#525C5C · #6B7B7B · #8B9A9A

Light & Airy Contrast

Perfect for clean websites, minimalist portfolios, or mobile apps that require clear readability and a modern, spacious feel.

#D1DFDF · #AAB8B8 · #525C5C

Subtle Transitions

Excellent for background gradients, subtle hover effects, or creating a smooth visual flow across different UI sections.

#8B9A9A · #AAB8B8 · #D1DFDF

CSS variables

:root {
  --urban-concrete-jungle-1: #525C5C;
  --urban-concrete-jungle-2: #6B7B7B;
  --urban-concrete-jungle-3: #8B9A9A;
  --urban-concrete-jungle-4: #AAB8B8;
  --urban-concrete-jungle-5: #D1DFDF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-jungle": {
        1: "#525C5C",
        2: "#6B7B7B",
        3: "#8B9A9A",
        4: "#AAB8B8",
        5: "#D1DFDF",
      }
    }
  }
}

Related searches

cool grey color schemeindustrial color paletteminimalist ui colorsurban aesthetic designneutral website palette

Palette colors

Hex values

Color 1#525C5C
·
Color 2#6B7B7B
·
Color 3#8B9A9A
·
Color 4#AAB8B8
·
Color 5#D1DFDF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
3.4:1AA18
5:1AA
2
1.6:1Fail
1.5:1Fail
2.2:1Fail
3.2:1AA18
3
2.4:1Fail
1.5:1Fail
1.4:1Fail
2.1:1Fail
4
3.4:1AA18
2.2:1Fail
1.4:1Fail
1.5:1Fail
5
5:1AA
3.2:1AA18
2.1:1Fail
1.5:1Fail

Similar palettes

More like Urban Concrete Jungle

View all neutral
Gritty Urban Canvas
Skylight Grey Haze
Urban Alley Canvas
Urban Canyon Depth
Urban Concrete Jungle
Urban Haze