Palette

Electric City Neon

A jolt of electric blues, vibrant pinks, and acid greens against the darkness of a futuristic cityscape.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0B0B0B#2A0A3D#00FFC0#FC1085#0AFFFF

Palette guide

How to use Electric City Neon

Overview

The "Electric City Neon" palette delivers a jolt of electric blues, vibrant pinks, and acid greens against the darkness of a futuristic cityscape. It features a deep Near Black (#0B0B0B) and a rich Dark Violet (#2A0A3D) as anchors. The glowing elements include a striking Spring Green (#00FFC0), a bold Magenta (#FC1085), and a brilliant Cyan (#0AFFFF). This collection is perfect for designers creating cyberpunk, retro-futuristic, or high-energy digital experiences that evoke a sense of urban mystery and vibrant life. Developers can use these high-contrast hues to build dynamic, immersive UIs and visual effects.

Best used for

Cyberpunk game interfaces or marketing
Nightclub or music festival promotions
Sci-fi film titles or promotional materials
Urban fashion brand identity
Digital art with a dark, electric theme
E-sports event branding

Suggested color roles

primary

#0B0B0B (Near Black) - The dominant background color, providing a dramatic canvas for the vibrant neon elements.

secondary

#2A0A3D (Dark Violet) - Ideal for subheadings, secondary backgrounds, or to add subtle depth to the dark theme.

accent

#FC1085 (Magenta) - Perfect for urgent alerts, calls-to-action, or small icons that demand immediate attention with a warm, energetic glow.

background

#0B0B0B (Near Black) - Creates a deep, immersive environment, making the glowing greens, cyans, and pinks pop intensely, simulating city lights.

text

#0AFFFF (Cyan) - Offers excellent readability for headings and important text on the dark backgrounds. #00FFC0 or pure white can also be used for specific highlights.

Accessibility notes

Ensure #0AFFFF text on #0B0B0B background meets WCAG contrast standards.
Avoid using highly saturated colors like #00FFC0 or #FC1085 for small body text to prevent eye strain.
Prioritize using the dark backgrounds for all neon text to maximize contrast and readability.
For interactive elements, ensure distinct visual cues for hover/focus states, possibly using #FC1085.

Recommended combinations

Urban Glow

Near-black background with glowing cyan text and magenta highlights, perfect for cyberpunk interfaces.

#0B0B0B · #0AFFFF · #FC1085

Neon Alley

Dark violet with spring green and cyan elements, ideal for data points or status indicators.

#2A0A3D · #00FFC0 · #0AFFFF

Electric Pulse

Magenta and spring green against near-black, suitable for vibrant graphics or interactive elements.

#FC1085 · #00FFC0 · #0B0B0B

CSS variables

:root {
  --electric-city-neon-1: #0B0B0B;
  --electric-city-neon-2: #2A0A3D;
  --electric-city-neon-3: #00FFC0;
  --electric-city-neon-4: #FC1085;
  --electric-city-neon-5: #0AFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-city-neon": {
        1: "#0B0B0B",
        2: "#2A0A3D",
        3: "#00FFC0",
        4: "#FC1085",
        5: "#0AFFFF",
      }
    }
  }
}

Hex values

Color 1#0B0B0B

Color 2#2A0A3D

Color 3#00FFC0

Color 4#FC1085

Color 5#0AFFFF

Accessibility

Contrast checker

1.1:1Fail

15.1:1AAA

5.2:1AA

15.7:1AAA

1.1:1Fail

13.3:1AAA

4.6:1AA

13.9:1AAA

15.1:1AAA

13.3:1AAA

2.9:1Fail

1:1Fail

5.2:1AA

4.6:1AA

2.9:1Fail

3:1AA18

15.7:1AAA

13.9:1AAA

1:1Fail

3:1AA18

Similar palettes

More like Electric City Neon