Back to palettes

Palette

Industrial Urban Grid

The rugged, functional beauty of city infrastructure and metallic textures, strong and stark.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Industrial Urban Grid 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 Industrial Urban Grid.

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

Data visualization

#2F4F4F#708090#B22222#4A4A4A#6A899C

Palette guide

How to use Industrial Urban Grid

Overview

The Industrial Urban Grid palette embodies the rugged, functional beauty of city infrastructure and metallic textures, with a strong, stark character. Featuring a deep teal-gray #2F4F4F, a cool neutral gray #708090, and a striking #B22222 accent, this collection provides designers and developers with a powerful toolset. It's ideal for creating modern, impactful designs that convey strength, resilience, and a touch of urgency. Leverage the cool grays for structure and the bold red for critical calls to action or focal points, ensuring a dynamic and memorable visual experience.

Best used for

  • Urban development and construction branding
  • Gritty game interfaces and environments
  • Industrial product packaging and design
  • Modern art installations and exhibitions
  • Emergency services or safety branding
  • Cybersecurity platform interfaces

Suggested color roles

primary

#2F4F4F serves as a strong, foundational color for headers, large sections, or dark mode backgrounds, providing depth.

secondary

#4A4A4A supports main content blocks, subtle backgrounds, or darker text on lighter elements, adding visual weight.

accent

#B22222 is a critical accent for calls to action, alerts, warnings, or key interactive elements, demanding attention.

background

#708090 offers a muted, cool background for content, or a darker #4A4A4A can be used for more immersive experiences.

text

#4A4A4A is excellent for dark, readable text on lighter backgrounds like #708090, or use white for optimal contrast on #2F4F4F.

Accessibility notes

  • Ensure #B22222 text or elements have sufficient contrast against any background, especially #708090 (WCAG AA).
  • Text in #4A4A4A on #708090 should be verified with a contrast checker for readability.
  • White or near-white text will be necessary for optimal readability on #2F4F4F and #4A4A4A backgrounds.
  • Avoid using #708090 text on #6A899C as the contrast ratio will be too low for accessibility.

Recommended combinations

Urban Structure

Build a core urban structure, with deep and mid-tone grays for layered UI components.

#2F4F4F · #4A4A4A · #708090

Alert Focus

Muted background with a strong red accent for warnings or calls to action, complemented by dark text.

#708090 · #B22222 · #4A4A4A

Industrial Cool

Deep teal-gray with a lighter cool accent and a bold red highlight for dynamic elements.

#2F4F4F · #6A899C · #B22222

CSS variables

:root {
  --industrial-urban-grid-1: #2F4F4F;
  --industrial-urban-grid-2: #708090;
  --industrial-urban-grid-3: #B22222;
  --industrial-urban-grid-4: #4A4A4A;
  --industrial-urban-grid-5: #6A899C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "industrial-urban-grid": {
        1: "#2F4F4F",
        2: "#708090",
        3: "#B22222",
        4: "#4A4A4A",
        5: "#6A899C",
      }
    }
  }
}

Related searches

urban industrial colorsconcrete and red palettemodern stark designcity infrastructure colorsdark grey accent red

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#708090
·
Color 3#B22222
·
Color 4#4A4A4A
·
Color 5#6A899C
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
1.3:1Fail
1:1Fail
2.4:1Fail
2
2.2:1Fail
1.6:1Fail
2.2:1Fail
1.1:1Fail
3
1.3:1Fail
1.6:1Fail
1.3:1Fail
1.8:1Fail
4
1:1Fail
2.2:1Fail
1.3:1Fail
2.4:1Fail
5
2.4:1Fail
1.1:1Fail
1.8:1Fail
2.4:1Fail

Similar palettes

More like Industrial Urban Grid

View all neutral
City Concrete Grind
Concrete Grid Lines
Concrete Loft Living
Industrial Loft Concrete
Industrial Urban Grit
Urban Bloom Concrete