Back to palettes

Palette

Metropolis Midnight Shine

Reflecting the cool, dark sophistication of a city skyline under a moonless night.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Metropolis Midnight Shine 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 Metropolis Midnight Shine.

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

Data visualization

#1A1A2E#283C63#465F8D#708090#D3D3D3

Palette guide

How to use Metropolis Midnight Shine

Overview

The Metropolis Midnight Shine palette evokes the cool, dark sophistication of a city skyline at night. Featuring deep, moody blues and subtle greys, this collection is perfect for projects requiring an elegant and modern aesthetic. Key colors include the profound base of #1A1A2E, the supportive mid-tone blue-grey #465F8D, and the crisp contrast of #D3D3D3. Designers and developers can leverage this palette to create immersive dark mode interfaces, upscale branding, and designs that exude a refined, urban feel, balancing depth with clear readability and subtle highlights.

Best used for

  • Luxury branding and corporate websites
  • Dark mode UI/UX design for tech applications
  • Sophisticated event and entertainment marketing
  • Architectural visualization and urban planning presentations
  • E-commerce platforms for high-end products
  • Digital art and photography portfolios

Suggested color roles

primary

#1A1A2E - A deep, foundational blue-black, ideal for backgrounds, main panels, or dominant brand elements where sophistication is key.

secondary

#283C63 - A rich, supportive blue-grey, perfect for secondary navigation, card backgrounds, or distinct content sections.

accent

#465F8D - A muted yet distinct blue, excellent for calls to action, interactive elements, or subtle graphic highlights.

background

#1A1A2E or #283C63 - Provides a dark, elegant canvas, creating depth and a premium feel for any digital or print design.

text

#D3D3D3 - A light, near-white grey that offers strong readability against the darker blues, ensuring clarity for primary text.

Accessibility notes

  • Ensure #D3D3D3 text on #1A1A2E or #283C63 backgrounds meets WCAG AA or AAA contrast standards.
  • Use #708090 for secondary text or less critical information, but verify its contrast against darker backgrounds.
  • Avoid using #1A1A2E text on #283C63 backgrounds due to insufficient contrast for readability.
  • Test all interactive elements, like buttons or links, to ensure they have clear visual distinction and hover states.

Recommended combinations

Urban Glow

A classic dark theme with a vibrant accent and clear, readable text.

#1A1A2E · #465F8D · #D3D3D3

Night Sky

A softer dark combination, ideal for secondary pages or subtle data visualization.

#283C63 · #708090 · #D3D3D3

Subtle Depth

Layering dark blues for a monochromatic, sophisticated and immersive effect without harsh contrasts.

#1A1A2E · #283C63 · #465F8D

CSS variables

:root {
  --metropolis-midnight-shine-1: #1A1A2E;
  --metropolis-midnight-shine-2: #283C63;
  --metropolis-midnight-shine-3: #465F8D;
  --metropolis-midnight-shine-4: #708090;
  --metropolis-midnight-shine-5: #D3D3D3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "metropolis-midnight-shine": {
        1: "#1A1A2E",
        2: "#283C63",
        3: "#465F8D",
        4: "#708090",
        5: "#D3D3D3",
      }
    }
  }
}

Related searches

dark mode color palettesophisticated urban colorsnight city aestheticelegant grey blue paletteluxury dark theme

Palette colors

Hex values

Color 1#1A1A2E
·
Color 2#283C63
·
Color 3#465F8D
·
Color 4#708090
·
Color 5#D3D3D3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
4.2:1AA18
11.4:1AAA
2
1.6:1Fail
1.7:1Fail
2.7:1Fail
7.3:1AAA
3
2.7:1Fail
1.7:1Fail
1.6:1Fail
4.3:1AA18
4
4.2:1AA18
2.7:1Fail
1.6:1Fail
2.7:1Fail
5
11.4:1AAA
7.3:1AAA
4.3:1AA18
2.7:1Fail

Similar palettes

More like Metropolis Midnight Shine

View all dark
Cobblestone Alley Night
Art Deco Symmetry
Gala Night Velvet
Midnight Jazz Club
Smoked Whiskey Lounge
Starlight City Glow