Palette

Skylight Grey Haze

A range of sophisticated grays reflecting the subtle shifts in light on a misty urban skyline.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Skylight Grey 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 Skylight Grey Haze.

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

Data visualization

#4A4A4A#757575#A0A0A0#C9C9C9#EBEBEB

Palette guide

How to use Skylight Grey Haze

Overview

The "Skylight Grey Haze" palette offers a sophisticated and versatile range of cool grays, mirroring the subtle shifts in light on a misty urban skyline. From the deep charcoal #4A4A4A to the mid-tone #757575, the balanced #A0A0A0, the light #C9C9C9, and the near-white #EBEBEB, this collection provides a timeless and minimalist aesthetic. It's highly practical for designers and developers seeking a clean, modern, and professional look. These grays are excellent for establishing visual hierarchy, creating understated backgrounds, or providing a neutral base that allows other content or accent colors to stand out elegantly.

Best used for

Corporate and business websites
Minimalist portfolio designs
Tech and software interfaces
Urban photography presentations
Modern architecture branding
Data visualization dashboards

Suggested color roles

primary

#4A4A4A - A deep charcoal, ideal for primary text, main navigation, or strong foundational elements to convey professionalism and clarity.

secondary

#757575 - A versatile mid-grey, excellent for secondary text, subheadings, borders, or subtle background differentiation.

accent

#A0A0A0 - A lighter, balanced grey, perfect for subtle accents, disabled states, or ghost buttons where a soft presence is desired.

background

#EBEBEB - The lightest grey, providing a clean, soft background that is slightly warmer than pure white, ideal for main content areas.

text

#4A4A4A (dark charcoal) or black - For optimal readability and a sleek, modern aesthetic, especially against lighter grays. White text can be used on #4A4A4A.

Accessibility notes

#4A4A4A provides excellent contrast for text on #EBEBEB, #C9C9C9, and #A0A0A0.
#757575 provides good contrast for text on #EBEBEB and #C9C9C9.
Avoid using #A0A0A0 or lighter for text on backgrounds lighter than #757575.
Ensure interactive elements (buttons, links) have sufficient contrast in all states, especially against light backgrounds.

Recommended combinations

Urban Gradient

Creates sophisticated depth in backgrounds or layered UI components.

#4A4A4A · #757575 · #A0A0A0

Minimalist Base

Perfect for clean web layouts, providing clear text hierarchy and subtle section breaks.

#EBEBEB · #C9C9C9 · #4A4A4A

Soft Contrast

Ideal for subtle card designs, form fields, or ghost button styles, maintaining a light feel.

#757575 · #EBEBEB · #A0A0A0

CSS variables

:root {
  --skylight-grey-haze-1: #4A4A4A;
  --skylight-grey-haze-2: #757575;
  --skylight-grey-haze-3: #A0A0A0;
  --skylight-grey-haze-4: #C9C9C9;
  --skylight-grey-haze-5: #EBEBEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "skylight-grey-haze": {
        1: "#4A4A4A",
        2: "#757575",
        3: "#A0A0A0",
        4: "#C9C9C9",
        5: "#EBEBEB",
      }
    }
  }
}

Hex values

Color 1#4A4A4A

Color 2#757575

Color 3#A0A0A0

Color 4#C9C9C9

Color 5#EBEBEB

Accessibility

Contrast checker

1.9:1Fail

3.4:1AA18

5.4:1AA

7.4:1AAA

1.9:1Fail

1.8:1Fail

2.8:1Fail

3.9:1AA18

3.4:1AA18

1.8:1Fail

1.6:1Fail

2.2:1Fail

5.4:1AA

2.8:1Fail

1.6:1Fail

1.4:1Fail

7.4:1AAA

3.9:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Skylight Grey Haze

Urban Concrete Jungle

Urban Dawn Grey