Back to palettes

Palette

Urban Night Glow

The electrifying glow of city lights against the dark urban backdrop, full of mystery and energy.

darkenergetic5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A0A#1C1C1C#FF00FF#00FFFF#FFFF00

Palette guide

How to use Urban Night Glow

Overview

The Urban Night Glow palette captures the electrifying glow of city lights against a dark urban backdrop, full of mystery and energy. It establishes a strong foundation with two deep, dark greys, #0A0A0A and #1C1C1C, creating an immersive night-time atmosphere. Against this profound darkness, three classic and intensely vibrant neons burst forth: #FF00FF (magenta), #00FFFF (cyan), and #FFFF00 (yellow). This palette is an ideal choice for designers aiming to create high-impact, energetic, and modern designs, perfect for digital interfaces, event promotions, or any project that demands a bold and dynamic visual statement that truly glows.

Best used for

  • Interactive display interfaces
  • Gaming UI and menus
  • Music event promotions
  • Futuristic tech branding
  • Dark mode web applications
  • Digital art and animations

Suggested color roles

primary

Use #00FFFF for primary calls-to-action or key navigational elements, providing a clear, high-tech glow.

secondary

Employ #FF00FF as a secondary accent for interactive components or to add a powerful, energetic punch.

accent

Apply #FFFF00 for critical highlights, warnings, or to add a distinct pop that draws immediate attention.

background

Utilize #0A0A0A for the main background, ensuring maximum contrast and allowing the neon colors to radiate.

text

For primary text, white or a very light grey is recommended on #0A0A0A. For headlines, #00FFFF or #FF00FF are highly impactful.

Accessibility notes

  • The neon colors (#FF00FF, #00FFFF, #FFFF00) offer excellent contrast against #0A0A0A and #1C1C1C for large text and UI elements.
  • Ensure white or very light grey text is used on #0A0A0A for optimal readability of body text.
  • Avoid using #FFFF00 for small body text as its high luminosity might cause visual fatigue for some users.
  • Consider using a thicker font weight for text in #00FFFF or #FF00FF to enhance legibility against dark backgrounds.

Recommended combinations

Night Base

Ideal for dark mode interfaces, showcasing vibrant interactive elements against a deep, solid grey.

#0A0A0A · #00FFFF · #FF00FF

Dynamic Glow

Great for secondary sections or decorative elements, adding a vibrant pop against a slightly lighter dark tone.

#1C1C1C · #FFFF00 · #FF00FF

Full Spectrum

Apply for headers, hero images, or animated elements where maximum visual punch and multi-color vibrancy are needed.

#0A0A0A · #00FFFF · #FFFF00

CSS variables

:root {
  --urban-night-glow-1: #0A0A0A;
  --urban-night-glow-2: #1C1C1C;
  --urban-night-glow-3: #FF00FF;
  --urban-night-glow-4: #00FFFF;
  --urban-night-glow-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-night-glow": {
        1: "#0A0A0A",
        2: "#1C1C1C",
        3: "#FF00FF",
        4: "#00FFFF",
        5: "#FFFF00",
      }
    }
  }
}

Related searches

dark neon color schemeurban glow palettevibrant night themeelectric city colorshigh contrast dark mode

Palette colors

Hex values

Color 1#0A0A0A
·
Color 2#1C1C1C
·
Color 3#FF00FF
·
Color 4#00FFFF
·
Color 5#FFFF00
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
6.3:1AA
15.8:1AAA
18.4:1AAA
2
1.2:1Fail
5.4:1AA
13.6:1AAA
15.9:1AAA
3
6.3:1AA
5.4:1AA
2.5:1Fail
2.9:1Fail
4
15.8:1AAA
13.6:1AAA
2.5:1Fail
1.2:1Fail
5
18.4:1AAA
15.9:1AAA
2.9:1Fail
1.2:1Fail

Similar palettes

More like Urban Night Glow

View all dark
Midnight City Glare
Neon Alley Flicker
Urban Neon Twilight
Carnival Midnight Sky
Cyberpunk Cityscape
Cyberpunk Metropolis