Palette

Urban Steel Gradient

A sleek, modern gradient reflecting the cold, refined strength and textures of urban steel structures.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Steel Gradient 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 Gradient.

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

Data visualization

#2c3e50#34495e#7f8c8d#95a5a6#ecf0f1

Palette guide

How to use Urban Steel Gradient

Overview

The Urban Steel Gradient palette offers a sleek, modern progression reflecting the cold, refined strength and textures of urban steel structures. This collection moves from the deep, anchoring #2c3e50, through the robust #34495e, the balanced #7f8c8d, the subtle #95a5a6, to the airy #ecf0f1. It's an exceptional choice for designers and developers aiming for a sophisticated, professional, and minimalist aesthetic. Each hex code contributes to a harmonious and contemporary visual experience, perfect for applications, branding, or digital content that requires a clean, strong, and timeless feel. This palette conveys reliability, innovation, and modern elegance.

Best used for

Tech company websites and branding
Data visualization and analytics dashboards
Fintech applications and platforms
Modern architecture presentations
Professional services and consultancy firms
Web application UI designs

Suggested color roles

primary

#2c3e50 - A deep, commanding steel-blue, ideal for primary branding, robust headers, or foundational UI elements.

secondary

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

accent

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

background

#ecf0f1 - A very light, crisp backdrop, reminiscent of brushed steel, providing a clean and inviting canvas for content.

text

#2c3e50 or a dark charcoal for primary body text on light backgrounds, ensuring optimal readability. For dark backgrounds, #ecf0f1 or white offers clear contrast.

Accessibility notes

Ensure sufficient contrast between #2c3e50 text and #ecf0f1 background for WCAG AA compliance.
Avoid using #95a5a6 or #7f8c8d for small text on #ecf0f1 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

Deep Steel Base

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

#2C3E50 · #ECF0F1 · #34495E

Gradient Layers

Creates a harmonious, layered gradient effect, ideal for subtle backgrounds, cards, or visual depth in UI.

#34495E · #7F8C8D · #95A5A6

Light Touch

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

#2C3E50 · #ECF0F1 · #7F8C8D

CSS variables

:root {
  --urban-steel-gradient-1: #2c3e50;
  --urban-steel-gradient-2: #34495e;
  --urban-steel-gradient-3: #7f8c8d;
  --urban-steel-gradient-4: #95a5a6;
  --urban-steel-gradient-5: #ecf0f1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-steel-gradient": {
        1: "#2c3e50",
        2: "#34495e",
        3: "#7f8c8d",
        4: "#95a5a6",
        5: "#ecf0f1",
      }
    }
  }
}

Hex values

Color 1#2c3e50

Color 2#34495e

Color 3#7f8c8d

Color 4#95a5a6

Color 5#ecf0f1

Accessibility

Contrast checker

1.2:1Fail

3.2:1AA18

4.3:1AA18

9.6:1AAA

1.2:1Fail

2.7:1Fail

3.6:1AA18

8.1:1AAA

3.2:1AA18

2.7:1Fail

1.4:1Fail

3:1AA18

4.3:1AA18

3.6:1AA18

1.4:1Fail

2.2:1Fail

9.6:1AAA

8.1:1AAA

3:1AA18

2.2:1Fail

Similar palettes

More like Urban Steel Gradient