Palette

Urban Twilight Veil

Cool blues and greys depicting the subtle transition from evening to night in a city.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A2B3A#3B4E63#627B94#97B1C7#C9DFEE

Palette guide

How to use Urban Twilight Veil

Overview

The "Urban Twilight Veil" palette masterfully captures the subtle, cool transition from evening to night in a bustling city. It begins with the deep, mysterious dark blue #1A2B3A, setting a sophisticated tone. This transitions smoothly through mid-tones like the rich slate blue #3B4E63 and a balanced blue-gray #627B94, reminiscent of distant city lights and shadows. The palette lightens with an airy light blue-gray #97B1C7, culminating in the serene, almost misty pale blue #C9DFEE. This scheme is ideal for designs seeking a calming, modern, and slightly melancholic urban aesthetic, perfect for conveying depth and tranquility for designers and developers.

Best used for

Corporate annual reports (professional, calm)
Luxury automotive branding
Software UI/UX (dark mode themes)
Documentaries or abstract art
Modern interior design concepts
Winter-themed digital campaigns

Suggested color roles

primary

Use #1A2B3A as a deep, foundational color for backgrounds or main branding elements.

secondary

Apply #3B4E63 for supporting elements, large text on lighter backgrounds, or secondary sections.

accent

Utilize #97B1C7 for subtle highlights, interactive elements, or graphical accents.

background

Employ #C9DFEE as a light, airy content area for readability, creating a sense of openness.

text

Use #627B94 for readable body text on lighter backgrounds, or a clean white for text on #1A2B3A or #3B4E63.

Accessibility notes

#627B94 on #C9DFEE will need careful contrast checking for small text; consider darkening the text.
White text on #1A2B3A and #3B4E63 offers excellent readability, suitable for prominent text.
#97B1C7 is best for larger text or accents on #C9DFEE, not for small body text.
Ensure all text contrasts sufficiently with its background, especially for #3B4E63 on #627B94.

Recommended combinations

Nightfall Depth

Strong dark base with clean, contrasting light elements, ideal for headers or footers.

#1A2B3A · #3B4E63 · #C9DFEE

Sky Gradient

Smooth, atmospheric gradients for headers or visual elements, evoking twilight.

#3B4E63 · #627B94 · #97B1C7

Soft Contrast

Light, inviting background with clear, darker text and a deep anchor for balance.

#C9DFEE · #627B94 · #1A2B3A

CSS variables

:root {
  --urban-twilight-veil-1: #1A2B3A;
  --urban-twilight-veil-2: #3B4E63;
  --urban-twilight-veil-3: #627B94;
  --urban-twilight-veil-4: #97B1C7;
  --urban-twilight-veil-5: #C9DFEE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-twilight-veil": {
        1: "#1A2B3A",
        2: "#3B4E63",
        3: "#627B94",
        4: "#97B1C7",
        5: "#C9DFEE",
      }
    }
  }
}

Hex values

Color 1#1A2B3A

Color 2#3B4E63

Color 3#627B94

Color 4#97B1C7

Color 5#C9DFEE

Accessibility

Contrast checker

1.7:1Fail

3.3:1AA18

6.5:1AA

10.5:1AAA

1.7:1Fail

1.9:1Fail

3.8:1AA18

6.2:1AA

3.3:1AA18

1.9:1Fail

2:1Fail

3.2:1AA18

6.5:1AA

3.8:1AA18

2:1Fail

1.6:1Fail

10.5:1AAA

6.2:1AA

3.2:1AA18

1.6:1Fail

Similar palettes

More like Urban Twilight Veil

Twilight Metropolis Blue

Abyssal Current Glide

Bioluminescent Abyss