Back to palettes

Palette

Urban Geometry Night

A sophisticated blend capturing the sleek, reflective surfaces and illuminated signs of a modern city after dusk.

darkelegant5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Geometry Night 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 Geometry Night.

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

Data visualization

#1A202C#2C3E50#5B7A8B#C2DCEF#E0A84D

Palette guide

How to use Urban Geometry Night

Overview

The Urban Geometry Night palette is a sophisticated blend capturing the sleek, reflective surfaces and illuminated signs of a modern city after dusk. It features deep, mysterious blues like #1A202C and #2C3E50, contrasted strikingly with the bright, elegant #E0A84D. This palette is perfect for designers aiming to evoke a sense of modern luxury, mystery, and dynamic energy. Developers will find these hex codes excellent for creating dark-themed user interfaces that are both visually stunning and highly functional. The interplay between the cool, dark blues and the warm, golden accent ensures strong visual hierarchy and captivating points of interest. This palette is highly adaptable for projects requiring an elegant, cutting-edge, and memorable visual identity, from high-tech apps to luxury brand websites.

Best used for

  • Luxury brand websites and apps
  • High-tech product showcases
  • Event promotion (nightlife, galas)
  • Automotive design and marketing
  • Modern architectural visualization
  • Dark mode UI themes for productivity apps

Suggested color roles

primary

Utilize #1A202C for dominant elements like headers, dark mode backgrounds, or hero sections, establishing a deep, luxurious foundation.

secondary

Apply #2C3E50 for subheadings, secondary buttons, or larger content blocks, offering a slightly lighter yet equally sophisticated blue.

accent

Introduce #E0A84D sparingly for call-to-action buttons, interactive states, or key graphic elements to create striking focal points.

background

Employ #1A202C or #2C3E50 for dark, immersive backgrounds, providing a sense of depth and elegance.

text

For optimal readability on dark backgrounds, use #C2DCEF for body text and #E0A84D for headings or important highlights.

Accessibility notes

  • Ensure high contrast for #C2DCEF text on #1A202C background (WCAG AA compliant).
  • Avoid using #5B7A8B for small text on #2C3E50 as contrast may be insufficient.
  • Large text in #E0A84D on #1A202C offers striking readability for headlines.
  • For critical information, always prioritize the lightest colors like #C2DCEF against the darkest, #1A202C.

Recommended combinations

Night Glow

A dramatic combination for main branding, using deep blue for backgrounds, gold for accents, and light blue for text.

#1A202C · #E0A84D · #C2DCEF

Urban Depth

Ideal for creating nuanced dark interfaces, blending various blues for content blocks and subtle gradients.

#2C3E50 · #5B7A8B · #C2DCEF

Dynamic Accent

Emphasizes depth and a vibrant focal point, with the darkest blues for primary areas and the gold for impactful accents.

#1A202C · #2C3E50 · #E0A84D

CSS variables

:root {
  --urban-geometry-night-1: #1A202C;
  --urban-geometry-night-2: #2C3E50;
  --urban-geometry-night-3: #5B7A8B;
  --urban-geometry-night-4: #C2DCEF;
  --urban-geometry-night-5: #E0A84D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-geometry-night": {
        1: "#1A202C",
        2: "#2C3E50",
        3: "#5B7A8B",
        4: "#C2DCEF",
        5: "#E0A84D",
      }
    }
  }
}

Related searches

dark blue gold palettecity night color schemeelegant dark UImodern luxury palettegeometric blue and gold

Palette colors

Hex values

Color 1#1A202C
·
Color 2#2C3E50
·
Color 3#5B7A8B
·
Color 4#C2DCEF
·
Color 5#E0A84D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
3.6:1AA18
11.5:1AAA
7.7:1AAA
2
1.5:1Fail
2.4:1Fail
7.7:1AAA
5.2:1AA
3
3.6:1AA18
2.4:1Fail
3.2:1AA18
2.1:1Fail
4
11.5:1AAA
7.7:1AAA
3.2:1AA18
1.5:1Fail
5
7.7:1AAA
5.2:1AA
2.1:1Fail
1.5:1Fail

Similar palettes

More like Urban Geometry Night

View all dark
Cobblestone Alley Night
Deco Grandeur Noir
Galactic Starlight Veil
Jazz Age Glamour
Metropolis Midnight Shine
Midnight Celestial Bloom