Back to palettes

Palette

Cityscape Nocturne Blue

A gradient of deep blues reflecting the urban night sky and distant city lights.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cityscape Nocturne Blue 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 Cityscape Nocturne Blue.

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

Data visualization

#0F1626#1B3B6F#2F5972#497B8F#80A1BC

Palette guide

How to use Cityscape Nocturne Blue

Overview

The "Cityscape Nocturne Blue" palette captures the deep, mysterious allure of an urban night sky, transitioning from profound darkness to the soft glow of distant city lights. This elegant gradient ranges from an almost black, deep navy #0F1626 to a lighter, ethereal steel blue #80A1BC. Intermediate shades like #1B3B6F, #2F5972, and #497B8F provide smooth, sophisticated transitions, making it ideal for creating depth and a luxurious ambiance. Designers and developers can utilize this palette for elegant dark mode interfaces, high-end branding, or any project requiring a calm, sophisticated, and modern aesthetic that conveys depth and quiet contemplation.

Best used for

  • Luxury brand websites
  • Dark mode UI/UX design
  • Architectural visualization
  • High-tech product interfaces
  • Editorial layouts for sophisticated content
  • Photography portfolio sites

Suggested color roles

primary

#0F1626 - A deep, foundational navy-black, excellent for main backgrounds or strong headers, evoking the night sky.

secondary

#1B3B6F - A rich, dark navy, providing subtle contrast for secondary panels or navigation.

accent

#497B8F - A versatile mid-tone steel blue, suitable for interactive elements, borders, or subtle highlights.

background

#80A1BC - A lighter, airy blue, offering a clean, expansive canvas for content in a brighter context.

text

#80A1BC - For headlines and important information on dark backgrounds, or a crisp white for general readability.

Accessibility notes

  • Ensure sufficient contrast when using lighter shades like #80A1BC for text on darker backgrounds; it works well for headings.
  • For body text on backgrounds like #0F1626 or #1B3B6F, use a crisp white or very light gray for optimal readability.
  • Avoid using mid-tones for small text on closely related mid-tone backgrounds, as this can reduce legibility.
  • Utilize clear visual cues beyond color, such as underlines for links or bolding for emphasis, especially across the darker shades.

Recommended combinations

Deep Night

Ideal for dark mode applications, creating visual hierarchy and a sense of profound depth.

#0F1626 · #1B3B6F · #2F5972

Urban Glow

Excellent for subtle gradients, section dividers, or light accents against a dark backdrop.

#80A1BC · #497B8F · #1B3B6F

Nocturne Accent

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

#2F5972 · #497B8F · #80A1BC

CSS variables

:root {
  --cityscape-nocturne-blue-1: #0F1626;
  --cityscape-nocturne-blue-2: #1B3B6F;
  --cityscape-nocturne-blue-3: #2F5972;
  --cityscape-nocturne-blue-4: #497B8F;
  --cityscape-nocturne-blue-5: #80A1BC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cityscape-nocturne-blue": {
        1: "#0F1626",
        2: "#1B3B6F",
        3: "#2F5972",
        4: "#497B8F",
        5: "#80A1BC",
      }
    }
  }
}

Related searches

dark navy blue palettecity night colorssophisticated blue UIurban dark themeelegant cool tones

Palette colors

Hex values

Color 1#0F1626
·
Color 2#1B3B6F
·
Color 3#2F5972
·
Color 4#497B8F
·
Color 5#80A1BC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.4:1Fail
3.9:1AA18
6.7:1AA
2
1.6:1Fail
1.5:1Fail
2.4:1Fail
4.1:1AA18
3
2.4:1Fail
1.5:1Fail
1.6:1Fail
2.8:1Fail
4
3.9:1AA18
2.4:1Fail
1.6:1Fail
1.7:1Fail
5
6.7:1AA
4.1:1AA18
2.8:1Fail
1.7:1Fail

Similar palettes

More like Cityscape Nocturne Blue

View all cool
Starlight City Glimmer
Cityscape Twilight Azure
Nocturnal Ocean Gleam
Twilight Urban Gleam
Winter Aurora Whisper
Art Deco Metropolis