Palette

Urban Dawn Grey

The muted tones of a city waking up, with grey concrete and the soft light of dawn on buildings.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Dawn Grey 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 Dawn Grey.

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

Data visualization

#3A4750#5B6B7C#8C9BAB#C5D0DC#6E7F8E

Palette guide

How to use Urban Dawn Grey

Overview

The Urban Dawn Grey palette evokes the serene, muted tones of a city awakening, blending cool grays with subtle hints of blue. From the deep, grounding #3A4750 to the airy, almost luminous #C5D0DC, this collection offers a sophisticated and calming aesthetic. Developers will find it excellent for creating user interfaces that require a professional, understated elegance, allowing content to take center stage. Designers can leverage the mid-tones like #5B6B7C and #6E7F8E to build complex visual hierarchies without overwhelming the user, perfect for applications or websites that prioritize clarity, trust, and a modern, tranquil feel.

Best used for

Corporate branding and websites
Financial services platforms
Educational institutions
Data visualization dashboards
Professional portfolios
Architectural firm online presence

Suggested color roles

primary

#3A4750 provides a deep, authoritative base, suitable for headers, footers, or primary navigation elements.

secondary

#5B6B7C offers a softer yet substantial tone, ideal for secondary information panels, subheadings, or background accents.

accent

#6E7F8E can be used for subtle interactive states, borders, or to draw attention to less critical but important elements.

background

#C5D0DC creates a light, expansive, and professional canvas, ensuring excellent readability and a clean aesthetic.

text

For dark text on light backgrounds, use #3A4750. For light text on dark backgrounds like #3A4750, a crisp white or near-white is recommended.

Accessibility notes

Ensure #3A4750 text on #C5D0DC background meets WCAG AA contrast standards; it generally performs well.
Avoid using #8C9BAB or #6E7F8E for small text on #C5D0DC backgrounds due to potential low contrast issues.
Use #C5D0DC for text on darker elements like #3A4750 or #5B6B7C for optimal readability.
Clearly differentiate interactive elements through sufficient contrast or additional visual cues.

Recommended combinations

Professional Foundation

Excellent for main layouts, providing a strong dark anchor with a bright, readable content area.

#3A4750 · #C5D0DC · #5B6B7C

Subtle Interface

Ideal for cards, modals, or secondary navigation, creating a soft, layered effect.

#C5D0DC · #8C9BAB · #6E7F8E

Data Highlight

Effective for charts or graphs, using the darker tones for emphasis against a lighter background.

#5B6B7C · #3A4750 · #C5D0DC

CSS variables

:root {
  --urban-dawn-grey-1: #3A4750;
  --urban-dawn-grey-2: #5B6B7C;
  --urban-dawn-grey-3: #8C9BAB;
  --urban-dawn-grey-4: #C5D0DC;
  --urban-dawn-grey-5: #6E7F8E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-dawn-grey": {
        1: "#3A4750",
        2: "#5B6B7C",
        3: "#8C9BAB",
        4: "#C5D0DC",
        5: "#6E7F8E",
      }
    }
  }
}

Hex values

Color 1#3A4750

Color 2#5B6B7C

Color 3#8C9BAB

Color 4#C5D0DC

Color 5#6E7F8E

Accessibility

Contrast checker

1.7:1Fail

3.4:1AA18

6.1:1AA

2.3:1Fail

1.7:1Fail

1.9:1Fail

3.5:1AA18

1.3:1Fail

3.4:1AA18

1.9:1Fail

1.8:1Fail

1.5:1Fail

6.1:1AA

3.5:1AA18

1.8:1Fail

2.6:1Fail

2.3:1Fail

1.3:1Fail

1.5:1Fail

2.6:1Fail

Similar palettes

More like Urban Dawn Grey

View all neutral

City Concrete Grind

Concrete Garden Grey

Concrete Jungle Bloom

Graffiti Alley Hue

Graffiti Wall Grind

Gritty Urban Canvas