Palette

Neon City Grid

A stark, electric mix of blacks and vibrant neons, capturing the pulsating energy 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 Neon City Grid 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 Grid.

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

Data visualization

#000000#00FFD1#FF00FF#FFF500#FF0077

Palette guide

How to use Neon City Grid

Overview

The Neon City Grid palette delivers a stark, electric mix of pure black and vibrant neons, capturing the pulsating energy of a futuristic cityscape. With #000000 (black) as its strong foundation, complemented by #00FFD1 (turquoise), #FF00FF (magenta), #FFF500 (bright yellow), and #FF0077 (hot pink), this palette is designed for maximum visual impact. Designers and developers can harness these bold contrasts to create striking cyberpunk game UIs, dynamic tech demos, or compelling digital art that feels cutting-edge and energetic. It's an excellent choice for projects demanding a high-contrast, modern, and undeniably bold aesthetic.

Best used for

Cyberpunk game interfaces and HUDs
Dark mode applications and websites
Tech-focused branding and presentations
Vibrant digital art and graphic novels
Music event visuals and club flyers
E-commerce platforms for edgy fashion

Suggested color roles

primary

Use #000000 (Black) as the absolute dark foundation, providing a deep void for the neon colors to truly pop and glow.

secondary

Employ #00FFD1 (Turquoise) for cool, digital accents, secondary information, or subtle glowing effects.

accent

Apply #FFF500 (Bright Yellow) for the highest visibility elements, critical alerts, or attention-grabbing call-to-action buttons.

background

Utilize #000000 (Black) as the dominant background color to maximize contrast and create an immersive, futuristic atmosphere.

text

For headlines, #FFF500 or #00FFD1 offer excellent visibility. For body text, a clean white or light gray ensures readability on the black background.

Accessibility notes

All neon colors provide excellent contrast against #000000, ensuring WCAG AA compliance for text and UI elements.
Avoid using multiple pure neon colors for adjacent text elements to prevent visual clutter and maintain readability.
For long-form body text, always use a neutral light color like white or a very light gray on the #000000 background.
Test distinguishability between #FF00FF and #FF0077 for colorblind users when these colors are used in close proximity for key information.

Recommended combinations

Core Cyber Interface

Ideal for main UI backgrounds, navigation, and interactive elements in a dark theme application.

#000000 · #00FFD1 · #FF00FF

Dynamic Alert

Perfect for urgent notifications, warning messages, and high-impact call-to-action buttons.

#FFF500 · #FF0077 · #000000

Electric Contrast

Excellent for striking headers, vibrant graphic overlays, or hero sections that demand immediate attention.

#FF00FF · #00FFD1 · #FFF500

CSS variables

:root {
  --neon-city-grid-1: #000000;
  --neon-city-grid-2: #00FFD1;
  --neon-city-grid-3: #FF00FF;
  --neon-city-grid-4: #FFF500;
  --neon-city-grid-5: #FF0077;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-city-grid": {
        1: "#000000",
        2: "#00FFD1",
        3: "#FF00FF",
        4: "#FFF500",
        5: "#FF0077",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#00FFD1

Color 3#FF00FF

Color 4#FFF500

Color 5#FF0077

Accessibility

Contrast checker

16.2:1AAA

6.7:1AA

18.3:1AAA

5.5:1AA

16.2:1AAA

2.4:1Fail

1.1:1Fail

2.9:1Fail

6.7:1AA

2.4:1Fail

2.7:1Fail

1.2:1Fail

18.3:1AAA

1.1:1Fail

2.7:1Fail

3.3:1AA18

5.5:1AA

2.9:1Fail

1.2:1Fail

3.3:1AA18

Similar palettes

More like Neon City Grid

View all vibrant

Cybernetic Future Glow

Digital Glitch Fusion