Back to palettes

Palette

Urban Concrete Jungle

A robust, minimalist collection of grays, mirroring the varied textures and formidable structures 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 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

#2F4F4F#696969#708090#A9A9A9#C0C0C0

Palette guide

How to use Urban Concrete Jungle

Overview

The "Urban Concrete Jungle" palette offers a sophisticated collection of grays, perfect for designs requiring a robust, minimalist, or industrial aesthetic. This versatile monochrome set, featuring deep #2F4F4F (Dark Slate Gray), substantial #696969 (Dim Gray), balanced #708090 (Slate Gray), subtle #A9A9A9 (Dark Gray), and luminous #C0C0C0 (Silver), mirrors the varied textures and formidable structures of a modern city. Designers can leverage these tones to evoke a sense of strength, professionalism, and understated elegance. Ideal for creating clean interfaces, architectural visualizations, or branding that speaks to durability and contemporary design, this palette ensures a cohesive and impactful visual experience across various applications. Its inherent neutrality provides a strong foundation for any project.

Best used for

  • Industrial design branding
  • Architectural firm websites
  • Minimalist UI/UX design
  • Luxury tech product interfaces
  • Urban fashion lookbooks
  • Contemporary art gallery presentations

Suggested color roles

primary

Utilize #2F4F4F (Dark Slate Gray) for strong headings, prominent navigation elements, or the main brand color, conveying solidity and professionalism.

secondary

Employ #696969 (Dim Gray) for subheadings, active states, or key informational text. It provides excellent contrast against lighter grays while maintaining depth.

accent

Apply #A9A9A9 (Dark Gray) for subtle highlights, interactive elements like buttons, or to draw attention to secondary calls-to-action without overpowering the design.

background

Use #C0C0C0 (Silver) as a clean, expansive background color, offering a bright yet neutral canvas that allows darker text and UI elements to stand out clearly.

text

For optimal readability on light backgrounds like #C0C0C0, choose #2F4F4F or #696969 for body text. Against darker backgrounds, a light gray like #A9A9A9 ensures legibility.

Accessibility notes

  • Ensure sufficient contrast between text and background, especially for #A9A9A9 on #C0C0C0, which may require careful evaluation for WCAG AA compliance.
  • Use #2F4F4F or #696969 for primary body text against #C0C0C0 to guarantee excellent readability for all users.
  • Reserve lighter grays like #C0C0C0 for disabled states or subtle decorative elements when paired with other light colors, to avoid low contrast issues.
  • Test color combinations with accessibility tools to verify contrast ratios, particularly for interactive elements and critical information display.

Recommended combinations

Urban Base

Ideal for a primary text and background pairing with a strong accent. #2F4F4F for text, #C0C0C0 for background, #696969 for interactive elements.

#2F4F4F · #C0C0C0 · #696969

Subtle Depth

Creates a sophisticated, layered look. #708090 as main content background, #A9A9A9 for secondary information, #2F4F4F for key headings.

#708090 · #A9A9A9 · #2F4F4F

Interface Elements

Excellent for UI components: #C0C0C0 for card backgrounds, #A9A9A9 for borders or dividers, and #696969 for icon fills or subtle shadows.

#C0C0C0 · #A9A9A9 · #696969

CSS variables

:root {
  --urban-concrete-jungle-2-1: #2F4F4F;
  --urban-concrete-jungle-2-2: #696969;
  --urban-concrete-jungle-2-3: #708090;
  --urban-concrete-jungle-2-4: #A9A9A9;
  --urban-concrete-jungle-2-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-concrete-jungle-2": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#708090",
        4: "#A9A9A9",
        5: "#C0C0C0",
      }
    }
  }
}

Related searches

grey color paletteindustrial design colorsminimalist urban palettemodern monochrome schemearchitectural color inspiration

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#696969
·
Color 3#708090
·
Color 4#A9A9A9
·
Color 5#C0C0C0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.2:1Fail
3.8:1AA18
4.9:1AA
2
1.6:1Fail
1.4:1Fail
2.3:1Fail
3:1AA18
3
2.2:1Fail
1.4:1Fail
1.7:1Fail
2.2:1Fail
4
3.8:1AA18
2.3:1Fail
1.7:1Fail
1.3:1Fail
5
4.9:1AA
3:1AA18
2.2:1Fail
1.3:1Fail

Similar palettes

More like Urban Concrete Jungle

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