Palette

Neon City Glow

A high-energy blend of electric neons and deep purples, perfect for a futuristic city vibe.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F8E44F#EF7F2F#EB3F69#8D2FEA#2E0F4C

Palette guide

How to use Neon City Glow

Overview

The Neon City Glow palette offers a high-energy blend of electric neons and deep purples, perfect for evoking a futuristic city vibe with a retro twist. Featuring #F8E44F (bright yellow), #EF7F2F (vibrant orange), #EB3F69 (hot pink), #8D2FEA (electric purple), and a profound #2E0F4C (dark purple) base, this scheme is dynamic and captivating. Designers can leverage these rich, saturated hues to craft immersive digital experiences, compelling branding, or striking visual content that pulsates with energetic charm. It's an excellent choice for projects requiring a bold, imaginative, and slightly mysterious aesthetic.

Best used for

Retro-futuristic gaming interfaces and art
Cyberpunk themed illustrations and animations
Nightclub or music festival branding
Vibrant event posters and digital advertisements
Creative app interfaces and landing pages
Fashion and lifestyle brands with an edgy aesthetic

Suggested color roles

primary

Use #8D2FEA (Electric Purple) as a dominant, mysterious base for large sections or primary navigation, setting a futuristic tone.

secondary

Employ #EB3F69 (Hot Pink) for energetic accents, secondary interactive elements, or to add a warm, inviting glow.

accent

Apply #F8E44F (Bright Yellow) for highest visibility elements like call-to-action buttons, critical alerts, or intense highlights.

background

Utilize #2E0F4C (Dark Purple) as the deep, rich background color to make the brighter neons truly pop and create depth.

text

For headlines, use #F8E44F or #EF7F2F. For body text, a clean white or light gray provides optimal readability against the dark purple.

Accessibility notes

Ensure sufficient contrast between all vibrant colors and #2E0F4C; most will meet WCAG AA standards.
Be cautious when using #EF7F2F and #EB3F69 in close proximity for text, as their contrast might be insufficient for some users.
For body text, use a very light, neutral color like white or off-white on the #2E0F4C background.
Test color combinations for readability, especially for users with color vision deficiencies, particularly between warm tones.

Recommended combinations

Deep Urban Glow

Ideal for main UI themes, large background sections, and primary interactive elements in a dark mode application.

#2E0F4C · #8D2FEA · #EB3F69

Energetic Highlight

Perfect for high-impact call-to-action buttons, urgent notifications, and dynamic banners.

#F8E44F · #EF7F2F · #2E0F4C

Retro Sunset

Excellent for vibrant graphic elements, playful headers, or illustrations that evoke a retro synthwave feel.

#EB3F69 · #EF7F2F · #8D2FEA

CSS variables

:root {
  --neon-city-glow-1: #F8E44F;
  --neon-city-glow-2: #EF7F2F;
  --neon-city-glow-3: #EB3F69;
  --neon-city-glow-4: #8D2FEA;
  --neon-city-glow-5: #2E0F4C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-city-glow": {
        1: "#F8E44F",
        2: "#EF7F2F",
        3: "#EB3F69",
        4: "#8D2FEA",
        5: "#2E0F4C",
      }
    }
  }
}

Hex values

Color 1#F8E44F

Color 2#EF7F2F

Color 3#EB3F69

Color 4#8D2FEA

Color 5#2E0F4C

Accessibility

Contrast checker

2.1:1Fail

3:1Fail

4.3:1AA18

12.6:1AAA

2.1:1Fail

1.4:1Fail

2.1:1Fail

6:1AA

3:1Fail

1.4:1Fail

1.5:1Fail

4.2:1AA18

4.3:1AA18

2.1:1Fail

1.5:1Fail

2.9:1Fail

12.6:1AAA

6:1AA

4.2:1AA18

2.9:1Fail

Similar palettes

More like Neon City Glow

Neon City Glow

See it in context.

Ready when you are.

Built with Neon City Glow.

How to use Neon City Glow

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Urban Glow

Energetic Highlight

Retro Sunset

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Neon City Glow