Palette

City Rooftop Dawn

Reflects the subtle shifts in light over a silent city as dawn breaks.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how City Rooftop Dawn 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 City Rooftop Dawn.

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

Data visualization

#A9A9A9#696969#808080#C0C0C0#D3D3D3

Palette guide

How to use City Rooftop Dawn

Overview

The "City Rooftop Dawn" palette captures the subtle, serene shifts of light over an urban landscape as day breaks. This monochrome gray scale ranges from a deep, substantial gray #696969 to a soft, ethereal light gray #D3D3D3. Intermediate shades like #A9A9A9, #808080, and #C0C0C0 provide a smooth, sophisticated gradient, perfect for creating depth and nuance in minimalist designs. Designers and developers can utilize this palette for elegant, understated interfaces, architectural visualizations, or any project requiring a clean, modern, and timeless aesthetic that conveys calm and sophistication.

Best used for

Minimalist website design
Architectural firm branding
Photography portfolios
High-end product showcases
Monochrome app interfaces
Editorial layouts for art magazines

Suggested color roles

primary

#696969 - A solid, darker gray, ideal for foundational elements, headers, or strong typography.

secondary

#808080 - A versatile medium gray, perfect for secondary content, borders, or subtle background textures.

accent

#A9A9A9 - A balanced mid-gray, suitable for interactive states, icons, or subtle highlights.

background

#D3D3D3 - A very light gray, providing a clean, expansive, and airy canvas for content.

text

#696969 - For highly readable body text on lighter backgrounds, or a crisp white for headers on dark elements.

Accessibility notes

Ensure sufficient contrast between text and background, especially when pairing mid-to-light grays (e.g., #A9A9A9 text on #D3D3D3).
For body text, use darker grays like #696969 or #808080 on lighter backgrounds for optimal readability.
Avoid using very light grays for small or thin text, as they may become illegible for some users.
Use distinct visual cues like bolding or underlines to differentiate interactive elements from static text within similar gray tones.

Recommended combinations

Dawn Gradient

Excellent for subtle background gradients, layered UI elements, or sophisticated data visualizations.

#696969 · #808080 · #A9A9A9

Crisp Contrast

Ideal for clean, readable layouts, with the lightest as background and the darkest for key text.

#D3D3D3 · #C0C0C0 · #696969

Subtle Shadow

Use for delicate borders, hover effects, or to add slight dimensionality to elements without strong contrast.

#A9A9A9 · #C0C0C0 · #D3D3D3

CSS variables

:root {
  --city-rooftop-dawn-1: #A9A9A9;
  --city-rooftop-dawn-2: #696969;
  --city-rooftop-dawn-3: #808080;
  --city-rooftop-dawn-4: #C0C0C0;
  --city-rooftop-dawn-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-rooftop-dawn": {
        1: "#A9A9A9",
        2: "#696969",
        3: "#808080",
        4: "#C0C0C0",
        5: "#D3D3D3",
      }
    }
  }
}

Hex values

Color 1#A9A9A9

Color 2#696969

Color 3#808080

Color 4#C0C0C0

Color 5#D3D3D3

Accessibility

Contrast checker

2.3:1Fail

1.7:1Fail

1.3:1Fail

1.6:1Fail

2.3:1Fail

1.4:1Fail

3:1AA18

3.7:1AA18

1.7:1Fail

1.4:1Fail

2.2:1Fail

2.6:1Fail

1.3:1Fail

3:1AA18

2.2:1Fail

1.2:1Fail

1.6:1Fail

3.7:1AA18

2.6:1Fail

1.2:1Fail

Similar palettes

More like City Rooftop Dawn