Back to palettes

Palette

Urban Asphalt Glint

Gritty and sleek, this palette captures the cool, reflective shades of city asphalt and concrete.

monochromeminimal5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Asphalt Glint 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 Asphalt Glint.

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

Data visualization

#8C959A#6E777D#50595E#3A4045#22272B

Palette guide

How to use Urban Asphalt Glint

Overview

The Urban Asphalt Glint palette presents a sophisticated range of cool, dark grays, evoking the sleek, reflective surfaces of city asphalt and industrial concrete. From the lighter #8C959A to the deep, almost black #22272B, this collection provides a strong, contemporary foundation for any design. Designers can leverage the subtle variations between #6E777D, #50595E, and #3A4045 to create depth, shadow, and a sense of understated elegance. This palette is ideal for projects seeking a modern, minimalist, and masculine aesthetic, offering a solid base for clean typography and subtle UI elements.

Best used for

  • luxury automotive branding
  • tech company websites
  • industrial design portfolios
  • masculine fashion brands
  • modern interior concepts
  • architectural visualizations

Suggested color roles

primary

#22272B serves as an excellent deep primary, offering a sophisticated and strong base for backgrounds or main content.

secondary

#3A4045 provides a slightly lighter, yet still dominant, shade for subheadings or prominent UI components.

accent

#8C959A can be used sparingly for subtle highlights, borders, or interactive states, adding a touch of lightness.

background

#22272B or #3A4045 creates a rich, dark mode aesthetic, while #8C959A can be a lighter alternative.

text

For dark backgrounds, crisp white or a very light gray is essential. For #8C959A, use #22272B or black.

Accessibility notes

  • Ensure high contrast for text, especially when using lighter grays like #8C959A on similarly light backgrounds.
  • White or light gray text should be used predominantly on the darker shades (#22272B, #3A4045).
  • Avoid using #50595E for small text on #6E777D as contrast might be insufficient.
  • Always verify contrast ratios for all text and interactive elements to comply with WCAG standards.

Recommended combinations

Deep Foundation

For creating a strong, dark mode base with subtle shifts for depth and hierarchy.

#22272B · #3A4045 · #8C959A

Subtle Gradient

Ideal for backgrounds, cards, or layered elements needing a soft, cohesive transition.

#50595E · #6E777D · #8C959A

Sleek Contrast

A classic pairing for text and background, offering clean readability and modern appeal.

#22272B · #8C959A · #50595E

CSS variables

:root {
  --urban-asphalt-glint-1: #8C959A;
  --urban-asphalt-glint-2: #6E777D;
  --urban-asphalt-glint-3: #50595E;
  --urban-asphalt-glint-4: #3A4045;
  --urban-asphalt-glint-5: #22272B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-asphalt-glint": {
        1: "#8C959A",
        2: "#6E777D",
        3: "#50595E",
        4: "#3A4045",
        5: "#22272B",
      }
    }
  }
}

Related searches

dark grey paletteasphalt colors schemeindustrial design graysminimalist cool tonesurban concrete palette

Palette colors

Hex values

Color 1#8C959A
·
Color 2#6E777D
·
Color 3#50595E
·
Color 4#3A4045
·
Color 5#22272B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.3:1Fail
3.4:1AA18
4.9:1AA
2
1.5:1Fail
1.6:1Fail
2.3:1Fail
3.3:1AA18
3
2.3:1Fail
1.6:1Fail
1.5:1Fail
2.1:1Fail
4
3.4:1AA18
2.3:1Fail
1.5:1Fail
1.4:1Fail
5
4.9:1AA
3.3:1AA18
2.1:1Fail
1.4:1Fail

Similar palettes

More like Urban Asphalt Glint

View all monochrome
Urban Alley Glow
Urban Concrete Jungle
Urban Grayscale Grit
City Grayscale View
City Steel Gleam
Concrete Bloom Grey