Palette

City After Hours

Deep, atmospheric blues and greys evoke the tranquil and enigmatic mood of a city after dark.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how City After Hours 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 City After Hours.

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

Data visualization

#1A1A2E#283C66#5A6DA0#8FA0C0#C2D2E6

Palette guide

How to use City After Hours

Overview

The City After Hours palette captures the tranquil yet enigmatic mood of an urban landscape at dusk. Featuring deep, atmospheric blues and greys, this collection evokes sophistication and depth. Key colors include the profound #1A1A2E, the rich #283C66, and the contemplative #5A6DA0, gradually lightening to the ethereal #8FA0C0 and the soft #C2D2E6. This palette is exceptionally useful for designers aiming to create an elegant, modern, or mysterious aesthetic. It's perfectly suited for projects that require a sense of calm, professionalism, and understated luxury, reflecting the cool serenity of a city under twilight.

Best used for

Luxury brand websites and packaging
Nightlife and entertainment venue branding
Corporate presentations and annual reports
Tech company interfaces and dashboards
Architectural firm portfolios
High-end fashion editorial layouts

Suggested color roles

primary

Utilize #1A1A2E as a strong, sophisticated primary for backgrounds or main structural elements, providing a deep, anchoring presence.

secondary

Employ #283C66 for secondary panels, navigation, or large typography to introduce depth without losing the overall dark elegance.

accent

Use #5A6DA0 for subtle accents, interactive states, or key information that needs to stand out gently against darker tones.

background

The lighter #C2D2E6 can serve as a clean, cool background for content blocks or light theme sections, offering excellent contrast.

text

Pair the darker shades with crisp white or a very light grey like #C2D2E6 for optimal readability. For lighter backgrounds, use #1A1A2E or a dark charcoal.

Accessibility notes

Ensure sufficient contrast between light text (e.g., white) and dark backgrounds like #1A1A2E and #283C66.
Avoid pairing #8FA0C0 or #C2D2E6 with light text as contrast will be insufficient for readability.
Use #5A6DA0 carefully for text on mid-tone backgrounds; test for WCAG AA compliance.
Prioritize high contrast for interactive elements and essential information, especially against the deeper blues.

Recommended combinations

Deep Twilight

Creates a sophisticated, dark-mode friendly theme ideal for tech interfaces or luxury branding.

#1A1A2E · #283C66 · #C2D2E6

Urban Glow

Perfect for gradients or layered elements that transition from deep shadow to subtle light, conveying depth.

#283C66 · #5A6DA0 · #8FA0C0

Misty Morning

Provides a softer, more ethereal look suitable for intros or subtle background textures with a strong dark anchor.

#8FA0C0 · #C2D2E6 · #1A1A2E

CSS variables

:root {
  --city-after-hours-1: #1A1A2E;
  --city-after-hours-2: #283C66;
  --city-after-hours-3: #5A6DA0;
  --city-after-hours-4: #8FA0C0;
  --city-after-hours-5: #C2D2E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "city-after-hours": {
        1: "#1A1A2E",
        2: "#283C66",
        3: "#5A6DA0",
        4: "#8FA0C0",
        5: "#C2D2E6",
      }
    }
  }
}

Hex values

Color 1#1A1A2E

Color 2#283C66

Color 3#5A6DA0

Color 4#8FA0C0

Color 5#C2D2E6

Accessibility

Contrast checker

1.6:1Fail

3.4:1AA18

6.5:1AA

11.1:1AAA

1.6:1Fail

2.1:1Fail

4.1:1AA18

7.1:1AAA

3.4:1AA18

2.1:1Fail

1.9:1Fail

3.3:1AA18

6.5:1AA

4.1:1AA18

1.9:1Fail

1.7:1Fail

11.1:1AAA

7.1:1AAA

3.3:1AA18

1.7:1Fail

Similar palettes

More like City After Hours

View all dark

Suburban Night Lights