Palette

Urban Grid Dusk

Reflects the cool, steel blue and grey tones of a city skyline as twilight settles over its geometric grid.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1C2A3C#3E5772#6B8BA6#9CBBCC#DDE8F0

Palette guide

How to use Urban Grid Dusk

Overview

The Urban Grid Dusk palette reflects the cool, steel blue and grey tones of a city skyline as twilight settles over its geometric grid. Anchored by the deep #1C2A3C, it gracefully transitions through #3E5772, #6B8BA6, #9CBBCC, and culminates in the airy #DDE8F0. This collection is perfect for designers and developers aiming for a sophisticated, calming, and modern aesthetic. Its cool blue-gray gradient provides depth and tranquility, ideal for creating elegant user interfaces, professional branding, and digital experiences that evoke the serene beauty of an urban evening, offering a sense of calm and structure.

Best used for

Luxury brand websites
Financial tech platforms
Night mode application themes
Architectural firm presentations
High-end editorial design
Smart city concept visuals

Suggested color roles

primary

Use #1C2A3C (Dark Blue-Gray) for dominant backgrounds, headers, or primary branding to establish a deep, sophisticated, and calming foundation.

secondary

Apply #3E5772 (Dark Steel Blue) for secondary content blocks, navigation, or dividers, offering a clear yet harmonious separation.

accent

Employ #6B8BA6 (Slate Gray Blue) for interactive elements, icons, or subtle highlights that need a gentle, cool prominence.

background

Utilize #DDE8F0 (Light Blue-Gray) as a clean, soft background for main content areas, ensuring excellent readability for darker text.

text

For primary text on light backgrounds, #1C2A3C provides excellent contrast. For secondary text, #3E5772 works well. On dark backgrounds, use #DDE8F0.

Accessibility notes

Ensure #1C2A3C text on #DDE8F0 background meets WCAG AA contrast for body text.
Be cautious with #9CBBCC text on #6B8BA6 backgrounds; test contrast thoroughly for readability.
Use sufficient font size or bolding when using lighter blue-grays for text, especially for headings.
Maintain clear visual hierarchy by varying shades appropriately to distinguish interactive elements.

Recommended combinations

Deep Twilight

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

#1C2A3C · #3E5772 · #DDE8F0

Serene Gradient

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

#3E5772 · #6B8BA6 · #9CBBCC

Light & Calm

Ideal for a predominantly light design, using a deep blue-gray for text and a soft, airy accent.

#1C2A3C · #9CBBCC · #DDE8F0

CSS variables

:root {
  --urban-grid-dusk-1: #1C2A3C;
  --urban-grid-dusk-2: #3E5772;
  --urban-grid-dusk-3: #6B8BA6;
  --urban-grid-dusk-4: #9CBBCC;
  --urban-grid-dusk-5: #DDE8F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-grid-dusk": {
        1: "#1C2A3C",
        2: "#3E5772",
        3: "#6B8BA6",
        4: "#9CBBCC",
        5: "#DDE8F0",
      }
    }
  }
}

Hex values

Color 1#1C2A3C

Color 2#3E5772

Color 3#6B8BA6

Color 4#9CBBCC

Color 5#DDE8F0

Accessibility

Contrast checker

1.9:1Fail

4.1:1AA18

7.2:1AAA

11.7:1AAA

1.9:1Fail

2.1:1Fail

3.7:1AA18

6:1AA