Back to palettes

Palette

Cityscape Twilight Azure

Deep blues transition to lighter azures, capturing the cool, electric glow of a city at twilight.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cityscape Twilight Azure 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 Twilight Azure.

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

Data visualization

#0B2C40#174261#2C5F8E#457CB8#6B9CDB

Palette guide

How to use Cityscape Twilight Azure

Overview

The "Cityscape Twilight Azure" palette captures the cool, electric glow of an urban sky at twilight, transitioning from profound depth to luminous azure. This elegant gradient ranges from a deep, commanding navy #0B2C40 to a vibrant, ethereal sky blue #6B9CDB. Intermediate shades like #174261, #2C5F8E, and #457CB8 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

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

secondary

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

accent

#457CB8 - A versatile mid-tone azure, suitable for interactive elements, borders, or subtle highlights.

background

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

text

#6B9CDB - 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 #6B9CDB for text on darker backgrounds; it works well for headings.
  • For body text on backgrounds like #0B2C40 or #174261, 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 Azure

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

#0B2C40 · #174261 · #2C5F8E

Twilight Glow

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

#6B9CDB · #457CB8 · #174261

Sophisticated Pop

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

#2C5F8E · #457CB8 · #6B9CDB

CSS variables

:root {
  --cityscape-twilight-azure-1: #0B2C40;
  --cityscape-twilight-azure-2: #174261;
  --cityscape-twilight-azure-3: #2C5F8E;
  --cityscape-twilight-azure-4: #457CB8;
  --cityscape-twilight-azure-5: #6B9CDB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cityscape-twilight-azure": {
        1: "#0B2C40",
        2: "#174261",
        3: "#2C5F8E",
        4: "#457CB8",
        5: "#6B9CDB",
      }
    }
  }
}

Related searches

dark blue palettetwilight city colorssophisticated blue UIurban dark themeelegant cool tones

Palette colors

Hex values

Color 1#0B2C40
·
Color 2#174261
·
Color 3#2C5F8E
·
Color 4#457CB8
·
Color 5#6B9CDB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
2.2:1Fail
3.3:1AA18
5.1:1AA
2
1.4:1Fail
1.6:1Fail
2.4:1Fail
3.7:1AA18
3
2.2:1Fail
1.6:1Fail
1.5:1Fail
2.4:1Fail
4
3.3:1AA18
2.4:1Fail
1.5:1Fail
1.5:1Fail
5
5.1:1AA
3.7:1AA18
2.4:1Fail
1.5:1Fail

Similar palettes

More like Cityscape Twilight Azure

View all cool
Cityscape Nocturne Blue
Sapphire Night Sky
Starlight City Glimmer
Aurora Horizon Whisper
Aurora Sky Glow
Celestial Ocean Horizon