Back to palettes

Palette

Concrete Canyon Dusk

Cool, strong grays reflecting the unyielding architecture of a city, softened by the light of dusk.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Concrete Canyon Dusk 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 Concrete Canyon Dusk.

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

Data visualization

#2C2F33#555A5F#80868C#AAB2BA#D5DEE7

Palette guide

How to use Concrete Canyon Dusk

Overview

The Concrete Canyon Dusk palette features cool, strong grays reflecting the unyielding architecture of a city, softened by the light of dusk. Ranging from the deep #2C2F33 to the airy #D5DEE7, and including balanced mid-tones like #555A5F and #80868C, this palette exudes urban sophistication and calm. Designers can leverage these versatile grays to create contemporary and serene digital and physical spaces. Developers will appreciate the excellent contrast range, ensuring clear readability and harmonious UI elements across various applications, from corporate websites to architectural portfolios, with a clean and professional aesthetic.

Best used for

  • Urban branding and identity
  • Tech company websites and apps
  • Minimalist website designs
  • Architectural visualization
  • Sophisticated corporate design
  • Night photography backdrops

Suggested color roles

primary

Use #2C2F33 for dominant elements like headers, footers, or main brand colors to establish a deep, grounding presence.

secondary

Apply #555A5F or #80868C for subheadings, navigation, or larger content blocks, adding subtle depth and readability.

accent

Introduce #AAB2BA or #D5DEE7 for highlights, subtle dividers, or icons to provide gentle contrast and visual interest.

background

The light #D5DEE7 offers a clean, airy backdrop. For a deeper background, #2C2F33 can be used with light text.

text

Pair a dark color like #2C2F33 or #555A5F with lighter backgrounds. For darker backgrounds, use white or near-white text.

Accessibility notes

  • Ensure sufficient contrast when using lighter shades like #AAB2BA or #D5DEE7 for text on similar backgrounds.
  • Darker shades such as #2C2F33 or #555A5F provide excellent contrast for white or very light gray text.
  • Avoid pairing adjacent mid-tones for small text due to their proximity in value.
  • The range from dark to light allows for good contrast, but always test specific pairings for readability.

Recommended combinations

Dusk Horizon

Creates a sophisticated and serene aesthetic, ideal for brand identity or modern dark mode designs.

#2C2F33 · #80868C · #D5DEE7

Urban Flow

Perfect for backgrounds and content areas, offering a soft, natural, and harmonious feel.

#555A5F · #AAB2BA · #D5DEE7

Cool Depth

Use for highlights and interactive elements, providing a pleasant contrast and visual interest.

#2C2F33 · #555A5F · #AAB2BA

CSS variables

:root {
  --concrete-canyon-dusk-1: #2C2F33;
  --concrete-canyon-dusk-2: #555A5F;
  --concrete-canyon-dusk-3: #80868C;
  --concrete-canyon-dusk-4: #AAB2BA;
  --concrete-canyon-dusk-5: #D5DEE7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "concrete-canyon-dusk": {
        1: "#2C2F33",
        2: "#555A5F",
        3: "#80868C",
        4: "#AAB2BA",
        5: "#D5DEE7",
      }
    }
  }
}

Related searches

urban grey palettecool concrete colorsdusk city schememinimalist neutral tonesarchitectural greys

Palette colors

Hex values

Color 1#2C2F33
·
Color 2#555A5F
·
Color 3#80868C
·
Color 4#AAB2BA
·
Color 5#D5DEE7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.7:1AA18
6.3:1AA
9.9:1AAA
2
1.9:1Fail
1.9:1Fail
3.2:1AA18
5.1:1AA
3
3.7:1AA18
1.9:1Fail
1.7:1Fail
2.7:1Fail
4
6.3:1AA
3.2:1AA18
1.7:1Fail
1.6:1Fail
5
9.9:1AAA
5.1:1AA
2.7:1Fail
1.6:1Fail

Similar palettes

More like Concrete Canyon Dusk

View all neutral
Bare Concrete Stillness
City Concrete Grind
Industrial Urban Grit
Urban Bloom Concrete
Urban Canvas Street
Urban Echo Canvas