Palette

Urban Neon Glow

Electrifying shades inspired by the dynamic and pulsating energy of a city at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F0A0A#FF3366#33CCFF#99FF33#FFCC00

Palette guide

How to use Urban Neon Glow

Overview

The Urban Neon Glow palette is an electrifying collection that captures the dynamic and pulsating energy of a city at night. Anchored by a deep, almost black #0F0A0A, it features a dazzling array of neon lights: a fiery #FF3366 (hot pink), a cool #33CCFF (sky blue), a vibrant #99FF33 (lime green), and a luminous #FFCC00 (bright orange). This palette is perfect for designers looking to infuse projects with a modern, futuristic, and highly energetic vibe. It excels in creating high-contrast designs that truly glow, making it suitable for digital interfaces, event promotions, or any medium requiring a bold visual statement.

Best used for

Mobile app interfaces
Event promotion and flyers
Concert visuals and stage design
Youth-focused brand identity
Interactive display graphics
Social media campaign visuals

Suggested color roles

primary

Use #33CCFF for primary interactive elements or key information, offering a clean, bright, and modern feel.

secondary

Employ #FF3366 as a secondary accent for calls-to-action or to introduce a warm, energetic contrast.

accent

Apply #99FF33 or #FFCC00 for specific highlights, alerts, or to add unique visual interest to components.

background

Utilize #0F0A0A for a profound dark background, ensuring the neon colors shine with maximum intensity.

text

For general body text, white or a very light grey is recommended on #0F0A0A. For headlines, #33CCFF or #FF3366 are impactful.

Accessibility notes

All neon colors (#FF3366, #33CCFF, #99FF33, #FFCC00) offer excellent contrast against the dark #0F0A0A for large text and UI elements.
Ensure white or very light grey text is used on #0F0A0A for optimal readability of body text.
Avoid using #99FF33 or #FFCC00 for small body text as their high luminosity might cause visual fatigue for some users.
Consider using a slightly larger font size or bolding for text set in any of the bright neon colors to enhance legibility.

Recommended combinations

Night City

Ideal for dark mode themes, offering a classic neon contrast for UI elements and branding.

#0F0A0A · #33CCFF · #FF3366

Electric Burst

Great for dynamic highlights, warnings, or interactive elements that need to stand out vibrantly.

#0F0A0A · #99FF33 · #FFCC00

Vibrant Spectrum

Apply for striking graphics, illustrations, or headers where a full range of bright neons is desired.

#33CCFF · #FF3366 · #99FF33

CSS variables

:root {
  --urban-neon-glow-1: #0F0A0A;
  --urban-neon-glow-2: #FF3366;
  --urban-neon-glow-3: #33CCFF;
  --urban-neon-glow-4: #99FF33;
  --urban-neon-glow-5: #FFCC00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-neon-glow": {
        1: "#0F0A0A",
        2: "#FF3366",
        3: "#33CCFF",
        4: "#99FF33",
        5: "#FFCC00",
      }
    }
  }
}

Hex values

Color 1#0F0A0A

Color 2#FF3366

Color 3#33CCFF

Color 4#99FF33

Color 5#FFCC00

Accessibility

Contrast checker

5.5:1AA

10.5:1AAA

15.6:1AAA

13:1AAA

5.5:1AA

1.9:1Fail

2.8:1Fail

2.3:1Fail

10.5:1AAA

1.9:1Fail

1.5:1Fail

1.2:1Fail

15.6:1AAA

2.8:1Fail

1.5:1Fail

1.2:1Fail

13:1AAA

2.3:1Fail

1.2:1Fail

Similar palettes

More like Urban Neon Glow

Urban Neon Glow

See it in context.

Ready when you are.

Built with Urban Neon Glow.

How to use Urban Neon Glow

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Night City

Electric Burst

Vibrant Spectrum

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Urban Neon Glow