Palette

Twilight Urban Gleam

A sophisticated blend of cool blues, muted purples, and deep greys, evoking the atmospheric calm of a city at dusk.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Twilight Urban Gleam 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 Twilight Urban Gleam.

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

Data visualization

#1E2A40#3D4A62#5A6E8A#8C9CBC#C0B3E1

Palette guide

How to use Twilight Urban Gleam

Overview

The "Twilight Urban Gleam" palette offers a sophisticated blend of cool blues, muted purples, and deep grays, capturing the atmospheric calm of a city at dusk. It features a profound, almost indigo blue (#1E2A40) as its anchor, transitioning through a rich slate-blue (#3D4A62) and a balanced medium blue-grey (#5A6E8A). The palette introduces a distinctive, soft lavender-grey (#C0B3E1) as a unique accent, complemented by a light cool grey (#8C9CBC). This combination provides designers and developers with a versatile set for creating elegant, modern, and slightly mystical interfaces or branding that evoke an upscale urban feel.

Best used for

High-end urban lifestyle brands
Creative portfolio websites
Modern tech company branding
Sophisticated mobile applications
Event promotions with an evening theme
Digital art and illustration

Suggested color roles

primary

Use #1E2A40 (Deep Indigo Blue) for foundational elements, dark mode backgrounds, or headers, establishing a strong, elegant presence.

secondary

Apply #3D4A62 (Rich Slate Blue) for prominent sections, navigation, or card backgrounds, offering depth and visual structure.

accent

Employ #C0B3E1 (Soft Lavender-Grey) as a unique, sophisticated highlight for interactive elements, call-to-action buttons, or subtle decorative touches.

background

Utilize #1E2A40 to provide a luxurious, immersive dark background. Alternatively, #8C9CBC for a lighter, clean canvas.

text

For primary body text on darker backgrounds like #1E2A40 or #3D4A62, use #C0B3E1 or #8C9CBC to ensure good contrast.

Accessibility notes

Ensure #C0B3E1 and #8C9CBC provide adequate contrast when used for text on #1E2A40 or #3D4A62.
Avoid using #5A6E8A for small text on #3D4A62 due to insufficient contrast.
For a clean, accessible light background, use #8C9CBC with #1E2A40 for text.
Always verify contrast ratios, especially for the unique purple-grey accent, to ensure readability across all elements.

Recommended combinations

Urban Night

Perfect for dark-themed websites, with the lavender-grey as striking text and the slate blue for secondary elements.

#1E2A40 · #C0B3E1 · #3D4A62

Gleaming Path

Ideal for layered UI components, using the lighter grey for content areas and the mid-tone for subtle borders.

#3D4A62 · #8C9CBC · #5A6E8A

Twilight Highlight

Good for call-to-action sections, where the deep blue grounds, the mid-blue-grey defines, and lavender-grey accents.

#1E2A40 · #5A6E8A · #C0B3E1

CSS variables

:root {
  --twilight-urban-gleam-1: #1E2A40;
  --twilight-urban-gleam-2: #3D4A62;
  --twilight-urban-gleam-3: #5A6E8A;
  --twilight-urban-gleam-4: #8C9CBC;
  --twilight-urban-gleam-5: #C0B3E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-urban-gleam": {
        1: "#1E2A40",
        2: "#3D4A62",
        3: "#5A6E8A",
        4: "#8C9CBC",
        5: "#C0B3E1",
      }
    }
  }
}

Hex values

Color 1#1E2A40

Color 2#3D4A62

Color 3#5A6E8A

Color 4#8C9CBC

Color 5#C0B3E1

Accessibility

Contrast checker

1.6:1Fail

2.8:1Fail

5.2:1AA

7.4:1AAA

1.6:1Fail

1.7:1Fail

3.2:1AA18

4.6:1AA

2.8:1Fail

1.7:1Fail

1.9:1Fail

2.7:1Fail

5.2:1AA

3.2:1AA18

1.9:1Fail

1.4:1Fail

7.4:1AAA

4.6:1AA

2.7:1Fail

1.4:1Fail

Similar palettes

More like Twilight Urban Gleam

View all cool

Cityscape Nocturne Blue

Nocturnal Ocean Gleam

Venetian Canal Mist

Winter Aurora Whisper

Aurora Horizon Whisper

Cityscape Twilight Azure