Palette

Urban Alley Canvas

A raw, concrete-inspired palette reflecting the gritty yet intriguing textures of cityscapes.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2F4F4F#696969#778899#808080#C0C0C0

Palette guide

How to use Urban Alley Canvas

Overview

The "Urban Alley Canvas" palette (ID: urban-alley-canvas) presents a raw, concrete-inspired collection of cool grays and muted blue-grays, reflecting the gritty yet intriguing textures of cityscapes. It ranges from a deep Dark Slate Gray (#2F4F4F) to a bright Silver (#C0C0C0), with intermediate shades like Dim Gray (#696969), Light Slate Gray (#778899), and Gray (#808080). This minimalist palette is perfect for designers and developers seeking to convey a sense of modern industrialism, understated sophistication, and a clean, functional aesthetic. It's highly versatile for architectural, tech, or contemporary art projects.

Best used for

Modern industrial design websites
Architectural firm portfolios
Tech startup interfaces
Minimalist e-commerce platforms
Urban photography showcase sites
Professional design agency branding

Suggested color roles

primary

Use #2F4F4F (Dark Slate Gray) for robust headers, footers, or dark mode backgrounds, providing a strong, sophisticated anchor.

secondary

Apply #696969 (Dim Gray) for subheadings, card backgrounds, or subtle section dividers, adding depth without distraction.

accent

Employ #778899 (Light Slate Gray) for interactive elements, borders, or to add a hint of cool blue-grey without being overpowering.

background

Utilize #C0C0C0 (Silver) as a clean, bright base that allows darker text and elements to stand out, maintaining a minimalist feel.

text

For primary body text on light backgrounds like #C0C0C0, use #2F4F4F or #696969 to ensure excellent readability.

Accessibility notes

Ensure #2F4F4F or #696969 on #C0C0C0 meets WCAG AA contrast for body text.
Avoid using #808080 or #778899 for text on #C0C0C0; contrast will be insufficient for readability.
For interactive elements, ensure accent colors like #778899 have sufficient contrast against their background.
Use #C0C0C0 for text only on the darkest backgrounds, such as #2F4F4F, to maintain visibility.

Recommended combinations

Concrete Base

Perfect for a clean, professional layout with dark text on a light background, and a mid-tone for secondary info.

#2F4F4F · #C0C0C0 · #696969

Industrial Layers

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

#696969 · #778899 · #808080

Alley Highlight

Ideal for navigation or status indicators, using the blue-grey as an accent against the dark and light grays.

#2F4F4F · #778899 · #C0C0C0

CSS variables

:root {
  --urban-alley-canvas-1: #2F4F4F;
  --urban-alley-canvas-2: #696969;
  --urban-alley-canvas-3: #778899;
  --urban-alley-canvas-4: #808080;
  --urban-alley-canvas-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-alley-canvas": {
        1: "#2F4F4F",
        2: "#696969",
        3: "#778899",
        4: "#808080",
        5: "#C0C0C0",
      }
    }
  }
}

Hex values

Color 1#2F4F4F

Color 2#696969

Color 3#778899

Color 4#808080

Color 5#C0C0C0

Accessibility

Contrast checker

1.6:1Fail

2.5:1Fail

2.3:1Fail

4.9:1AA

1.6:1Fail

1.5:1Fail

1.4:1Fail

3:1AA18

2.5:1Fail

1.5:1Fail

1.1:1Fail

2:1Fail

2.3:1Fail

1.4:1Fail

1.1:1Fail

2.2:1Fail

4.9:1AA

3:1AA18

2:1Fail

2.2:1Fail

Similar palettes

More like Urban Alley Canvas

View all neutral

Gritty Urban Canvas

Urban Concrete Jungle

Urban Stone

City Concrete Grind

Graphite Urban Grid

Industrial Urban Grit