Back to palettes

Palette

Midnight Urban Gleam

Dark, sophisticated blues and greys pierced by a sharp gleam of metallic gold, like city lights at night.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A2C3C#3B4A5C#6C8092#ADC0D0#FFD700

Palette guide

How to use Midnight Urban Gleam

Overview

The Midnight Urban Gleam palette exudes sophistication, combining dark, cool blues and greys with a striking metallic gold accent, reminiscent of city lights at night. Featuring the elegant #1A2C3C and the luminous #FFD700, this palette is designed for projects that demand luxury, modernity, and a polished aesthetic. The subtle transitions between #3B4A5C and #6C8092 provide depth, while #ADC0D0 offers a lighter touch, making it ideal for high-end branding, sophisticated UI, or premium product showcases.

Best used for

  • Luxury real estate websites
  • High-end fashion e-commerce
  • Financial services branding
  • Sophisticated user interfaces
  • Premium product showcases
  • Elegant event invitations

Suggested color roles

primary

Use #1A2C3C as the deepest, most sophisticated background color, setting an elegant and modern tone.

secondary

Apply #3B4A5C for supporting content, card backgrounds, or subtle overlays, providing depth and refinement.

accent

Highlight key information, calls to action, or decorative elements with #FFD700, offering a luxurious and eye-catching gleam.

background

Employ #1A2C3C as the primary canvas for a truly dark, elegant, and sophisticated urban theme.

text

For optimal legibility on dark backgrounds, use #ADC0D0 for primary text. #FFD700 can be used for key headings or prominent calls to action to add a touch of luxury.

Accessibility notes

  • Ensure #ADC0D0 provides sufficient contrast against #1A2C3C for all text to meet WCAG AA standards.
  • Test #FFD700 for contrast when used as text on darker blues like #1A2C3C; it typically requires larger font sizes or very specific pairings.
  • Avoid using mid-tones like #3B4A5C or #6C8092 for small body text on the darkest backgrounds.
  • For interactive elements, ensure the gold accent offers clear visual feedback and strong contrast.

Recommended combinations

Urban Base

Forms a deep, sophisticated blue-grey foundation for backgrounds and primary content, establishing an elegant urban feel.

#1A2C3C · #3B4A5C · #6C8092

Gleam Contrast

Perfect for creating strong visual hierarchy with a luxurious gold accent and clear text against a profound dark backdrop.

#1A2C3C · #FFD700 · #ADC0D0

Sophisticated Blend

Ideal for gradients, layered effects, or graphical elements that require a smooth transition of cool blues and greys.

#3B4A5C · #6C8092 · #ADC0D0

CSS variables

:root {
  --midnight-urban-gleam-1: #1A2C3C;
  --midnight-urban-gleam-2: #3B4A5C;
  --midnight-urban-gleam-3: #6C8092;
  --midnight-urban-gleam-4: #ADC0D0;
  --midnight-urban-gleam-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-urban-gleam": {
        1: "#1A2C3C",
        2: "#3B4A5C",
        3: "#6C8092",
        4: "#ADC0D0",
        5: "#FFD700",
      }
    }
  }
}

Related searches

dark blue gold palettesophisticated city colorsurban night luxuryelegant dark modepremium UI colors

Palette colors

Hex values

Color 1#1A2C3C
·
Color 2#3B4A5C
·
Color 3#6C8092
·
Color 4#ADC0D0
·
Color 5#FFD700
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.5:1AA18
7.6:1AAA
10.2:1AAA
2
1.6:1Fail
2.2:1Fail
4.8:1AA
6.5:1AA
3
3.5:1AA18
2.2:1Fail
2.2:1Fail
2.9:1Fail
4
7.6:1AAA
4.8:1AA
2.2:1Fail
1.3:1Fail
5
10.2:1AAA
6.5:1AA
2.9:1Fail
1.3:1Fail

Similar palettes

More like Midnight Urban Gleam

View all cool