Back to palettes

Palette

Urban Alley Glow

A cool grey gradient reminiscent of the subtle light play in a modern urban alleyway.

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

#3C3C3C#6F6F6F#A0A0A0#C8C8C8#EDEDED

Palette guide

How to use Urban Alley Glow

Overview

The "Urban Alley Glow" palette offers a sophisticated monochrome gradient, perfect for designers and developers seeking a clean, modern aesthetic. Inspired by the subtle play of light in a contemporary urban setting, this cool grey collection ranges from the deep #3C3C3C to the airy #EDEDED. Its versatility makes it an excellent foundational palette for UI design, corporate branding, or architectural visualization. Utilize the mid-tones like #6F6F6F and #A0A0A0 to create depth and hierarchy, ensuring a professional and understated elegance. This palette provides a timeless base that complements vibrant accents or stands strong on its own for a minimalist approach.

Best used for

  • Modern UI/UX design and wireframing
  • Corporate and professional branding
  • Architectural and interior design presentations
  • Photography portfolio websites
  • Tech product interfaces
  • Minimalist website layouts

Suggested color roles

primary

#3C3C3C - Ideal for bold headings, strong navigation elements, or primary calls-to-action where a robust, authoritative presence is desired.

secondary

#6F6F6F - Excellent for subheadings, secondary navigation links, or prominent body text, offering a softer yet still impactful contrast.

accent

#A0A0A0 - Perfect for subtle highlights, borders, dividers, or disabled state elements, providing a gentle separation without overpowering.

background

#EDEDED - A clean, near-white background color that provides excellent readability and a spacious, modern feel for content areas.

text

#3C3C3C - Highly recommended for primary body text on lighter backgrounds like #EDEDED or #C8C8C8, ensuring strong readability and contrast. Alternatively, use a true charcoal or black for maximum accessibility.

Accessibility notes

  • Ensure sufficient contrast between text and background colors, especially for smaller font sizes, adhering to WCAG 2.1 AA standards.
  • Using #3C3C3C text on #EDEDED background offers strong readability; avoid using lighter greys for critical text on light backgrounds.
  • For interactive elements, maintain a contrast ratio of at least 3:1 against adjacent colors to ensure visual distinction.
  • Be mindful of contrast when layering mid-tones like #A0A0A0 on #C8C8C8, as these pairings might not meet accessibility requirements for text.

Recommended combinations

Deep Contrast

Classic dark text on light background with a mid-tone for secondary elements, ideal for content-heavy pages.

#3C3C3C · #EDEDED · #6F6F6F

Subtle Gradient

For creating soft transitions or layered UI components, such as card backgrounds or progress bars.

#6F6F6F · #A0A0A0 · #C8C8C8

Modern Base

A clean, light canvas with strong dark text and a subtle grey for borders or inactive states, perfect for minimalist designs.

#EDEDED · #3C3C3C · #A0A0A0

CSS variables

:root {
  --urban-alley-glow-1: #3C3C3C;
  --urban-alley-glow-2: #6F6F6F;
  --urban-alley-glow-3: #A0A0A0;
  --urban-alley-glow-4: #C8C8C8;
  --urban-alley-glow-5: #EDEDED;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-alley-glow": {
        1: "#3C3C3C",
        2: "#6F6F6F",
        3: "#A0A0A0",
        4: "#C8C8C8",
        5: "#EDEDED",
      }
    }
  }
}

Related searches

cool grey color palettemonochrome ui designindustrial color schememinimalist grey brandingmodern architectural colors

Palette colors

Hex values

Color 1#3C3C3C
·
Color 2#6F6F6F
·
Color 3#A0A0A0
·
Color 4#C8C8C8
·
Color 5#EDEDED
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
4.2:1AA18
6.6:1AA
9.4:1AAA
2
2.2:1Fail
1.9:1Fail
3:1AA18
4.3:1AA18
3
4.2:1AA18
1.9:1Fail
1.6:1Fail
2.2:1Fail
4
6.6:1AA
3:1AA18
1.6:1Fail
1.4:1Fail
5
9.4:1AAA
4.3:1AA18
2.2:1Fail
1.4:1Fail

Similar palettes

More like Urban Alley Glow

View all monochrome
Urban Grid Shift
City Grayscale View
Grayscale Urban Loft
Monochrome Cityscape
Monochrome Granite Edge
Urban Concrete Echo