Palette

Urban Neon Echo

Capturing the pulsating, synthetic glow of a modern city at night, full of digital energy.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00F5D4#F72585#3A0CA3#7209B7#1A0033

Palette guide

How to use Urban Neon Echo

Overview

The Urban Neon Echo palette captures the raw energy of a futuristic cityscape, ideal for projects demanding a bold, electric aesthetic. Featuring vibrant neons like the striking teal #00F5D4 and the intense fuchsia #F72585, balanced by deep, mystical purples such as #3A0CA3 and #7209B7, and grounded by the near-black #1A0033. This combination provides high contrast and a dynamic visual experience. Designers can leverage its pulsating glow for digital interfaces, event branding, or any design needing an energetic, modern edge with a touch of cyber-punk sophistication. It's a palette designed to make an impact.

Best used for

Gaming UI and UX
Music festival branding
Futuristic tech product design
Digital art and illustrations
Event posters and flyers
Nightclub or bar aesthetics

Suggested color roles

primary

Use #00F5D4 as a primary accent for interactive elements or key visual highlights, offering a refreshing pop.

secondary

Employ #F72585 for secondary calls-to-action or to introduce dynamic contrast against the teal, creating a vibrant tension.

accent

Apply #7209B7 as a rich, deep accent for subheadings or subtle decorative elements, adding depth without overpowering.

background

Utilize #1A0033 for dark, immersive backgrounds, allowing the neon colors to truly glow and command attention.

text

For primary text on dark backgrounds, a bright white or light grey is recommended. For highlighted text, use #00F5D4 or #F72585 against #1A0033.

Accessibility notes

Ensure sufficient contrast when pairing #00F5D4 or #F72585 with #1A0033 for text, as these neons have high luminance.
Avoid using #3A0CA3 or #7209B7 for small text against #1A0033 without checking WCAG contrast ratios.
Use white or very light grey text on #1A0033 for optimal readability.
Consider larger font sizes or bolding for text in #3A0CA3 or #7209B7 to improve legibility against darker backgrounds.

Recommended combinations

Cyber Glow

Ideal for hero sections, splash screens, or bold headlines where a dark base emphasizes glowing neons.

#1A0033 · #00F5D4 · #F72585

Mystic Depth

Great for secondary content blocks or subtle graphic elements, providing depth with a vibrant touch.

#3A0CA3 · #7209B7 · #00F5D4

Electric Punch

Effective for call-to-action buttons or interactive elements, creating urgency and visual interest.

#1A0033 · #F72585 · #7209B7

CSS variables

:root {
  --urban-neon-echo-1: #00F5D4;
  --urban-neon-echo-2: #F72585;
  --urban-neon-echo-3: #3A0CA3;
  --urban-neon-echo-4: #7209B7;
  --urban-neon-echo-5: #1A0033;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-neon-echo": {
        1: "#00F5D4",
        2: "#F72585",
        3: "#3A0CA3",
        4: "#7209B7",
        5: "#1A0033",
      }
    }
  }
}

Hex values

Color 1#00F5D4

Color 2#F72585

Color 3#3A0CA3

Color 4#7209B7

Color 5#1A0033

Accessibility

Contrast checker

2.7:1Fail

8.5:1AAA

6.2:1AA

13.8:1AAA

2.7:1Fail

3.2:1AA18

2.3:1Fail

5.1:1AA

8.5:1AAA

3.2:1AA18

1.4:1Fail

1.6:1Fail

6.2:1AA

2.3:1Fail

1.4:1Fail

2.2:1Fail

13.8:1AAA

5.1:1AA

1.6:1Fail

2.2:1Fail

Similar palettes

More like Urban Neon Echo

View all vibrant

Cyber City Haze

Cybernetic Glitch Flow

Cybernetic Pulse Beat

Cybernetic Street Grid

Cyberpunk Neon Blur

Cyberpunk Sunset