Back to palettes

Palette

Urban Steel Echo

Cool, understated blues and greys capturing the reflective surfaces 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 Steel 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 Steel Echo.

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

Data visualization

#52677C#718BAD#9AAEB5#BFD1DB#3E4B59

Palette guide

How to use Urban Steel Echo

Overview

The Urban Steel Echo palette features cool, understated blues and greys, capturing the reflective surfaces of city architecture with a modern sensibility. This collection moves from the deep #3E4B59 to the balanced #52677C, the harmonious #718BAD, the subtle #9AAEB5, and the airy #BFD1DB. It's an ideal choice for designers and developers aiming for a sophisticated, professional, and minimalist aesthetic. Each hex code contributes to a serene yet strong visual experience, perfect for corporate branding, elegant user interfaces, or editorial content that demands clarity and refined style. This palette conveys reliability, calm, and contemporary elegance.

Best used for

  • Corporate reports and financial services branding
  • Luxury real estate websites and brochures
  • Sophisticated web applications and dashboards
  • Sustainable brands and eco-friendly products
  • Educational content and academic publications
  • Minimalist portfolio websites

Suggested color roles

primary

#3E4B59 - A deep, anchoring steel-blue, excellent for primary branding, robust headers, or foundational UI elements.

secondary

#52677C - A strong mid-tone for subheadings, navigation, or prominent card backgrounds, offering good contrast and visual weight.

accent

#9AAEB5 - Use sparingly for subtle highlights, interactive states, or delicate decorative lines, adding a touch of refined lightness.

background

#BFD1DB - A light, cool backdrop, reminiscent of polished steel, providing a clean and inviting canvas for content.

text

#3E4B59 or a dark charcoal for primary body text on light backgrounds, ensuring optimal readability. For dark backgrounds, #BFD1DB or white offers clear contrast.

Accessibility notes

  • Ensure sufficient contrast between #3E4B59 text and #BFD1DB background for WCAG AA compliance.
  • Avoid using #9AAEB5 or #718BAD for small text on #BFD1DB backgrounds due to potential low contrast.
  • Clearly define focus and hover states for interactive elements using a distinct border or subtle shade adjustment.
  • Always use a contrast checker to validate combinations, especially for critical information and interactive components.

Recommended combinations

Reflective Contrast

High-contrast pairing for main text, clean backgrounds, and a supportive mid-tone for secondary content or UI.

#3E4B59 · #BFD1DB · #52677C

Blue-Grey Harmony

Creates a harmonious, layered blue-grey effect, ideal for subtle gradients, cards, or visual depth in UI.

#52677C · #718BAD · #9AAEB5

Subtle Depth

Strong base with a bright canvas and a soft, cool accent for interactive elements or delicate dividers.

#3E4B59 · #BFD1DB · #9AAEB5

CSS variables

:root {
  --urban-steel-echo-1: #52677C;
  --urban-steel-echo-2: #718BAD;
  --urban-steel-echo-3: #9AAEB5;
  --urban-steel-echo-4: #BFD1DB;
  --urban-steel-echo-5: #3E4B59;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-steel-echo": {
        1: "#52677C",
        2: "#718BAD",
        3: "#9AAEB5",
        4: "#BFD1DB",
        5: "#3E4B59",
      }
    }
  }
}

Related searches

cool blue grey palettearchitectural design colorsreflective urban schemesophisticated UI greyserene corporate palette

Palette colors

Hex values

Color 1#52677C
·
Color 2#718BAD
·
Color 3#9AAEB5
·
Color 4#BFD1DB
·
Color 5#3E4B59
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.5:1Fail
3.7:1AA18
1.5:1Fail
2
1.7:1Fail
1.5:1Fail
2.2:1Fail
2.5:1Fail
3
2.5:1Fail
1.5:1Fail
1.5:1Fail
3.9:1AA18
4
3.7:1AA18
2.2:1Fail
1.5:1Fail
5.7:1AA
5
1.5:1Fail
2.5:1Fail
3.9:1AA18
5.7:1AA

Similar palettes

More like Urban Steel Echo

View all cool
Urban Grid Dawn
Urban Industrial Chill
Urban Puddle Reflection
Urban Rain Slicker
Urban Rain Slicker
Urban Teal Grunge