Palette

Neon Alley Surge

A jolt of electric colors reminiscent of glowing signs in a futuristic city alley at dusk.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neon Alley Surge 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 Neon Alley Surge.

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

Data visualization

#301E67#7B2A95#EF476F#FFD166#06D6A0

Palette guide

How to use Neon Alley Surge

Overview

The "Neon Alley Surge" palette offers a sophisticated take on the urban electric aesthetic, blending deep, rich tones with vibrant, modern neons. It features a profound dark indigo (#301E67), a striking deep purple (#7B2A95), a lively coral pink (#EF476F), a warm golden yellow (#FFD166), and a refreshing teal (#06D6A0). This palette is perfect for designers and developers seeking to create a contemporary, energetic feel without the harshness of pure neons. These hex codes are ideal for distinctive branding, engaging UI elements, and digital experiences that require a balance of depth, warmth, and modern vibrancy.

Best used for

Modern tech branding and app design
Creative agency websites
Contemporary art installations
Fashion and lifestyle digital content
Interactive data visualizations
Event branding with a sophisticated edge

Suggested color roles

primary

#301E67 (Profound Dark Indigo) - The grounding, sophisticated background color that provides depth and contrast.

secondary

#7B2A95 (Striking Deep Purple) - Excellent for secondary sections, larger interactive areas, or subtle brand accents.

accent

#EF476F (Lively Coral Pink) - Use for calls-to-action, important notifications, or elements needing a warm, energetic pop.

background

#301E67 (Profound Dark Indigo) - The main backdrop, giving a rich, nocturnal base for the brighter colors.

text

#FFD166 (Warm Golden Yellow) or white - For headings and prominent text; a light gray or near-white for body copy on dark backgrounds.

Accessibility notes

Ensure #FFD166 (Golden Yellow) and #06D6A0 (Teal) have sufficient contrast when used for text against #301E67 or #7B2A95 backgrounds.
Avoid using #EF476F (Coral Pink) for small text on #7B2A95, as contrast may be insufficient.
Always use a contrast checker to ensure WCAG AA compliance for all text and interactive elements.
Consider providing alternatives for color-coded information, especially given the range of hues.

Recommended combinations

Urban Depth

Creates a sophisticated dark theme with a warm, inviting pop for interactive elements.

#301E67 · #7B2A95 · #EF476F

Modern Glow

Ideal for dynamic data visualizations or to highlight key information with a fresh, modern feel.

#7B2A95 · #FFD166 · #06D6A0

Dusk Surge

A striking combination for brand accents or header designs, balancing depth with vibrant energy.

#301E67 · #EF476F · #06D6A0

CSS variables

:root {
  --neon-alley-surge-5-1: #301E67;
  --neon-alley-surge-5-2: #7B2A95;
  --neon-alley-surge-5-3: #EF476F;
  --neon-alley-surge-5-4: #FFD166;
  --neon-alley-surge-5-5: #06D6A0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-alley-surge-5": {
        1: "#301E67",
        2: "#7B2A95",
        3: "#EF476F",
        4: "#FFD166",
        5: "#06D6A0",
      }
    }
  }
}

Hex values

Color 1#301E67

Color 2#7B2A95

Color 3#EF476F

Color 4#FFD166

Color 5#06D6A0

Accessibility

Contrast checker

1.7:1Fail

3.8:1AA18

9.7:1AAA

7.4:1AAA

1.7:1Fail

2.2:1Fail

5.6:1AA

4.3:1AA18

3.8:1AA18

2.2:1Fail

2.5:1Fail

1.9:1Fail

9.7:1AAA

5.6:1AA

2.5:1Fail

1.3:1Fail

7.4:1AAA

4.3:1AA18

1.9:1Fail

1.3:1Fail

Similar palettes

More like Neon Alley Surge