Palette

Urban Slate Morning

Sleek and understated, like concrete facades catching the soft, diffused light of an early urban morning.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Slate Morning 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 Slate Morning.

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

Data visualization

#36454F#708090#A9A9A9#C0C0C0#D3D3D3

Palette guide

How to use Urban Slate Morning

Overview

The Urban Slate Morning palette evokes the subdued elegance of a city waking up, featuring a sophisticated range of cool greys. This monochrome collection offers a versatile foundation for designs requiring a modern, minimalist aesthetic. From the deep, anchoring tone of #36454F to the soft, diffused lightness of #D3D3D3, and the balanced mid-tones like #708090, #A9A9A9, and #C0C0C0, each shade contributes to a harmonious, understated visual experience. Developers will appreciate its consistency for UI elements, while designers can leverage its timeless appeal for branding, web applications, or editorial layouts seeking a clean, professional finish. It provides a sense of calm and sophistication, perfect for conveying reliability and contemporary style.

Best used for

Corporate branding and identity
Modern web application interfaces
Editorial design for luxury or tech publications
Architectural visualization and renders
Minimalist product packaging
High-end fashion e-commerce sites

Suggested color roles

primary

#36454F - Ideal for dominant branding elements, large headers, or hero sections where a strong, sophisticated anchor is needed.

secondary

#708090 - Excellent for subheadings, navigation menus, or prominent card backgrounds, offering a softer yet substantial contrast to the primary.

accent

#A9A9A9 - Use sparingly for subtle highlights, interactive states, or decorative lines to add a touch of understated visual interest without overpowering.

background

#D3D3D3 - A light, airy choice for main content areas, providing a clean canvas that allows darker elements to stand out crisply.

text

#36454F or a deep charcoal for body text on lighter backgrounds, ensuring readability. For dark backgrounds, use #D3D3D3 or white for optimal contrast.

Accessibility notes

Ensure sufficient contrast between #36454F text and #D3D3D3 background for WCAG AA compliance.
Avoid using #A9A9A9 or #C0C0C0 for small text on #D3D3D3 backgrounds due to potential low contrast.
For interactive elements, provide clear focus states using a distinct border or slight shade change.
Always test color combinations with a contrast checker, especially for critical UI components like buttons and links.

Recommended combinations

Deep Contrast

High-contrast pairing for headlines, body text, and background, with a mid-tone for secondary elements.

#36454F · #D3D3D3 · #708090

Subtle Layers

Creates a gentle, layered effect suitable for UI components, cards, or subtle gradients.

#708090 · #A9A9A9 · #C0C0C0

Anchor & Highlight

Strong base with a bright canvas and a soft accent for interactive elements or subtle dividers.

#36454F · #D3D3D3 · #A9A9A9

CSS variables

:root {
  --urban-slate-morning-1: #36454F;
  --urban-slate-morning-2: #708090;
  --urban-slate-morning-3: #A9A9A9;
  --urban-slate-morning-4: #C0C0C0;
  --urban-slate-morning-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-slate-morning": {
        1: "#36454F",
        2: "#708090",
        3: "#A9A9A9",
        4: "#C0C0C0",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#708090

Color 3#A9A9A9

Color 4#C0C0C0

Color 5#D3D3D3

Accessibility

Contrast checker

2.4:1Fail

4.2:1AA18

5.4:1AA

6.6:1AA

2.4:1Fail

1.7:1Fail

2.2:1Fail

2.7:1Fail

4.2:1AA18

1.7:1Fail

1.3:1Fail

1.6:1Fail

5.4:1AA

2.2:1Fail

1.3:1Fail

1.2:1Fail

6.6:1AA

2.7:1Fail

1.6:1Fail

1.2:1Fail

Similar palettes

More like Urban Slate Morning

View all monochrome

Urban Mist Echo

Concrete Jungle Bloom

Monochrome City Grid

Monochrome Cityscape

Monochrome Granite Edge

Urban Alley Glow