Palette

Neon Future City

Captures the electrifying energy and artificial glow of a sprawling futuristic metropolis.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#FF00FF#39FF14#8A2BE2#000000

Palette guide

How to use Neon Future City

Overview

The Neon Future City palette captures the electrifying pulse of a sprawling metropolis at night, blending intense neons with true black. Key colors include luminous cyan (#00FFFF), vibrant magenta (#FF00FF), and striking electric green (#39FF14), complemented by a deep, enigmatic violet (#8A2BE2) and absolute black (#000000). This palette is engineered for high-impact designs, offering a dynamic range suitable for evoking energy, technology, and urban sophistication. It's an excellent choice for designers and developers aiming to create captivating, modern digital experiences with a distinct cyberpunk flair.

Best used for

Nightclub and music festival branding
Tech product launch campaigns
Animated sequences and motion graphics
Modern app and web interfaces
Urban-themed digital art
Energetic event promotions

Suggested color roles

primary

Use #00FFFF (Cyan) for prominent UI elements, main headlines, or interactive states that require high visibility.

secondary

Apply #FF00FF (Magenta) for secondary actions, navigational elements, or to highlight important data.

accent

Incorporate #39FF14 (Electric Green) for alerts, notifications, or subtle glowing effects to add a fresh, techy pop, or #8A2BE2 (Violet) for a deeper, mysterious accent.

background

Utilize #000000 (True Black) as the dominant background color to maximize the luminosity of the neon hues.

text

For body text, use white or a very light gray to ensure readability. Main headings or call-to-action text can use #00FFFF or #FF00FF for impact.

Accessibility notes

Ensure all text and interactive elements have a high contrast ratio against the #000000 background (WCAG AA minimum).
Limit the use of highly saturated neon colors for small font sizes, as they can be difficult to read.
When using multiple neon colors, verify that adjacent colors have sufficient luminance contrast.
Consider providing a toggle for a less vibrant mode for users sensitive to bright, flashing colors.

Recommended combinations

City Glow

Ideal for main layouts, headers, or backgrounds that need a striking, deep-space feel with bright highlights.

#00FFFF · #8A2BE2 · #000000

Electric Accent

Excellent for buttons, icons, or small graphical elements that demand attention and an energetic feel.

#FF00FF · #39FF14 · #000000

Urban Pop

Perfect for dynamic hero sections or interactive dashboards, leveraging the two most vibrant neons.

#00FFFF · #FF00FF · #000000

CSS variables

:root {
  --neon-future-city-2-1: #00FFFF;
  --neon-future-city-2-2: #FF00FF;
  --neon-future-city-2-3: #39FF14;
  --neon-future-city-2-4: #8A2BE2;
  --neon-future-city-2-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-future-city-2": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#39FF14",
        4: "#8A2BE2",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#39FF14

Color 4#8A2BE2

Color 5#000000

Accessibility

Contrast checker

2.5:1Fail

1.1:1Fail

4.8:1AA

16.7:1AAA

2.5:1Fail

2.3:1Fail

1.9:1Fail

6.7:1AA

1.1:1Fail

2.3:1Fail

4.4:1AA18

15.5:1AAA

4.8:1AA

1.9:1Fail

4.4:1AA18

3.5:1AA18

16.7:1AAA

6.7:1AA

15.5:1AAA

3.5:1AA18

Similar palettes

More like Neon Future City

View all vibrant

Cyberpunk Glitch Neon

Cyberpunk Street Beat