Palette

Urban Neon Flux

Dynamic and sharp, this palette captures the energetic glow of futuristic city lights against a dark backdrop.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0B1A#E62C6E#2FE6C2#6F2AE6#F8F8F8

Palette guide

How to use Urban Neon Flux

Overview

The Urban Neon Flux palette (ID: urban-neon-flux) delivers a dynamic and sharp aesthetic, perfectly capturing the energetic glow of futuristic city lights. Its core features a deep, sophisticated dark background, #0A0B1A, which allows the intense neons—vibrant #E62C6E (fuchsia), electric #2FE6C2 (turquoise), and powerful #6F2AE6 (purple)—to truly pop. A clean #F8F8F8 (near-white) provides essential contrast for text and highlights. This palette is an excellent choice for designers aiming to create high-contrast, modern, and visually striking digital experiences, from web applications to event branding, evoking a sense of cybernetic energy.

Best used for

Web application interfaces
E-sports branding and streaming
Futuristic product launches
Motion graphics and animation
Event marketing materials
Dark mode UI themes

Suggested color roles

primary

Use #2FE6C2 for primary calls-to-action or key information, offering a refreshing and highly visible highlight.

secondary

Employ #E62C6E for secondary interactive elements or to add a vibrant, energetic contrast to the turquoise.

accent

Apply #6F2AE6 as a rich accent for subheadings, data visualizations, or subtle brand elements, adding depth.

background

Utilize #0A0B1A for a deep, immersive dark background, ensuring the neon accents glow intensely.

text

For primary text, #F8F8F8 provides excellent readability on #0A0B1A. Use #2FE6C2 or #E62C6E for highlighted text.

Accessibility notes

Ensure sufficient contrast for #F8F8F8 text on #0A0B1A, which is naturally high but always worth checking.
The neon colors #E62C6E, #2FE6C2, and #6F2AE6 have strong contrast against #0A0B1A for larger text and UI elements.
Avoid using #6F2AE6 for small body text on #0A0B1A without verifying WCAG contrast ratios; it might be too dark.
Reserve #2FE6C2 and #E62C6E for larger text or interactive elements to maximize their visual impact and readability.

Recommended combinations

Core Contrast

Ideal for main content areas, providing clear readability and a vibrant highlight.

#0A0B1A · #2FE6C2 · #F8F8F8

Energetic Duo

Great for dynamic sections or visual elements that require a punchy, yet sophisticated, color scheme.

#0A0B1A · #E62C6E · #6F2AE6

Highlight Focus

Effective for attention-grabbing headings or interactive components against a lighter (near-white) section.

#F8F8F8 · #2FE6C2 · #E62C6E

CSS variables

:root {
  --urban-neon-flux-1: #0A0B1A;
  --urban-neon-flux-2: #E62C6E;
  --urban-neon-flux-3: #2FE6C2;
  --urban-neon-flux-4: #6F2AE6;
  --urban-neon-flux-5: #F8F8F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-neon-flux": {
        1: "#0A0B1A",
        2: "#E62C6E",
        3: "#2FE6C2",
        4: "#6F2AE6",
        5: "#F8F8F8",
      }
    }
  }
}

Hex values

Color 1#0A0B1A

Color 2#E62C6E

Color 3#2FE6C2

Color 4#6F2AE6

Color 5#F8F8F8

Accessibility

Contrast checker

4.6:1AA

12.3:1AAA

2.9:1Fail

18.4:1AAA

4.6:1AA

2.7:1Fail

1.6:1Fail

4:1AA18

12.3:1AAA

2.7:1Fail

4.2:1AA18

1.5:1Fail

2.9:1Fail

1.6:1Fail

4.2:1AA18

6.3:1AA

18.4:1AAA

4:1AA18

1.5:1Fail

6.3:1AA

Similar palettes

More like Urban Neon Flux

View all vibrant

Cyberpunk Alley Light