Back to palettes

Palette

Urban Grid Dawn

A sleek grayscale reflecting the cool, structural lines of a city waking up under a dim, industrial light.

MonochromeMinimal5 colors
More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#263238#37474F#546E7A#B0BEC5#E0E0E0

Palette guide

How to use Urban Grid Dawn

Overview

The Urban Grid Dawn palette offers a sleek grayscale collection reflecting the cool, structural lines of a city waking up under a dim, industrial light. Featuring deep shades like #263238 and #37474F, it transitions smoothly through #546E7A to the brighter #B0BEC5 and #E0E0E0. This palette is perfect for designers and developers seeking a modern, calm, and highly organized aesthetic. Its sophisticated blend of cool grays allows for creation of clean user interfaces, impactful branding, and professional digital experiences that evoke clarity and understated elegance, reminiscent of early morning cityscapes.

Best used for

  • Corporate software interfaces
  • Architectural visualization projects
  • Data dashboard designs
  • Modern technology brand websites
  • Minimalist mobile application themes
  • Urban planning visualization

Suggested color roles

primary

Use #263238 (Dark Blue-Gray) for dominant backgrounds, headers, or primary branding to establish a strong, cool, and serious tone.

secondary

Apply #37474F (Dark Slate Gray) for secondary content blocks, navigation, or dividers, providing a subtle yet distinct separation.

accent

Employ #546E7A (Light Slate Gray) for interactive elements, icons, or subtle highlights that need a touch of cool sophistication.

background

Utilize #E0E0E0 (Light Gray) as a clean, bright background for main content areas, ensuring excellent readability for darker text.

text

For primary text on light backgrounds, #263238 provides excellent contrast. For secondary text, #37474F works well. On dark backgrounds, use #E0E0E0.

Accessibility notes

  • Ensure #263238 text on #E0E0E0 background meets WCAG AA contrast for small text.
  • Be cautious with #B0BEC5 text on #546E7A backgrounds; test contrast thoroughly for readability.
  • Maintain clear visual hierarchy by varying shades appropriately to distinguish interactive elements.
  • For dark mode, verify that #E0E0E0 text on #263238 background meets WCAG AAA contrast.

Recommended combinations

Deep & Bright

A strong, dark base with a bright contrast, suitable for headers and main content areas.

#263238 · #37474F · #E0E0E0

Cool Gradient

Creates subtle depth for UI components or layered content panels, maintaining a cohesive cool-gray look.

#37474F · #546E7A · #B0BEC5

Clean Interface

Ideal for a predominantly light design, using darker grays for text and a light blue-gray accent.

#263238 · #B0BEC5 · #E0E0E0

CSS variables

:root {
  --urban-grid-dawn-2-1: #263238;
  --urban-grid-dawn-2-2: #37474F;
  --urban-grid-dawn-2-3: #546E7A;
  --urban-grid-dawn-2-4: #B0BEC5;
  --urban-grid-dawn-2-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grid-dawn-2": {
        1: "#263238",
        2: "#37474F",
        3: "#546E7A",
        4: "#B0BEC5",
        5: "#E0E0E0",
      }
    }
  }
}

Related searches

cool gray web paletteurban modern colorsminimalist blue-gray schemedawn city colorssleek corporate palette

Palette colors

Hex values

Color 1#263238
·
Color 2#37474F
·
Color 3#546E7A
·
Color 4#B0BEC5
·
Color 5#E0E0E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.4:1Fail
6.9:1AA
10:1AAA
2
1.4:1Fail
1.8:1Fail
5.1:1AA
7.3:1AAA
3
2.4:1Fail
1.8:1Fail
2.8:1Fail
4.1:1AA18
4
6.9:1AA
5.1:1AA
2.8:1Fail
1.4:1Fail
5
10:1AAA
7.3:1AAA
4.1:1AA18
1.4:1Fail

Similar palettes

More like Urban Grid Dawn

View all Monochrome
Abstract Urban Canvas
Chrome Reflection
Steel Grid Gleam
Grayscale Stone Etch
Gritty Urban Canvas
Industrial Echo Wall