Palette

Urban Alley Glow

A cool, muted collection reflecting the stark beauty and grittiness of city alleys at twilight.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Alley Glow 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 Alley Glow.

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

Data visualization

#3D3A3B#6C6B6B#A6A6A6#B3B3B3#CCCCCC

Palette guide

How to use Urban Alley Glow

Overview

The "Urban Alley Glow" palette (ID: urban-alley-glow-3) offers a cool, muted collection of grays, reflecting the stark beauty and grittiness of city alleys at twilight. Ranging from a dark, almost charcoal gray (#3D3A3B) to a very light, subtle grey (#CCCCCC), this monochrome palette creates a sophisticated and minimal aesthetic. It's ideal for designers and developers seeking to convey a modern, industrial, or understated elegance. The subtle variations in tone allow for depth and hierarchy without relying on additional colors, making it perfect for clean interfaces, architectural renders, or minimalist branding.

Best used for

Modern minimalist websites
Architectural visualization
Industrial product design
Understated corporate branding
Photography portfolio sites
UI/UX for professional applications

Suggested color roles

primary

Use #3D3A3B (Dark Charcoal Grey) for foundational elements, dark mode backgrounds, or strong headers, providing a sophisticated anchor.

secondary

Apply #6C6B6B (Medium Dark Grey) for subheadings, card backgrounds, or subtle dividers, adding depth and structure.

accent

Employ #A6A6A6 (Medium Grey) for interactive elements, borders, or to highlight secondary information without being overly prominent.

background

Utilize #CCCCCC (Light Grey) as a clean, airy base that ensures dark text is highly readable and maintains a minimalist feel.

text

For primary body text on light backgrounds like #CCCCCC or #B3B3B3, use #3D3A3B or #6C6B6B to ensure excellent readability.

Accessibility notes

Ensure sufficient contrast between #3D3A3B or #6C6B6B and #CCCCCC for body text.
Avoid using #B3B3B3 or #A6A6A6 for text on #CCCCCC; contrast will be insufficient for readability.
For interactive elements, ensure accent colors like #A6A6A6 have adequate contrast with surrounding text or background.
Use #CCCCCC for text only on the darkest backgrounds, such as #3D3A3B, to maintain visibility.

Recommended combinations

Gritty Foundation

Perfect for a professional layout, using dark grey for text on a light background, and a mid-tone for secondary elements.

#3D3A3B · #CCCCCC · #6C6B6B

Urban Layers

Good for creating subtle depth in UI cards or sections, using gradual shifts in grey.

#6C6B6B · #A6A6A6 · #B3B3B3

Twilight Path

Ideal for navigation or progress indicators, moving from dark to light to show progression.

#3D3A3B · #A6A6A6 · #CCCCCC

CSS variables

:root {
  --urban-alley-glow-3-1: #3D3A3B;
  --urban-alley-glow-3-2: #6C6B6B;
  --urban-alley-glow-3-3: #A6A6A6;
  --urban-alley-glow-3-4: #B3B3B3;
  --urban-alley-glow-3-5: #CCCCCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-alley-glow-3": {
        1: "#3D3A3B",
        2: "#6C6B6B",
        3: "#A6A6A6",
        4: "#B3B3B3",
        5: "#CCCCCC",
      }
    }
  }
}

Hex values

Color 1#3D3A3B

Color 2#6C6B6B

Color 3#A6A6A6

Color 4#B3B3B3

Color 5#CCCCCC

Accessibility

Contrast checker

2.1:1Fail

4.6:1AA

5.4:1AA

7:1AAA

2.1:1Fail

2.2:1Fail

2.5:1Fail

3.3:1AA18

4.6:1AA

2.2:1Fail

1.2:1Fail

1.5:1Fail

5.4:1AA

2.5:1Fail

1.2:1Fail

1.3:1Fail

7:1AAA

3.3:1AA18

1.5:1Fail

1.3:1Fail

Similar palettes

More like Urban Alley Glow

View all monochrome

Concrete Bloom Grey

Concrete Jungle Canopy

Concrete Jungle Haze

Grayscale Metropolis Grid

Pavement Abstract Greys

Urban Asphalt Glint