Palette

Urban Neon Flux

An energetic palette reflecting the dynamic, glowing lights and shadows of a bustling 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 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

#00FFFF#FF00FF#FFFF00#333333#666666

Palette guide

How to use Urban Neon Flux

Overview

The Urban Neon Flux palette (ID: urban-neon-flux-2) offers a classic, high-energy neon aesthetic, perfect for designs that demand immediate attention. It features the iconic trio of #00FFFF (Cyan), #FF00FF (Magenta), and #FFFF00 (Yellow), providing incredibly vibrant focal points. These intense hues are expertly grounded by two practical dark greys, #333333 and #666666, offering essential contrast and versatility. This palette is ideal for creating designs that feel electric, modern, and digitally inspired, allowing for clear hierarchy and striking visual impact in various digital and print applications.

Best used for

Digital signage and displays
Retro-futuristic branding
Event invitations and posters
Gaming interface elements
Music video aesthetics
Website loading screens

Suggested color roles

primary

Use #00FFFF for primary calls-to-action or key navigational elements, offering a bright and clear highlight.

secondary

Employ #FF00FF as a secondary accent for interactive components or to add a powerful, energetic punch.

accent

Apply #FFFF00 for small, critical highlights or warnings, ensuring maximum visibility due to its high luminosity.

background

Utilize #333333 for dark backgrounds, providing a solid, neutral base that makes the neons pop dramatically.

text

For general body text, use a light grey like #666666 or white against #333333. For headlines, #00FFFF or #FF00FF can be striking.

Accessibility notes

The neon colors #00FFFF, #FF00FF, and #FFFF00 offer excellent contrast against #333333 for large text and UI elements.
Avoid using #FFFF00 directly on #666666 for small text, as contrast might be insufficient for some users.
Ensure sufficient contrast when pairing #666666 with #333333 for text; white text is generally safer on #333333.
Consider using a thicker font weight for text in #00FFFF or #FF00FF on dark backgrounds to enhance readability.

Recommended combinations

Cyber Base

Excellent for dark mode interfaces, showcasing vibrant interactive elements against a deep grey.

#333333 · #00FFFF · #FF00FF

Highlight Pop

Use for secondary sections or infographics where a slightly lighter dark tone is needed with strong accents.

#666666 · #FFFF00 · #FF00FF

Full Spectrum

Apply for dynamic banners or loading animations, leveraging the full bright spectrum against a dark canvas.

#333333 · #00FFFF · #FFFF00

CSS variables

:root {
  --urban-neon-flux-2-1: #00FFFF;
  --urban-neon-flux-2-2: #FF00FF;
  --urban-neon-flux-2-3: #FFFF00;
  --urban-neon-flux-2-4: #333333;
  --urban-neon-flux-2-5: #666666;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-neon-flux-2": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#FFFF00",
        4: "#333333",
        5: "#666666",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#FFFF00

Color 4#333333

Color 5#666666

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

10.1:1AAA

4.6:1AA

2.5:1Fail

2.9:1Fail

4:1AA18

1.8:1Fail

1.2:1Fail

2.9:1Fail

11.8:1AAA

5.3:1AA

10.1:1AAA

4:1AA18

11.8:1AAA

2.2:1Fail

4.6:1AA

1.8:1Fail

5.3:1AA

2.2:1Fail

Similar palettes

More like Urban Neon Flux

View all Vibrant

Digital Circuit Matrix

Electric Glitch Bloom

Neon City Drip

Neon Jungle Synth

City Night Electric

Cybernetic Chroma Burst