Palette

Grayscale Urban Haze

A refined blend of mid-tone grays, evoking the soft, diffused light of a hazy urban morning.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7F7F7F#A0A0A0#C0C0C0#606060#909090

Palette guide

How to use Grayscale Urban Haze

Overview

The Grayscale Urban Haze palette offers a refined blend of mid-tone greys, evoking the soft, diffused light of a hazy urban morning. This collection, featuring #7F7F7F, #A0A0A0, #C0C0C0, #606060, and #909090, is perfect for creating a neutral, modern, and understated aesthetic. Designers and developers can leverage these subtle variations to build interfaces that feel sophisticated, calm, and effortlessly contemporary. It provides excellent flexibility for creating depth and visual interest without strong contrasts, making it ideal for designs where a gentle, atmospheric quality is desired, allowing content to breathe.

Best used for

Modern corporate websites or branding
Lifestyle blogs with a minimalist aesthetic
UI designs for productivity tools
Photography presentations with a soft focus
Architectural concept renderings
Digital art platforms seeking an understated backdrop

Suggested color roles

primary

Use #606060 for main headings, primary UI elements, or strong content dividers, providing a stable mid-point.

secondary

Apply #7F7F7F for supporting text, subheadings, or secondary calls-to-action, maintaining a cohesive, muted feel.

accent

#C0C0C0 can serve as a subtle accent for borders, inactive states, or background patterns, adding lightness.

background

#A0A0A0 or #909090 provides a soft, neutral base, allowing for easy readability without being stark.

text

For primary text, #606060 offers good readability on lighter backgrounds. On darker mid-tones, use #C0C0C0 or a near-white.

Accessibility notes

Ensure sufficient contrast when pairing mid-tone greys for text and background (e.g., #606060 on #C0C0C0).
Avoid using very similar greys for interactive elements and their background to prevent confusion.
Consider larger font sizes for important information to compensate for potentially lower contrast pairings.
Always validate contrast ratios with accessibility tools to ensure compliance for all users.

Recommended combinations

Hazy Morning

Ideal for primary UI, combining a mid-dark grey with a light grey background and a balanced mid-tone for text.

#606060 · #C0C0C0 · #7F7F7F

Soft Layers

Excellent for creating subtle depth and visual interest in content blocks, cards, or background textures.

#7F7F7F · #A0A0A0 · #909090

Gentle Transition

Suited for light-themed designs, using the lightest grey as a background with a darker grey for text and a mid-grey for accents.

#C0C0C0 · #606060 · #A0A0A0

CSS variables

:root {
  --grayscale-urban-haze-1: #7F7F7F;
  --grayscale-urban-haze-2: #A0A0A0;
  --grayscale-urban-haze-3: #C0C0C0;
  --grayscale-urban-haze-4: #606060;
  --grayscale-urban-haze-5: #909090;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "grayscale-urban-haze": {
        1: "#7F7F7F",
        2: "#A0A0A0",
        3: "#C0C0C0",
        4: "#606060",
        5: "#909090",
      }
    }
  }
}

Hex values

Color 1#7F7F7F

Color 2#A0A0A0

Color 3#C0C0C0

Color 4#606060

Color 5#909090

Accessibility

Contrast checker

1.5:1Fail

2.2:1Fail

1.6:1Fail

1.3:1Fail

1.5:1Fail

1.4:1Fail

2.4:1Fail

1.2:1Fail

2.2:1Fail

1.4:1Fail

3.5:1AA18

1.8:1Fail

1.6:1Fail

2.4:1Fail

3.5:1AA18

2:1Fail

1.3:1Fail

1.2:1Fail

1.8:1Fail

2:1Fail

Similar palettes

More like Grayscale Urban Haze

Concrete Jungle Bloom