Palette

Electric Neon Grid

High-contrast electric hues defining a digital landscape of pulsing light and shadow.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#FF1493#7FFF00#9400D3#000000

Palette guide

How to use Electric Neon Grid

Overview

The Electric Neon Grid palette features high-contrast electric hues defining a digital landscape of pulsing light and shadow. It combines the vivid #00FFFF (Cyan), intense #FF1493 (Deep Pink), luminous #7FFF00 (Chartreuse), deep #9400D3 (Dark Violet), and grounding #000000 (Black). This collection is perfect for designs that evoke cyberpunk aesthetics, digital interfaces, or anything requiring a bold, energetic, and modern feel. Designers can utilize these colors for stark contrasts, glowing UI elements, or striking typography. Developers will find it ideal for creating immersive user experiences in applications, websites, or games that demand a distinct high-tech and futuristic visual identity.

Best used for

Cyberpunk game UI
Tech startup branding
Music festival posters
Digital art and motion graphics
Streamer overlays
Futuristic web design

Suggested color roles

primary

#000000 (Black) - Provides a strong, grounding background, allowing the vibrant neon colors to truly pop and command attention, mimicking a digital night.

secondary

#00FFFF (Cyan) - A powerful, energetic hue perfect for headlines, calls-to-action, or graphic elements that need to stand out boldly, like circuit lines.

accent

#FF1493 (Deep Pink) - Provides a striking, electric contrast, ideal for highlighting interactive elements, subheadings, or digital accents in a cyberpunk style.

background

#000000 (Black) - The optimal choice for a dark, urban backdrop that makes the neon accents glow intensely, creating a futuristic grid effect.

text

#7FFF00 (Chartreuse) - Effective for striking headlines or short bursts of information against dark backgrounds. For body text on #000000, white or a very light gray is recommended for readability.

Accessibility notes

Ensure high contrast when pairing any neon color (#00FFFF, #FF1493, #7FFF00) with #000000 or #9400D3 for text, checking WCAG guidelines.
Avoid using #9400D3 for small text on dark backgrounds, as it may lack sufficient contrast for readability.
The intense nature of #00FFFF, #FF1493, and #7FFF00 can cause eye strain; use sparingly for large blocks of text.
Prioritize white or very light text on #000000 for optimal readability for body content.

Recommended combinations

Cyber Grid

Creates a classic cyberpunk aesthetic, ideal for bold headlines, logos, or striking visual accents against a dark backdrop, mimicking digital circuits.

#000000 · #00FFFF · #FF1493

Electric Pulse

Perfect for vibrant UI elements or energetic graphics, offering a dynamic contrast that captures attention in a digital interface.

#9400D3 · #7FFF00 · #000000

Neon Glow

A high-energy combination for artistic projects, event promotions, or digital art, delivering maximum visual impact and futuristic flair.

#FF1493 · #00FFFF · #7FFF00

CSS variables

:root {
  --electric-neon-grid-1: #00FFFF;
  --electric-neon-grid-2: #FF1493;
  --electric-neon-grid-3: #7FFF00;
  --electric-neon-grid-4: #9400D3;
  --electric-neon-grid-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-neon-grid": {
        1: "#00FFFF",
        2: "#FF1493",
        3: "#7FFF00",
        4: "#9400D3",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF1493

Color 3#7FFF00

Color 4#9400D3

Color 5#000000

Accessibility

Contrast checker

2.9:1Fail

1:1Fail

5.2:1AA

16.7:1AAA

2.9:1Fail

2.8:1Fail

1.8:1Fail

5.8:1AA

1:1Fail

2.8:1Fail

5.1:1AA

16.2:1AAA

5.2:1AA

1.8:1Fail

5.1:1AA

3.2:1AA18

16.7:1AAA

5.8:1AA

16.2:1AAA

3.2:1AA18

Similar palettes

More like Electric Neon Grid

Cybernetic Pulse Beat