Back to palettes

Palette

Concrete Jungle Grit

Reflects the raw, unrefined textures and tones of an urban environment, stark yet compelling.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2D2D2D#5A5A5A#8D8D8D#B0B0B0#36454F

Palette guide

How to use Concrete Jungle Grit

Overview

The "Concrete Jungle Grit" palette reflects the raw, unrefined textures and tones of an urban environment, stark yet compelling. It ranges from a very deep charcoal #2D2D2D to a lighter #B0B0B0, with versatile mid-tones like #5A5A5A and #8D8D8D, and a unique dark blue-grey #36454F. This collection is perfect for designers seeking a robust, industrial, and authentically urban aesthetic. It excels in creating designs that convey strength, edginess, and a raw, honest visual identity, making it ideal for high-tech, architectural, or urban-themed projects where grit and substance are paramount.

Best used for

  • Urban streetwear brands
  • Industrial photography portfolios
  • Dark mode UI/UX designs
  • Tech startup branding with an edgy feel
  • Modern architectural visualizations
  • Heavy machinery or construction websites

Suggested color roles

primary

#5A5A5A - A strong, dark grey that provides a robust foundation for primary content and branding elements, conveying urban strength.

secondary

#8D8D8D - A versatile medium grey, excellent for supporting information, subtle backgrounds, or secondary UI elements, offering a softer presence.

accent

#2D2D2D - A very deep, almost black, charcoal that provides a powerful, grounding accent for calls to action, important headings, or bold graphic elements.

background

#B0B0B0 - The lightest shade, offering a clean, expansive, and highly readable background for content, contrasting well with darker tones.

text

#36454F - This deep blue-grey ensures excellent contrast for all body text against lighter backgrounds like #B0B0B0 or #8D8D8D, promoting optimal readability with a subtle cool hint.

Accessibility notes

  • Ensure #36454F text on #B0B0B0 or #8D8D8D backgrounds meets WCAG AA contrast standards.
  • Avoid using #B0B0B0 for small text on #8D8D8D as contrast will be insufficient.
  • Lighter grays like #8D8D8D should be used carefully for text on mid-tones like #5A5A5A to maintain readability.
  • Always check contrast ratios for interactive elements, especially if using a lighter grey for a button on a similar background.

Recommended combinations

Grounded Grit

Creates a strong, high-contrast visual hierarchy, ideal for headers, footers, or impactful sections.

#2D2D2D · #5A5A5A · #B0B0B0

Urban Flow

Provides a harmonious, soft feel for content blocks, navigation, or subtle background variations, maintaining readability.

#8D8D8D · #B0B0B0 · #5A5A5A

Deep Contrast

Emphasizes a clean aesthetic with dark text, suitable for body content and minimalist layouts with a subtle cool tone.

#36454F · #B0B0B0 · #5A5A5A

CSS variables

:root {
  --concrete-jungle-grit-1: #2D2D2D;
  --concrete-jungle-grit-2: #5A5A5A;
  --concrete-jungle-grit-3: #8D8D8D;
  --concrete-jungle-grit-4: #B0B0B0;
  --concrete-jungle-grit-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "concrete-jungle-grit": {
        1: "#2D2D2D",
        2: "#5A5A5A",
        3: "#8D8D8D",
        4: "#B0B0B0",
        5: "#36454F",
      }
    }
  }
}

Related searches

dark urban grey paletteindustrial monochrome colorsraw concrete designedgy grey schemedark minimalist branding

Palette colors

Hex values

Color 1#2D2D2D
·
Color 2#5A5A5A
·
Color 3#8D8D8D
·
Color 4#B0B0B0
·
Color 5#36454F
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
4.1:1AA18
6.4:1AA
1.4:1Fail
2
2:1Fail
2.1:1Fail
3.2:1AA18
1.4:1Fail
3
4.1:1AA18
2.1:1Fail
1.5:1Fail
3:1Fail
4
6.4:1AA
3.2:1AA18
1.5:1Fail
4.6:1AA
5
1.4:1Fail
1.4:1Fail
3:1Fail
4.6:1AA

Similar palettes

More like Concrete Jungle Grit

View all neutral
Bare Concrete Stillness
City Concrete Grind
Concrete Canyon Dusk
Concrete Grid Lines
Concrete Loft Living
Industrial Loft Concrete