Palette

Urban Shadow Play

A deep and reflective grey palette, inspired by the shadows and light in a city at dusk.

monochromedark5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Shadow Play 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 Shadow Play.

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

Data visualization

#36454F#5F6B72#9BA5AB#DDE4E7#273038

Palette guide

How to use Urban Shadow Play

Overview

The Urban Shadow Play palette is a deep and reflective grey collection, inspired by the nuanced shadows and ambient light of a city at dusk. Featuring sophisticated cool tones like #36454F and #273038, it establishes a strong, contemporary foundation. The lighter shades, such as #9BA5AB and #DDE4E7, introduce subtle variations, perfect for creating depth and highlighting details without harsh contrasts. This palette is ideal for designers and developers aiming for a minimalist, modern aesthetic with a touch of urban moodiness, offering versatility for both dark mode interfaces and elegant branding that exudes quiet confidence.

Best used for

Dark mode UI/UX design
Corporate branding for tech companies
Architectural visualization
Luxury product websites
Art gallery interfaces
Modern editorial layouts

Suggested color roles

primary

#273038 - A deep, almost black, anchor color for main backgrounds, footers, or bold typography, providing maximum contrast.

secondary

#36454F - An excellent choice for secondary panels, large content blocks, or prominent headings, maintaining depth.

accent

#9BA5AB - A soft, cool grey perfect for subtle highlights, interactive states, or decorative lines, adding refinement.

background

#DDE4E7 - A very light, airy background for main content areas, providing a clean canvas for darker text and elements.

text

#273038 - Ideal for body text on light backgrounds like #DDE4E7. For dark backgrounds, use #DDE4E7 or white for optimal readability.

Accessibility notes

Ensure #DDE4E7 text on #273038 or #36454F backgrounds meets WCAG contrast ratios.
Avoid using #9BA5AB for small text on #5F6B72 due to insufficient contrast.
The darkest colors, #273038 and #36454F, provide excellent contrast with the lightest, #DDE4E7.
Test all text and interactive elements for readability across the palette.

Recommended combinations

Deep Shadow

For sophisticated dark themes, strong headers, or impactful branding, conveying depth and seriousness.

#273038 · #36454F · #5F6B72

City Haze

Ideal for softer backgrounds, sub-sections, or gradients, creating a light, ethereal urban feel.

#5F6B72 · #9BA5AB · #DDE4E7

Contrast Detail

Use for clear typography and interactive elements on light backgrounds, ensuring excellent readability and visual hierarchy.

#273038 · #DDE4E7 · #9BA5AB

CSS variables

:root {
  --urban-shadow-play-1: #36454F;
  --urban-shadow-play-2: #5F6B72;
  --urban-shadow-play-3: #9BA5AB;
  --urban-shadow-play-4: #DDE4E7;
  --urban-shadow-play-5: #273038;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-shadow-play": {
        1: "#36454F",
        2: "#5F6B72",
        3: "#9BA5AB",
        4: "#DDE4E7",
        5: "#273038",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5F6B72

Color 3#9BA5AB

Color 4#DDE4E7

Color 5#273038

Accessibility

Contrast checker

1.8:1Fail

3.9:1AA18

7.7:1AAA

1.4:1Fail

1.8:1Fail

2.2:1Fail

4.3:1AA18

2.4:1Fail

3.9:1AA18

2.2:1Fail

2:1Fail

5.3:1AA

7.7:1AAA

4.3:1AA18

2:1Fail

10.4:1AAA

1.4:1Fail

2.4:1Fail

5.3:1AA

10.4:1AAA

Similar palettes

More like Urban Shadow Play

Rainy City Reflections

Shadowed Alley Fog

Twilight Shadow Path