Palette

Urban Concrete Jungle

A cool, muted collection reflecting the stark beauty of city architecture mixed with surprising green spaces.

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

#2F4F4F#708090#A9A9A9#D3D3D3#465945

Palette guide

How to use Urban Concrete Jungle

Overview

The Urban Concrete Jungle palette offers a sophisticated, muted collection perfect for designs reflecting modern cityscapes and industrial aesthetics. With foundational grays like the deep #2F4F4F and versatile #708090, it evokes the stark beauty of architectural elements. The lighter #A9A9A9 and soft #D3D3D3 provide essential contrast and breathability. A surprising yet harmonious touch comes from #465945, a dark olive green, representing unexpected urban green spaces or subtle organic elements. This palette is ideal for creating minimalist, elegant, and robust visual identities that convey strength and understated modernity. It's a pragmatic choice for brands seeking a contemporary, grounded feel.

Best used for

Modern architectural firm branding
Sustainable urban development websites
Tech startups with a minimalist aesthetic
Industrial product design interfaces
Contemporary art gallery promotions
Eco-conscious fashion or lifestyle brands

Suggested color roles

primary

#2F4F4F. A strong, grounding dark slate gray, perfect for prominent headings, primary navigation, or solid background sections that demand gravitas and sophistication.

secondary

#708090. This versatile slate gray works well for subheadings, secondary buttons, or large content blocks, offering a slightly softer presence than the primary while maintaining a cool, modern feel.

accent

#465945. The dark olive green provides a subtle organic contrast. Use it sparingly for call-to-action elements, icons, or small graphical details to add a touch of nature or highlight key information.

background

#D3D3D3. A light, airy gray that serves as an excellent neutral canvas. Ideal for main content areas, page backgrounds, or card elements, ensuring readability and a clean aesthetic.

text

#2F4F4F. This deep slate gray offers excellent contrast against lighter backgrounds like #D3D3D3, making it highly readable for body text, ensuring a professional and contemporary appearance. Alternatively, a pure black can be used for maximum contrast.

Accessibility notes

Ensure #2F4F4F text has sufficient contrast against #D3D3D3 backgrounds for WCAG AA compliance.
Avoid using #A9A9A9 (dark gray) for small text on #D3D3D3 (light gray) backgrounds; contrast may be insufficient.
When using #465945 (dark olive green) as an accent, ensure any text overlaid on it (e.g., button text) is white or very light for readability.
Leverage the high contrast between #2F4F4F and #D3D3D3 for primary information and interactive elements to aid visual accessibility.

Recommended combinations

Modern Professional

Ideal for corporate websites or professional portfolios, using the dark gray as a header, mid-gray for content, and light gray for backgrounds.

#2F4F4F · #708090 · #D3D3D3

Subtle Urban Green

Perfect for environmental initiatives with an urban edge, using the green for accents, mid-gray for primary elements, and the darker gray for secondary details.

#708090 · #465945 · #A9A9A9

High Contrast Industrial

Suited for technical documentation or industrial design showcases, employing the darkest gray for strong statements, mid-gray for details, and light gray for clarity.

#2F4F4F · #A9A9A9 · #D3D3D3

CSS variables

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

Tailwind config

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

Hex values

Color 1#2F4F4F

Color 2#708090

Color 3#A9A9A9

Color 4#D3D3D3

Color 5#465945

Accessibility

Contrast checker

2.2:1Fail

3.8:1AA18

6:1AA

1.2:1Fail

2.2:1Fail

1.7:1Fail

2.7:1Fail

1.9:1Fail

3.8:1AA18

1.7:1Fail

1.6:1Fail

3.2:1AA18

6:1AA

2.7:1Fail

1.6:1Fail

5.1:1AA

1.2:1Fail

1.9:1Fail

3.2:1AA18

5.1:1AA

Similar palettes

More like Urban Concrete Jungle

Industrial Urban Grit