Palette

Urban Haze Greyscale

A cool, muted range of grays evoking the subtle beauty of a city veiled in morning fog.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Haze Greyscale 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 Haze Greyscale.

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

Data visualization

#D3D3D3#A9A9A9#808080#696969#36454F

Palette guide

How to use Urban Haze Greyscale

Overview

The Urban Haze Greyscale palette offers a sophisticated, cool-toned monochrome range perfect for conveying minimalism and modern elegance. Inspired by a city veiled in morning fog, this collection features muted grays from the light #D3D3D3 to the deep, almost navy #36454F. Designers can leverage these shades, including the balanced #A9A9A9 and the robust #808080, to create clean, uncluttered interfaces and branding. Developers will find these consistent tones ideal for building accessible, visually cohesive digital experiences where subtlety and focus are paramount. It's a versatile choice for a refined aesthetic.

Best used for

Modern minimalist website design
Architectural and interior design branding
Tech product interfaces and dashboards
Photography portfolios and art galleries
Corporate and professional presentations
Luxury fashion e-commerce

Suggested color roles

primary

Use #808080 as a foundational neutral for large content blocks or primary UI elements, providing a stable, calm base.

secondary

#A9A9A9 works well for secondary navigation, subtle borders, or background elements that need to recede slightly from the primary focus.

accent

#36454F can be an impactful accent for calls to action, important icons, or key headings, providing strong contrast against lighter grays.

background

#D3D3D3 offers a light, airy background, preventing pure white starkness while maintaining a clean, open feel.

text

For most body text, #696969 provides excellent readability against #D3D3D3, or use a near-black like charcoal for maximum contrast on lighter backgrounds.

Accessibility notes

Ensure sufficient contrast between text and background, especially when pairing lighter grays like #D3D3D3 with #A9A9A9 text.
Use #36454F for critical text or interactive elements on lighter backgrounds to meet WCAG AA standards.
Avoid using adjacent grays (e.g., #A9A9A9 and #808080) for text and background without careful contrast checking.
Provide clear visual focus indicators for interactive elements, possibly using #36454F for outlines or highlights.

Recommended combinations

Foggy Ascent

Ideal for a clean, layered UI where #D3D3D3 is background, #A9A9A9 for secondary info, and #36454F for strong accents.

#D3D3D3 · #A9A9A9 · #36454F

Urban Depth

Creates a sophisticated, slightly darker monochrome theme suitable for dashboards or content areas requiring visual depth.

#A9A9A9 · #808080 · #696969

Contrast Focus

Excellent for high-readability interfaces, using #D3D3D3 as background, #696969 for text, and #36454F for key headings or interactive elements.

#D3D3D3 · #696969 · #36454F

CSS variables

:root {
  --urban-haze-greyscale-1: #D3D3D3;
  --urban-haze-greyscale-2: #A9A9A9;
  --urban-haze-greyscale-3: #808080;
  --urban-haze-greyscale-4: #696969;
  --urban-haze-greyscale-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-haze-greyscale": {
        1: "#D3D3D3",
        2: "#A9A9A9",
        3: "#808080",
        4: "#696969",
        5: "#36454F",
      }
    }
  }
}

Hex values

Color 1#D3D3D3

Color 2#A9A9A9

Color 3#808080

Color 4#696969

Color 5#36454F

Accessibility

Contrast checker

1.6:1Fail

2.6:1Fail

3.7:1AA18

6.6:1AA

1.6:1Fail

1.7:1Fail

2.3:1Fail

4.2:1AA18

2.6:1Fail

1.7:1Fail

1.4:1Fail

2.5:1Fail

3.7:1AA18

2.3:1Fail

1.4:1Fail

1.8:1Fail

6.6:1AA

4.2:1AA18

2.5:1Fail

1.8:1Fail

Similar palettes

More like Urban Haze Greyscale