Back to palettes

Palette

Urban Alley Noir

A stark gradient of greys and blacks reflecting the minimalist, shadowy essence of a cityscape at dusk.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#262626#4F4F4F#8C8C8C#B3B3B3#D9D9D9

Palette guide

How to use Urban Alley Noir

Overview

The Urban Alley Noir palette offers a sophisticated, modern grayscale spectrum, perfect for projects demanding a sleek and minimalist aesthetic. This monochrome collection, ranging from the deep charcoal of #262626 to the light concrete gray of #D9D9D9, evokes urban sophistication and shadow play. Designers can leverage the strong contrast between #262626 and #B3B3B3 for impactful headlines, while #4F4F4F and #8C8C8C provide excellent mid-tones for subtle depth and hierarchy. Developers will find these consistent shades easy to implement for UI elements, ensuring a cohesive and professional appearance across web and mobile applications. The palette's inherent neutrality makes it incredibly versatile, allowing it to serve as a strong foundation or a refined accent for various design systems, emphasizing clarity and understated elegance.

Best used for

  • Modern corporate branding
  • Architectural portfolios and visualizations
  • Tech product interfaces (UI/UX)
  • Photography websites (backgrounds to highlight images)
  • High-end fashion e-commerce designs
  • Dark mode themes and applications

Suggested color roles

primary

Use #262626 as a dominant, strong base for backgrounds in dark themes, significant headlines, or large UI elements requiring a profound presence.

secondary

Employ #4F4F4F for secondary backgrounds, card elements, subtle borders, or as a darker shade for body text on light backgrounds.

accent

Apply #8C8C8C for subtle emphasis, dividers, disabled states, hover effects, or as a lighter body text color that still maintains good readability.

background

Utilize #D9D9D9 as a clean, light default background for web pages, content areas, or as the canvas for a minimalist design.

text

For optimal readability on light backgrounds, use #262626 or a near-black charcoal. On dark backgrounds like #262626, #D9D9D9 or a near-white provides excellent contrast for text.

Accessibility notes

  • Always check contrast ratio for #262626 text on #D9D9D9 backgrounds to ensure WCAG AA compliance for normal text.
  • Ensure sufficient contrast for #4F4F4F text when placed on #B3B3B3 or #D9D9D9 backgrounds; it might pass for large text but fail for small.
  • Avoid using #8C8C8C or #B3B3B3 for small body text against similar-toned backgrounds, as readability can be compromised.
  • Use a dedicated contrast checker to verify compliance for all text and interactive elements, especially when combining mid-tones like #4F4F4F and #8C8C8C.

Recommended combinations

High Contrast Readout

Ideal for primary headlines on light backgrounds or critical data display in dashboards, providing maximum legibility.

#262626 · #D9D9D9 · #4F4F4F

Subtle Depth Layering

Excellent for creating layered UI elements like cards, modals, or distinct sections, adding depth without harsh contrasts.

#4F4F4F · #8C8C8C · #B3B3B3

Dark Theme Base

Establishes a strong dark mode foundation with #262626 as background, #D9D9D9 for primary text, and #4F4F4F for secondary elements.

#262626 · #4F4F4F · #D9D9D9

CSS variables

:root {
  --urban-alley-noir-1: #262626;
  --urban-alley-noir-2: #4F4F4F;
  --urban-alley-noir-3: #8C8C8C;
  --urban-alley-noir-4: #B3B3B3;
  --urban-alley-noir-5: #D9D9D9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-alley-noir": {
        1: "#262626",
        2: "#4F4F4F",
        3: "#8C8C8C",
        4: "#B3B3B3",
        5: "#D9D9D9",
      }
    }
  }
}

Related searches

grayscale color paletteminimalist design colorsmodern gray huesurban chic palettesleek monochrome scheme

Palette colors

Hex values

Color 1#262626
·
Color 2#4F4F4F
·
Color 3#8C8C8C
·
Color 4#B3B3B3
·
Color 5#D9D9D9
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
4.5:1AA
7.2:1AAA
10.7:1AAA
2
1.8:1Fail
2.4:1Fail
3.9:1AA18
5.8:1AA
3
4.5:1AA
2.4:1Fail
1.6:1Fail
2.4:1Fail
4
7.2:1AAA
3.9:1AA18
1.6:1Fail
1.5:1Fail
5
10.7:1AAA
5.8:1AA
2.4:1Fail
1.5:1Fail

Similar palettes

More like Urban Alley Noir

View all monochrome
Urban Graphite
Architectural Grid Hues
Art Gallery Minimal
Brushed Steel Aura
Charcoal Whisper Scale
Chrome Racer Gleam