Back to palettes

Palette

Urban Industrial Sky

Cool, subdued blues and greys capturing the hazy, industrial sky above a bustling city.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3D4A5C#5E6D81#8496AA#AABBD0#D1DFE6

Palette guide

How to use Urban Industrial Sky

Overview

The Urban Industrial Sky palette offers a sophisticated range of cool, subdued blue-greys, evoking the calm yet robust atmosphere of a city skyline. This versatile collection, featuring grounding hues like #3D4A5C, a balanced mid-tone #8496AA, and the airy #D1DFE6, is ideal for designers and developers aiming for a modern, minimalist aesthetic. Its professional yet understated mood makes it perfect for corporate, tech, or architectural designs. Leverage its subtle depth to create interfaces and branding that communicate reliability, innovation, and a contemporary edge, ensuring a cohesive and elegant visual experience.

Best used for

  • Corporate and tech brand identity
  • Architectural and interior design visualizations
  • UI/UX for professional applications and dashboards
  • Modern art gallery or photography websites
  • Minimalist product packaging
  • Editorial design for tech or business publications

Suggested color roles

primary

Use #3D4A5C as a foundational anchor for main headers, primary navigation, and prominent brand elements. Its depth commands attention without being overwhelming.

secondary

#5E6D81 serves as an excellent supporting color for subheadings, secondary buttons, or larger content blocks, providing a seamless transition from the primary hue.

accent

#8496AA offers a subtle, sophisticated accent. Ideal for interactive states, progress indicators, or to gently highlight key information without stark contrast.

background

#D1DFE6 is perfect for clean, expansive backgrounds, card elements, or modals, providing a light and airy canvas that enhances readability.

text

For optimal readability on light backgrounds like #D1DFE6, use #3D4A5C or #5E6D81 for body text. For reverse text on darker backgrounds, #D1DFE6 or #AABBD0 works well.

Accessibility notes

  • Ensure sufficient contrast between text colors like #3D4A5C or #5E6D81 and lighter backgrounds such as #D1DFE6 for WCAG AA compliance.
  • Avoid using #AABBD0 or #D1DFE6 for small text sizes, especially on similarly light backgrounds, as readability will suffer.
  • Always test contrast ratios for interactive elements (buttons, links) to ensure they are discernible for all users.
  • Reserve the darkest tones, like #3D4A5C, for critical information or calls-to-action to maximize visual hierarchy and readability.

Recommended combinations

Solid Foundation

Ideal for establishing a strong brand presence, primary UI elements, and professional dashboards.

#3D4A5C · #5E6D81 · #D1DFE6

Sky Haze

Create light, ethereal interfaces, subtle gradients, or secondary content areas requiring a soft touch.

#8496AA · #AABBD0 · #D1DFE6

Urban Detail

Effective for highlighting key data points, accentuating interactive elements, or providing visual separation in complex layouts.

#3D4A5C · #AABBD0 · #8496AA

CSS variables

:root {
  --urban-industrial-sky-1: #3D4A5C;
  --urban-industrial-sky-2: #5E6D81;
  --urban-industrial-sky-3: #8496AA;
  --urban-industrial-sky-4: #AABBD0;
  --urban-industrial-sky-5: #D1DFE6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-industrial-sky": {
        1: "#3D4A5C",
        2: "#5E6D81",
        3: "#8496AA",
        4: "#AABBD0",
        5: "#D1DFE6",
      }
    }
  }
}

Related searches

modern blue grey paletteminimalist industrial colorscool tone UI designconcrete sky hex codesmuted corporate branding

Palette colors

Hex values

Color 1#3D4A5C
·
Color 2#5E6D81
·
Color 3#8496AA
·
Color 4#AABBD0
·
Color 5#D1DFE6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3:1Fail
4.6:1AA
6.6:1AA
2
1.7:1Fail
1.7:1Fail
2.7:1Fail
3.9:1AA18
3
3:1Fail
1.7:1Fail
1.5:1Fail
2.2:1Fail
4
4.6:1AA
2.7:1Fail
1.5:1Fail
1.4:1Fail
5
6.6:1AA
3.9:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Urban Industrial Sky

View all neutral
Graffiti Alley Hue
Urban Industrial Pulse
Urban Steel Canyon
Architectural Concrete Edge
Bare Concrete Stillness
City Concrete Grind