Palette

Urban Night Skyline

The deep, reflective blues of a city transitioning into night, with distant, softened lights.

CoolElegant5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Night Skyline 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 Night Skyline.

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

Data visualization

#0A1931#213B6B#426AA3#779ED0#ADC8EB

Palette guide

How to use Urban Night Skyline

Overview

The Urban Night Skyline palette captures the profound depth and subtle glow of a city at dusk. Anchored by the profound #0A1931 and transitioning through rich blues like #213B6B and #426AA3, it culminates in lighter, misty tones of #779ED0 and #ADC8EB. This guide helps designers and developers craft sophisticated, serene, and modern interfaces. It's ideal for projects that require an elegant, professional, and calming aesthetic, evoking the quiet majesty of urban twilight. The blues offer versatility for both primary elements and subtle accents, ensuring visual harmony.

Best used for

Corporate websites and professional services branding
Luxury brand digital presence
Financial technology (FinTech) applications
Educational platforms and e-learning interfaces
Modern architectural visualizations or real estate
Serene meditation or wellness apps

Suggested color roles

primary

#0A1931 - A deep, authoritative navy, perfect for main backgrounds, headers, or foundational elements, providing a strong, elegant base.

secondary

#213B6B - A rich, medium-dark blue, suitable for navigation, sidebars, or prominent containers, offering depth and sophistication.

accent

#426AA3 - A balanced, accessible blue, excellent for interactive elements, call-to-actions, or informative graphics to draw attention gently.

background

#ADC8EB - A soft, ethereal light blue, ideal for content areas, cards, or hero sections, providing a clean and spacious feel.

text

#ADC8EB on dark blues like #0A1931, or a very dark charcoal or black on #ADC8EB for maximum readability.

Accessibility notes

Text in #0A1931 or #213B6B on #ADC8EB provides strong contrast for readability.
Ensure sufficient contrast when using #779ED0 or #426AA3 for text, especially on lighter backgrounds.
This palette offers a good range of blues for accessible light-on-dark or dark-on-light combinations.
For interactive elements, use #426AA3 or #213B6B against #ADC8EB for clear visual cues.

Recommended combinations

Deep Horizon

Classic and professional website layouts, main content blocks, or branding.

#0A1931 · #426AA3 · #ADC8EB

Twilight Mist

Subtle gradients, background patterns, or card components for a soft, modern feel.

#213B6B · #779ED0 · #ADC8EB

Skyline Glow

Navigation bars, footer designs, or accenting important information in a dark theme.

#0A1931 · #779ED0 · #213B6B

CSS variables

:root {
  --urban-night-skyline-1: #0A1931;
  --urban-night-skyline-2: #213B6B;
  --urban-night-skyline-3: #426AA3;
  --urban-night-skyline-4: #779ED0;
  --urban-night-skyline-5: #ADC8EB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-night-skyline": {
        1: "#0A1931",
        2: "#213B6B",
        3: "#426AA3",
        4: "#779ED0",
        5: "#ADC8EB",
      }
    }
  }
}

Hex values

Color 1#0A1931

Color 2#213B6B

Color 3#426AA3

Color 4#779ED0

Color 5#ADC8EB

Accessibility

Contrast checker

1.6:1Fail

3.2:1AA18

6.3:1AA

10.2:1AAA

1.6:1Fail

2:1Fail

4:1AA18

6.4:1AA

3.2:1AA18

2:1Fail

3.2:1AA18

6.3:1AA

4:1AA18

2:1Fail

1.6:1Fail

10.2:1AAA

6.4:1AA

3.2:1AA18

1.6:1Fail

Similar palettes

More like Urban Night Skyline

Urban Night Skyline

See it in context.

Ready when you are.

Built with Urban Night Skyline.

How to use Urban Night Skyline

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Horizon

Twilight Mist

Skyline Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Urban Night Skyline