Palette

Urban Concrete Jungle

A clean, minimal palette of various gray tones, reflecting the raw, robust essence of city architecture.

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

#4A4A4A#757575#A0A0A0#CACACA#EFEFEF

Palette guide

How to use Urban Concrete Jungle

Overview

The Urban Concrete Jungle palette offers a sophisticated range of neutral grays, perfect for designs requiring a modern, minimalist, or industrial aesthetic. This versatile collection, featuring shades like the deep #4A4A4A, mid-tone #757575, and light #CACACA, evokes the raw, robust essence of city architecture and urban landscapes. Designers and developers can leverage this palette to create clean, professional interfaces, architectural visualizations, or branding that conveys strength and understated elegance. Its inherent neutrality provides a solid foundation, allowing other elements to stand out, or it can be used cohesively for a monochromatic, refined look. The near-white #EFEFEF offers a bright contrast, while #A0A0A0 serves as a balanced intermediary.

Best used for

Modern architectural portfolios and websites
Industrial product design and branding
Minimalist UI/UX for tech applications
Corporate branding and professional presentations
Urban photography and art exhibits
High-end fashion and lifestyle blogs

Suggested color roles

primary

This deep charcoal gray (#4A4A4A) serves as a robust primary color, ideal for main headings, prominent UI elements, or as a dominant background to convey strength and sophistication.

secondary

A versatile mid-tone gray (#757575) perfect for secondary headings, large text blocks, or dividing lines, offering excellent readability and a harmonious contrast with the primary.

accent

Use this balanced gray (#A0A0A0) for subtle accents, hover states, or inactive UI elements. It provides a soft visual break without introducing strong color, maintaining the palette's minimalist integrity.

background

The near-white #EFEFEF creates a clean, expansive background, providing excellent contrast for darker text and UI elements, ensuring readability and a fresh, open feel.

text

For most body text, #4A4A4A offers optimal readability against lighter backgrounds like #EFEFEF. For slightly softer text on a white or light background, #757575 is a great alternative.

Accessibility notes

Ensure sufficient contrast between #4A4A4A text and #EFEFEF backgrounds for WCAG AA compliance.
Avoid using #A0A0A0 for small text on #CACACA or #EFEFEF backgrounds due to insufficient contrast.
Utilize #757575 for larger body text on light backgrounds for better readability than lighter grays.
Always test color combinations with accessibility tools, especially for interactive elements and form fields.

Recommended combinations

High Contrast Base

Excellent for main content areas, with dark text on a light background, supported by a mid-tone for secondary info.

#4A4A4A · #EFEFEF · #757575

Subtle Depth

Creates a sophisticated, layered look for UI elements, cards, or subtle graphic design, using mid-range grays.

#757575 · #A0A0A0 · #CACACA

Urban Edges

Ideal for sharp, modern designs where the darkest shade grounds the composition, with lighter shades for clean breaks and highlights.

#4A4A4A · #CACACA · #EFEFEF

CSS variables

:root {
  --urban-concrete-jungle-4-1: #4A4A4A;
  --urban-concrete-jungle-4-2: #757575;
  --urban-concrete-jungle-4-3: #A0A0A0;
  --urban-concrete-jungle-4-4: #CACACA;
  --urban-concrete-jungle-4-5: #EFEFEF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-jungle-4": {
        1: "#4A4A4A",
        2: "#757575",
        3: "#A0A0A0",
        4: "#CACACA",
        5: "#EFEFEF",
      }
    }
  }
}

Hex values

Color 1#4A4A4A

Color 2#757575

Color 3#A0A0A0

Color 4#CACACA

Color 5#EFEFEF

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

5.4:1AA

7.7:1AAA

1.9:1Fail

1.8:1Fail

2.8:1Fail

4:1AA18

3.4:1AA18

1.8:1Fail

1.6:1Fail

2.3:1Fail

5.4:1AA

2.8:1Fail

1.6:1Fail

1.4:1Fail

7.7:1AAA

4:1AA18

2.3:1Fail

1.4:1Fail

Similar palettes

More like Urban Concrete Jungle

View all Neutral

Urban Canvas

Cityscape Window Glint