Palette

Steel Skyline Haze

A sleek and modern palette inspired by the cool, imposing lines of a metropolitan skyline.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Steel Skyline Haze 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 Skyline Haze.

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

Data visualization

#34495E#5D7992#8CA2B8#B9CDDE#DDE7EF

Palette guide

How to use Steel Skyline Haze

Overview

The Steel Skyline Haze palette captures the cool, imposing lines of a metropolitan skyline with a sleek and modern range of blue-grays. From the deep, foundational #34495E to the ethereal, hazy #DDE7EF, this collection offers a sophisticated gradient of cool tones. Hex codes like #5D7992 and #8CA2B8 provide excellent versatility for establishing visual hierarchy and depth. Designers can leverage these colors for creating elegant user interfaces, architectural branding, or any project that demands a clean, contemporary aesthetic. Developers will find this palette perfect for building professional web applications, mobile interfaces, or corporate websites that convey stability and forward-thinking design.

Best used for

Corporate and finance websites
Architectural firm branding
Cloud computing interfaces
Modern art gallery displays
UI/UX for professional tools
Urban development projects

Suggested color roles

primary

#34495E - A deep, cool blue-gray, ideal for primary branding elements, headers, or backgrounds that convey stability.

secondary

#5D7992 - A balanced mid-tone blue-gray, suitable for subheadings, borders, or secondary content areas.

accent

#8CA2B8 - A lighter, serene blue-gray that can highlight specific elements, interactive components, or subtle gradients.

background

#DDE7EF - A very light, airy blue-gray, providing a clean and spacious canvas for content.

text

#34495E - Excellent for primary text on light backgrounds, ensuring strong readability and a cohesive look.

Accessibility notes

Ensure text in #34495E on #DDE7EF provides strong contrast and meets WCAG AA standards.
Avoid using #B9CDDE or #8CA2B8 for small text on #DDE7EF as contrast will likely be insufficient.
For interactive elements, ensure clear visual feedback for hover, focus, and active states.
Use a contrast checker tool to verify all text and interactive element color combinations.

Recommended combinations

Skyline Foundation

Provides a robust dark base, a light, airy background, and a balanced mid-tone for key information or dividers.

#34495E · #DDE7EF · #5D7992

Hazy Gradient

Creates a smooth, atmospheric gradient for backgrounds, large graphics, or subtle UI transitions, evoking a distant skyline.

#5D7992 · #8CA2B8 · #B9CDDE

Clean Architecture

Ideal for minimalist layouts, using the lightest shade as background, a lighter mid-tone for cards, and the darkest for impactful text.

#DDE7EF · #B9CDDE · #34495E

CSS variables

:root {
  --steel-skyline-haze-1: #34495E;
  --steel-skyline-haze-2: #5D7992;
  --steel-skyline-haze-3: #8CA2B8;
  --steel-skyline-haze-4: #B9CDDE;
  --steel-skyline-haze-5: #DDE7EF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "steel-skyline-haze": {
        1: "#34495E",
        2: "#5D7992",
        3: "#8CA2B8",
        4: "#B9CDDE",
        5: "#DDE7EF",
      }
    }
  }
}

Hex values

Color 1#34495E

Color 2#5D7992

Color 3#8CA2B8

Color 4#B9CDDE

Color 5#DDE7EF

Accessibility

Contrast checker

2:1Fail

3.5:1AA18

5.7:1AA

7.4:1AAA

2:1Fail

1.7:1Fail

2.8:1Fail

3.6:1AA18

3.5:1AA18

1.7:1Fail

1.6:1Fail

2.1:1Fail

5.7:1AA

2.8:1Fail

1.6:1Fail

1.3:1Fail

7.4:1AAA

3.6:1AA18

2.1:1Fail

1.3:1Fail

Similar palettes

More like Steel Skyline Haze