Back to palettes

Palette

Shadowed Alley Glimmer

A subtle gradient of dark grays, capturing the mysterious shadows and faint light of a quiet city alley.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Shadowed Alley Glimmer 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 Shadowed Alley Glimmer.

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

Data visualization

#1A1A1A#333333#4D4D4D#808080#B3B3B3

Palette guide

How to use Shadowed Alley Glimmer

Overview

The "Shadowed Alley Glimmer" palette elegantly explores the subtle interplay of dark grays, capturing the mysterious shadows and faint hints of light in a quiet city alley. This sophisticated collection begins with a profound dark charcoal #1A1A1A, progresses through deep gray #333333 and medium dark gray #4D4D4D, then introduces a balanced medium gray #808080, culminating in a soft, luminous light gray #B3B3B3. This palette is perfectly suited for designs that require a mysterious, understated elegance, providing depth and atmosphere without relying on stark contrasts, evoking an intriguing urban night.

Best used for

  • Mysterious brand identity
  • Dark mode web and app interfaces
  • Architectural and industrial design presentations
  • Sophisticated photography backdrops
  • Urban-themed digital art
  • Minimalist product packaging

Suggested color roles

primary

#1A1A1A (dark charcoal). The essential base color for creating deep, shadowy backgrounds and dominant elements.

secondary

#333333 (deep gray). Ideal for content panels, navigation, or subtle divisions within a dark layout.

accent

#B3B3B3 (soft light gray). This lightest tone offers a 'glimmer' for interactive elements, highlights, or important text.

background

#1A1A1A (dark charcoal). A rich, deep foundation that allows the lighter grays to subtly stand out.

text

#B3B3B3 or white for primary text on darker backgrounds; use #1A1A1A for text on #B3B3B3 for contrast.

Accessibility notes

  • Ensure #B3B3B3 or white text provides sufficient contrast on #1A1A1A, #333333, and #4D4D4D backgrounds.
  • Using #808080 for text on #B3B3B3 will likely have insufficient contrast; prefer #1A1A1A or #333333 for text.
  • For interactive elements, clear hover/focus states are vital, perhaps a slight glow or a distinct border.
  • #4D4D4D can be used for secondary information or subheadings on #1A1A1A, offering subtle readability.

Recommended combinations

Alley Depths

Excellent for creating deep, layered backgrounds and content blocks in dark UI.

#1A1A1A · #333333 · #4D4D4D

Subtle Glimmer

Ideal for highlighting interactive elements or key information against a dark base.

#1A1A1A · #B3B3B3 · #808080

Grayscale Mystery

Effective for subtle visual hierarchy and separating content in a sophisticated manner.

#4D4D4D · #808080 · #B3B3B3

CSS variables

:root {
  --shadowed-alley-glimmer-2-1: #1A1A1A;
  --shadowed-alley-glimmer-2-2: #333333;
  --shadowed-alley-glimmer-2-3: #4D4D4D;
  --shadowed-alley-glimmer-2-4: #808080;
  --shadowed-alley-glimmer-2-5: #B3B3B3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shadowed-alley-glimmer-2": {
        1: "#1A1A1A",
        2: "#333333",
        3: "#4D4D4D",
        4: "#808080",
        5: "#B3B3B3",
      }
    }
  }
}

Related searches

dark gray subtle palettemysterious urban colorsminimal shadow schemesleek dark gray gradientcity night aesthetic

Palette colors

Hex values

Color 1#1A1A1A
·
Color 2#333333
·
Color 3#4D4D4D
·
Color 4#808080
·
Color 5#B3B3B3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.1:1Fail
4.4:1AA18
8.3:1AAA
2
1.4:1Fail
1.5:1Fail
3.2:1AA18
6:1AA
3
2.1:1Fail
1.5:1Fail
2.1:1Fail
4:1AA18
4
4.4:1AA18
3.2:1AA18
2.1:1Fail
1.9:1Fail
5
8.3:1AAA
6:1AA
4:1AA18
1.9:1Fail

Similar palettes

More like Shadowed Alley Glimmer

View all dark