Palette

Urban Neon Twilight

The electric glow of a city after dark, with vibrant signs cutting through the deep twilight.

darkenergetic5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Urban Neon Twilight 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 Neon Twilight.

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

Data visualization

#1E002B#3A004D#6B008A#D62828#FC7B00

Palette guide

How to use Urban Neon Twilight

Overview

The Urban Neon Twilight palette captures the electric glow of a city after dark, with vibrant signs cutting through the deep twilight. It’s built on a foundation of rich, dark purples like #1E002B, #3A004D, and #6B008A, evoking a mysterious, sophisticated night sky. Against this deep backdrop, intense neons like the fiery #D62828 (red) and the glowing #FC7B00 (orange) emerge, simulating distant, vivid city lights. This palette is excellent for designers seeking a balance between dark, elegant depth and energetic, eye-catching accents, ideal for luxury nocturnal branding, sophisticated digital interfaces, or compelling event aesthetics.

Best used for

Luxury event invitations
Nightlife venue branding
Dark mode UI for premium apps
Mysterious digital art
Automotive luxury branding
High-end fashion campaigns

Suggested color roles

primary

Use #6B008A as a primary background or for large sections, providing a rich, dark, and elegant base.

secondary

Employ #3A004D for secondary content areas or subtle gradients, adding depth within the dark spectrum.

accent

Apply #D62828 for striking calls-to-action or critical alerts, ensuring high visibility and energy.

background

Utilize #1E002B for the deepest background, creating an immersive, sophisticated canvas for glowing accents.

text

For primary text, a crisp white or light grey is recommended on #1E002B. For accent text, #FC7B00 or #D62828 provide impact.

Accessibility notes

Ensure white or very light grey text is used on #1E002B, #3A004D, and #6B008A for optimal readability.
The bright accents #D62828 and #FC7B00 offer good contrast against all dark purples for larger text and UI elements.
Avoid using #3A004D or #6B008A for small text on #1E002B, as the contrast might be insufficient for some users.
Consider providing a toggle for increased contrast or alternative themes for users with visual impairments.

Recommended combinations

Twilight Glow

Ideal for hero sections or brand logos, creating a sophisticated dark base with a powerful focal point.

#1E002B · #6B008A · #D62828

Urban Flare

Great for interactive elements or data visualizations, providing warmth and energy within the dark theme.

#3A004D · #FC7B00 · #D62828

Deep Night

Effective for backgrounds and subtle gradients, with a glowing accent for status indicators or small icons.

#1E002B · #3A004D · #FC7B00

CSS variables

:root {
  --urban-neon-twilight-1: #1E002B;
  --urban-neon-twilight-2: #3A004D;
  --urban-neon-twilight-3: #6B008A;
  --urban-neon-twilight-4: #D62828;
  --urban-neon-twilight-5: #FC7B00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-neon-twilight": {
        1: "#1E002B",
        2: "#3A004D",
        3: "#6B008A",
        4: "#D62828",
        5: "#FC7B00",
      }
    }
  }
}

Hex values

Color 1#1E002B

Color 2#3A004D

Color 3#6B008A

Color 4#D62828

Color 5#FC7B00

Accessibility

Contrast checker

1.2:1Fail

1.8:1Fail

3.8:1AA18

7.3:1AAA

1.2:1Fail

1.5:1Fail

3.3:1AA18

6.2:1AA

1.8:1Fail

1.5:1Fail

2.1:1Fail

4:1AA18

3.8:1AA18

3.3:1AA18

2.1:1Fail

1.9:1Fail

7.3:1AAA

6.2:1AA

4:1AA18

1.9:1Fail

Similar palettes

More like Urban Neon Twilight

Carnival Midnight Sky