Palette

Urban Nocturne Haze

Muted, cool tones reflecting the secretive atmosphere of a foggy, shadowed urban alley.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Nocturne 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 Urban Nocturne Haze.

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

Data visualization

#3D4A5A#6C7D8E#9CAABC#C6D2E0#2B3540

Palette guide

How to use Urban Nocturne Haze

Overview

The Urban Nocturne Haze palette encapsulates the mysterious and muted ambiance of a foggy urban night. Its deep, cool tones, ranging from the foundational #2B3540 and #3D4A5A through the mid-greys of #6C7D8E and #9CAABC, to the lightest #C6D2E0, create a sophisticated yet enigmatic feel. This guide helps designers and developers evoke a sense of quiet intensity and modern elegance. It's ideal for projects that benefit from a subdued, monochrome-leaning aesthetic, perfect for conveying seriousness, introspection, or a sleek, minimalist design.

Best used for

High-end fashion or art portfolio websites
Documentary film branding or dark cinematic themes
Sophisticated tech interfaces with a minimalist aesthetic
Architectural design presentations
Luxury product packaging or branding
Abstract photography exhibitions

Suggested color roles

primary

#2B3540 - A very deep, almost black-blue, serving as a powerful and grounding base for backgrounds or significant structural elements.

secondary

#3D4A5A - A dark, cool grey-blue, excellent for main content areas, navigation, or as a dominant color in a sleek design.

accent

#6C7D8E - A versatile mid-tone grey-blue, perfect for subtle highlights, interactive elements, or secondary text that needs to stand out gently.

background

#C6D2E0 - A light, misty blue-grey, offering a clean, airy canvas for content, or use #2B3540 for a dramatic dark mode.

text

#C6D2E0 for light text on dark backgrounds like #2B3540, or a dark charcoal for readability on #C6D2E0.

Accessibility notes

Ensure text using #6C7D8E or #9CAABC has sufficient contrast on both #2B3540 and #C6D2E0.
#2B3540 text on #C6D2E0 provides excellent contrast for body text.
The lighter tones like #C6D2E0 and #9CAABC might not provide enough contrast for small text when used on backgrounds close in value.
Use #3D4A5A or #2B3540 for critical UI elements to ensure visibility against lighter shades.

Recommended combinations

Hazy Depths

Creating a deep, introspective mood for headers, hero sections, or sophisticated dashboards.

#2B3540 · #6C7D8E · #C6D2E0

Misty Modern

Clean layouts, content cards, or subtle UI elements requiring a refined, minimalist touch.

#3D4A5A · #9CAABC · #C6D2E0

Nocturne Blend

Dark theme interfaces, elegant navigation menus, or abstract graphic elements.

#2B3540 · #3D4A5A · #6C7D8E

CSS variables

:root {
  --urban-nocturne-haze-1: #3D4A5A;
  --urban-nocturne-haze-2: #6C7D8E;
  --urban-nocturne-haze-3: #9CAABC;
  --urban-nocturne-haze-4: #C6D2E0;
  --urban-nocturne-haze-5: #2B3540;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-nocturne-haze": {
        1: "#3D4A5A",
        2: "#6C7D8E",
        3: "#9CAABC",
        4: "#C6D2E0",
        5: "#2B3540",
      }
    }
  }
}

Hex values

Color 1#3D4A5A

Color 2#6C7D8E

Color 3#9CAABC

Color 4#C6D2E0

Color 5#2B3540

Accessibility

Contrast checker

2.1:1Fail

3.8:1AA18

5.9:1AA

1.4:1Fail

2.1:1Fail

1.8:1Fail

2.8:1Fail

2.9:1Fail

3.8:1AA18

1.8:1Fail

1.5:1Fail

5.3:1AA