Back to palettes

Palette

Urban Industrial Chill

A sleek and cool palette reflecting the metallic and concrete tones of city architecture.

coolminimal5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3E4A50#5B6B73#8A9DA3#C0CDD2#1E282E

Palette guide

How to use Urban Industrial Chill

Overview

The Urban Industrial Chill palette captures the essence of modern cityscapes with its sophisticated blend of cool greys and deep charcoals. Featuring foundational shades like the dark steel of #3E4A50 and the lighter concrete of #5B6B73, this collection evokes a sense of refined minimalism and urban sophistication. Designers can leverage the deep, almost black #1E282E for strong contrasts, while #C0CDD2 offers a crisp, airy balance. This palette is ideal for creating clean, professional, and contemporary interfaces or branding that project stability and a sleek, industrial aesthetic, perfect for tech or architectural projects.

Best used for

  • Modern architectural firm websites
  • Tech startup branding and UI
  • Interior design portfolios and mood boards
  • High-end automotive or product design showcases
  • Urban fashion e-commerce platforms
  • Minimalist app interfaces

Suggested color roles

primary

Use #3E4A50 as the dominant hue for main sections, headers, or large graphical elements to establish a strong, grounded presence.

secondary

Apply #5B6B73 for complementary sections, sub-headers, or interactive elements, providing a subtle contrast to the primary.

accent

Introduce #8A9DA3 sparingly for call-to-action buttons, key data points, or subtle highlights, offering a refreshing, cool touch.

background

Utilize #C0CDD2 for clean, spacious backgrounds, ensuring readability and a bright, expansive feel for content areas.

text

Employ #1E282E for primary body text and important labels, guaranteeing excellent readability against lighter backgrounds like #C0CDD2.

Accessibility notes

  • Ensure sufficient contrast when pairing #1E282E text on #C0CDD2 backgrounds to meet WCAG AA standards for readability.
  • Avoid using #8A9DA3 directly on #C0CDD2 for small text; consider it for larger headings or graphical elements instead.
  • Test color combinations with tools to verify contrast ratios, especially for interactive elements like buttons using #5B6B73 on #3E4A50.
  • Provide clear focus states for interactive elements, ensuring they stand out even for users with color vision deficiencies.

Recommended combinations

Urban Contrast

Ideal for a striking dark mode interface or a sophisticated header, with light text and a subtle cool accent.

#1E282E · #C0CDD2 · #8A9DA3

Sleek Foundation

Excellent for clean, professional website body content or app screens, providing readability with depth.

#C0CDD2 · #3E4A50 · #5B6B73

Industrial Depth

Create a layered, industrial look for data visualizations, dashboards, or structural elements, using varying grey tones.

#3E4A50 · #5B6B73 · #1E282E

CSS variables

:root {
  --urban-industrial-chill-1: #3E4A50;
  --urban-industrial-chill-2: #5B6B73;
  --urban-industrial-chill-3: #8A9DA3;
  --urban-industrial-chill-4: #C0CDD2;
  --urban-industrial-chill-5: #1E282E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-industrial-chill": {
        1: "#3E4A50",
        2: "#5B6B73",
        3: "#8A9DA3",
        4: "#C0CDD2",
        5: "#1E282E",
      }
    }
  }
}

Related searches

industrial grey color schemesurban minimalist palettecool tone website colorssteel concrete hex codesmodern architectural color inspiration

Palette colors

Hex values

Color 1#3E4A50
·
Color 2#5B6B73
·
Color 3#8A9DA3
·
Color 4#C0CDD2
·
Color 5#1E282E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.2:1AA18
5.6:1AA
1.6:1Fail
2
1.7:1Fail
2:1Fail
3.4:1AA18
2.7:1Fail
3
3.2:1AA18
2:1Fail
1.7:1Fail
5.3:1AA
4
5.6:1AA
3.4:1AA18
1.7:1Fail
9.2:1AAA
5
1.6:1Fail
2.7:1Fail
5.3:1AA
9.2:1AAA

Similar palettes

More like Urban Industrial Chill

View all cool
Industrial Chrome Shine
Urban Steel Echo
Arctic Shoreline Chill
Arctic Tundra Light
Cosmic Crater Moon
Cyber Cityscape