Palette

Twilight Metropolis Blue

A deep progression of blues, capturing the cool, shadowy elegance of a metropolis skyline under a clear night sky.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Twilight Metropolis Blue 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 Metropolis Blue.

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

Data visualization

#0B0F2B#2E3A59#5C7699#99B2D4#DCEAF7

Palette guide

How to use Twilight Metropolis Blue

Overview

The "Twilight Metropolis Blue" palette evokes the sleek, cool elegance of a city skyline at dusk. Anchored by the profound #0B0F2B, a deep midnight blue, it progresses through sophisticated mid-tones like #2E3A59 and #5C7699. The palette brightens with the serene #99B2D4 and culminates in the ethereal #DCEAF7, mirroring the faint glow of city lights against the twilight sky. This versatile collection is ideal for designs aiming for a modern, professional, and slightly futuristic feel. It offers a strong sense of depth and sophistication, making it suitable for corporate branding, tech interfaces, or any project needing a cool, urban aesthetic.

Best used for

Tech company branding
Corporate website design
Modern UI/UX interfaces
Luxury automotive marketing
Nightlife event promotions
Architectural visualization

Suggested color roles

primary

Utilize #0B0F2B for dominant backgrounds or navigation, establishing a strong, professional base.

secondary

#2E3A59 or #5C7699 work well for sub-headers, cards, or secondary navigation, providing depth.

accent

#99B2D4 or #DCEAF7 can highlight calls-to-action, icons, or key data points, creating visual interest.

background

#0B0F2B for a dramatic dark mode; #DCEAF7 for a crisp, airy light background.

text

#DCEAF7 for body text on dark colors like #0B0F2B, or a dark grey/black on lighter shades for contrast.

Accessibility notes

Ensure high contrast for text, especially #DCEAF7 on #0B0F2B.
Avoid using #2E3A59 and #5C7699 for small text if adjacent, due to potential low contrast.
Use #99B2D4 or #DCEAF7 for interactive elements to ensure they stand out.
Provide sufficient contrast between text and background, referring to WCAG guidelines for minimum ratios.

Recommended combinations

Urban Night

Perfect for creating a modern, dark-themed website or application interface.

#0B0F2B · #5C7699 · #DCEAF7

City Glow

Ideal for subtle gradients or layered elements that evoke a soft city glow.

#2E3A59 · #99B2D4 · #DCEAF7

Sleek Professional

Excellent for corporate presentations and branding materials demanding sophistication.

#0B0F2B · #2E3A59 · #99B2D4

CSS variables

:root {
  --twilight-metropolis-blue-1: #0B0F2B;
  --twilight-metropolis-blue-2: #2E3A59;
  --twilight-metropolis-blue-3: #5C7699;
  --twilight-metropolis-blue-4: #99B2D4;
  --twilight-metropolis-blue-5: #DCEAF7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-metropolis-blue": {
        1: "#0B0F2B",
        2: "#2E3A59",
        3: "#5C7699",
        4: "#99B2D4",
        5: "#DCEAF7",
      }
    }
  }
}

Hex values

Color 1#0B0F2B

Color 2#2E3A59

Color 3#5C7699

Color 4#99B2D4

Color 5#DCEAF7

Accessibility

Contrast checker

1.7:1Fail

4:1AA18

8.7:1AAA

15.4:1AAA

1.7:1Fail

2.4:1Fail

5.2:1AA

9.2:1AAA

4:1AA18

2.4:1Fail

2.1:1Fail

3.8:1AA18

8.7:1AAA

5.2:1AA

2.1:1Fail

1.8:1Fail

15.4:1AAA

9.2:1AAA

3.8:1AA18

1.8:1Fail

Similar palettes

More like Twilight Metropolis Blue

Midnight Ocean Trench

Urban Twilight Veil