Palette

Steel City Twilight

Cool greys and subtle blues evoke the cold, steely glint of a city at twilight.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Steel City Twilight 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 Steel City Twilight.

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

Data visualization

#1f2a36#4a5b6c#7b8c9d#b4c3d4#e0eaf2

Palette guide

How to use Steel City Twilight

Overview

The "Steel City Twilight" palette captures the cool greys and subtle blues of an urban landscape at dusk, evoking the cold, steely glint of buildings under a fading sky. Ranging from the deep #1f2a36 (Dark Blue-Grey) to the luminous #e0eaf2 (Near White Blue-Grey), it offers a sophisticated, atmospheric spectrum. Mid-tones like #4a5b6c (Slate Blue), #7b8c9d (Steel Blue), and #b4c3d4 (Light Blue-Grey) provide depth and versatility. This palette is perfect for designs that aim for a modern, slightly moody, and contemplative aesthetic, ideal for conveying urban sophistication and a sense of calm.

Best used for

Urban landscape photography showcases
Software interfaces and dark mode themes
Conceptual architectural designs
Atmospheric branding for tech companies
Night-time event promotions and posters
Website design for modern art or music

Suggested color roles

primary

Use #1f2a36 as the deepest, most impactful color for solid backgrounds, strong text, or primary branding.

secondary

Apply #4a5b6c for supporting elements, navigation, or darker content blocks.

accent

Introduce #e0eaf2 (Near White Blue-Grey) for subtle highlights, distant lights, or as a crisp, bright accent.

background

A versatile #7b8c9d creates an atmospheric, mid-tone blue-grey backdrop, ideal for evoking a twilight mood.

text

For dark backgrounds, #e0eaf2 provides excellent readability. On lighter elements, #1f2a36 works well for body text.

Accessibility notes

Ensure sufficient contrast between #7b8c9d text and #b4c3d4 backgrounds for critical information.
The darkest #1f2a36 offers excellent contrast for white or #e0eaf2 text.
Avoid pairing #b4c3d4 text on #e0eaf2 as the contrast will be insufficient for readability.
For body text, use high-contrast combinations such as #1f2a36 on #e0eaf2 or #4a5b6c on #b4c3d4.

Recommended combinations

Deep Twilight Sky

Creates a dark, moody foundation, perfect for atmospheric backgrounds and deep elements.

#1F2A36 · #4A5B6C · #7B8C9D

Distant City Lights

Provides subtle light against a darkening sky, ideal for highlights and delicate details.

#E0EAF2 · #B4C3D4 · #7B8C9D

Cool Architectural Forms

Defines modern, cool-toned structures with clear contrast and sophisticated depth.

#4A5B6C · #B4C3D4 · #1F2A36

CSS variables

:root {
  --steel-city-twilight-1: #1f2a36;
  --steel-city-twilight-2: #4a5b6c;
  --steel-city-twilight-3: #7b8c9d;
  --steel-city-twilight-4: #b4c3d4;
  --steel-city-twilight-5: #e0eaf2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steel-city-twilight": {
        1: "#1f2a36",
        2: "#4a5b6c",
        3: "#7b8c9d",
        4: "#b4c3d4",
        5: "#e0eaf2",
      }
    }
  }
}

Hex values

Color 1#1f2a36

Color 2#4a5b6c

Color 3#7b8c9d

Color 4#b4c3d4

Color 5#e0eaf2

Accessibility

Contrast checker

2.1:1Fail

4.2:1AA18

8.1:1AAA

11.9:1AAA

2.1:1Fail

2:1Fail

3.9:1AA18

5.7:1AA

4.2:1AA18

2:1Fail

1.9:1Fail

2.8:1Fail

8.1:1AAA

3.9:1AA18

1.9:1Fail

1.5:1Fail

11.9:1AAA

5.7:1AA

2.8:1Fail

1.5:1Fail

Similar palettes

More like Steel City Twilight

View all neutral

Gritty Urban Canvas

Steel Frame Metropolis