Palette

Urban Industrial Pulse

Gritty greys and cool blues reflecting the stark, functional aesthetic of city architecture.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F4F4F#808080#B0C4DE#A9A9A9#36454F

Palette guide

How to use Urban Industrial Pulse

Overview

The Urban Industrial Pulse palette captures the raw, functional aesthetic of modern cityscapes, perfect for designs requiring a sophisticated yet robust feel. Dominated by a range of gritty greys like #4F4F4F and #808080, it grounds interfaces with a strong, resilient foundation. The inclusion of #B0C4DE, a light steel blue, introduces a subtle, cool accent reminiscent of architectural glass or sky reflections, while #A9A9A9 offers a softer neutral. A deep charcoal blue, #36454F, provides excellent contrast and depth. This versatile palette is ideal for developers and designers aiming for a sleek, minimalist, or tech-centric identity, providing a mature backdrop for various digital and physical applications.

Best used for

Tech company websites and apps
Architectural portfolios and design firms
Urban planning and real estate branding
Automotive or industrial product showcases
Minimalist UI/UX designs
Modern menswear fashion branding

Suggested color roles

primary

#4F4F4F (Dark Grey). Use this as the foundational color for main sections, large text blocks, or primary UI elements to convey solidity and professionalism.

secondary

#808080 (Medium Grey). Ideal for secondary navigation, subheadings, borders, or backgrounds that need to recede slightly but maintain substance.

accent

#B0C4DE (Light Steel Blue). Deploy this cool blue sparingly for interactive elements, highlights, progress indicators, or iconography to draw attention and add a modern touch.

background

#A9A9A9 (Light Grey). A soft, neutral base for content areas, providing a clean canvas that allows other elements to stand out without feeling stark.

text

#36454F (Charcoal Blue). This deep, almost black-blue offers excellent readability against lighter backgrounds like #A9A9A9, perfect for body text and critical labels.

Accessibility notes

Ensure sufficient contrast when using #808080 text on #A9A9A9 backgrounds; consider a darker text alternative.
The accent color #B0C4DE should primarily be used for non-essential decorative elements or paired with a darker text for readability.
Use #36454F for all critical text against #A9A9A9 or a pure white background to meet WCAG AA standards.
Avoid using #B0C4DE as a primary text color due to its low contrast against most palette neutrals.

Recommended combinations

Concrete & Steel

Effective for hero sections or landing pages where a strong, modern statement is needed, with the blue as a key highlight.

#4F4F4F · #B0C4DE · #A9A9A9

Urban Grid

Perfect for dashboard interfaces, data visualizations, or structured content layouts, offering clear hierarchy and readability.

#36454F · #808080 · #A9A9A9

Industrial Contrast

Use for call-to-action buttons or interactive components where the light blue provides a pop against darker, solid backgrounds.

#B0C4DE · #4F4F4F · #36454F

CSS variables

:root {
  --urban-industrial-pulse-1: #4F4F4F;
  --urban-industrial-pulse-2: #808080;
  --urban-industrial-pulse-3: #B0C4DE;
  --urban-industrial-pulse-4: #A9A9A9;
  --urban-industrial-pulse-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-industrial-pulse": {
        1: "#4F4F4F",
        2: "#808080",
        3: "#B0C4DE",
        4: "#A9A9A9",
        5: "#36454F",
      }
    }
  }
}

Hex values

Color 1#4F4F4F

Color 2#808080

Color 3#B0C4DE

Color 4#A9A9A9

Color 5#36454F

Accessibility

Contrast checker

2.1:1Fail

4.6:1AA

3.5:1AA18

1.2:1Fail

2.1:1Fail

2.2:1Fail

1.7:1Fail

2.5:1Fail

4.6:1AA

2.2:1Fail

1.3:1Fail

5.6:1AA

3.5:1AA18

1.7:1Fail

1.3:1Fail

4.2:1AA18

1.2:1Fail

2.5:1Fail

5.6:1AA

4.2:1AA18

Similar palettes

More like Urban Industrial Pulse

View all neutral

Bare Concrete Stillness

City Concrete Grind

Concrete Canyon Dusk

Graffiti Alley Hue

Industrial Urban Grit

Urban Bloom Concrete