Palette

Urban Industrial Echo

A stark, muted palette of cool grays, echoing the raw, minimalist aesthetics of modern industrial architecture.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3D444C#616E7B#8696A6#ABBFCD#CEDEE3

Palette guide

How to use Urban Industrial Echo

Overview

The "Urban Industrial Echo" palette offers a sophisticated range of cool grays, perfect for designs requiring a modern, minimalist aesthetic. This monochrome collection, ranging from the deep, grounding #3D444C to the airy, almost white #CEDEE3, evokes the raw, architectural beauty of industrial spaces and sleek urban environments. Designers can leverage shades like the versatile #616E7B for primary content and the soft #ABBFCD for backgrounds, creating a clean, professional, and timeless look. This palette is ideal for projects where clarity, structure, and understated elegance are paramount, providing a robust foundation without overwhelming the user. Its inherent neutrality ensures focus remains on content and form.

Best used for

Modern architectural portfolios and design studios
Tech company interfaces and corporate websites
Minimalist branding and product packaging
High-end industrial product showcases
Clean UI/UX designs for apps and dashboards
Editorial layouts requiring a sophisticated, neutral backdrop

Suggested color roles

primary

#3D444C. Use this deep charcoal for strong headings, primary call-to-action buttons, or robust navigation elements to establish a solid visual anchor.

secondary

#616E7B. Ideal for subheadings, active states, or supporting information. It provides a softer contrast against the primary without losing definition.

accent

#8696A6. A subtle accent for borders, dividers, or hover states. Its slightly lighter tone adds depth without introducing a jarring contrast in this monochrome palette.

background

#CEDEE3. An excellent choice for main content areas or entire page backgrounds, offering a clean, bright, and expansive feel.

text

#3D444C. For primary body text, ensuring maximum readability against lighter backgrounds like #CEDEE3 or #ABBFCD. A pure black or charcoal (#000000 or #222222) could also be used for ultimate clarity.

Accessibility notes

Ensure sufficient contrast between #3D444C text and #CEDEE3 backgrounds for WCAG AA compliance.
Avoid using #8696A6 or #ABBFCD for small text on #CEDEE3 backgrounds, as contrast may be insufficient.
Use distinct shades like #3D444C for interactive elements against #616E7B backgrounds to ensure clear visibility.
For critical information, consider pairing the darkest shade, #3D444C, with the lightest, #CEDEE3, for maximum legibility.

Recommended combinations

High Contrast Text

Perfect for primary text (#3D444C) on a clean background (#CEDEE3), with #ABBFCD for subtle containers or secondary elements.

#3D444C · #CEDEE3 · #ABBFCD

Subtle UI Elements

Ideal for creating layered interfaces where #ABBFCD is the base, #8696A6 for panels, and #616E7B for borders or icons.

#616E7B · #8696A6 · #ABBFCD

Deep Sectioning

Use #3D444C for a bold header section, #616E7B for content blocks within, and #CEDEE3 as the overall page background.

#3D444C · #616E7B · #CEDEE3

CSS variables

:root {
  --urban-industrial-echo-1: #3D444C;
  --urban-industrial-echo-2: #616E7B;
  --urban-industrial-echo-3: #8696A6;
  --urban-industrial-echo-4: #ABBFCD;
  --urban-industrial-echo-5: #CEDEE3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-industrial-echo": {
        1: "#3D444C",
        2: "#616E7B",
        3: "#8696A6",
        4: "#ABBFCD",
        5: "#CEDEE3",
      }
    }
  }
}

Hex values

Color 1#3D444C

Color 2#616E7B

Color 3#8696A6

Color 4#ABBFCD

Color 5#CEDEE3

Accessibility

Contrast checker

1.9:1Fail

3.3:1AA18

5.2:1AA

7.1:1AAA

1.9:1Fail

1.7:1Fail

2.7:1Fail

3.8:1AA18

3.3:1AA18

1.7:1Fail

1.6:1Fail

2.2:1Fail

5.2:1AA

2.7:1Fail

1.6:1Fail

1.4:1Fail

7.1:1AAA

3.8:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Urban Industrial Echo