Palette

Cyberpunk Neon Grid

A dramatic and intense palette for a high-tech, dystopian future city at night.

darkenergetic5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#FF0077#39FF14#00FFFF#7F00FF

Palette guide

How to use Cyberpunk Neon Grid

Overview

The Cyberpunk Neon Grid palette is a striking collection designed for projects demanding a bold, high-contrast, and futuristic aesthetic. Dominated by pure black (#000000), it features electrifying accents of vibrant pink (#FF0077), luminous green (#39FF14), brilliant cyan (#00FFFF), and a deep electric purple (#7F00FF). This palette is a developer's dream for creating dark mode UIs, gaming interfaces, or any digital product that requires a strong visual presence with glowing elements. Designers can use it to craft compelling brand identities that evoke a sense of high-tech and edgy sophistication.

Best used for

Dark mode UI/UX designs
Esports branding and platforms
Sci-fi film titles and effects
Interactive art installations
Music festival visuals
Apparel and merchandise design

Suggested color roles

primary

#FF0077 (Vibrant Pink) makes an impactful primary call to action or brand highlight.

secondary

#39FF14 (Luminous Green) can be used for secondary interactive elements or status indicators, providing strong visibility.

accent

#00FFFF (Brilliant Cyan) is excellent for hover states, notifications, or subtle glowing details.

background

#000000 (Pure Black) serves as the ultimate backdrop, allowing all neon colors to intensely pop.

text

White (#FFFFFF) or a very light grey is recommended for body text to ensure maximum readability against black.

Accessibility notes

Ensure high contrast for text, especially when using neon colors like #39FF14 or #00FFFF on a black background.
Do not rely solely on color to convey information; use patterns, icons, or text.
Be mindful of potential issues for colorblind users when differentiating between #FF0077 and #7F00FF.
Test legibility of all color combinations on different screen types and brightness settings.

Recommended combinations

Core Grid

Ideal for main interface elements, creating a sharp, energetic contrast.

#000000 · #FF0077 · #39FF14

Digital Pulse

Perfect for animated effects, progress loaders, or highlighting active selections.

#00FFFF · #7F00FF · #FF0077

Dark Matter

Use for background gradients or section dividers to maintain a deep, mysterious feel.

#000000 · #7F00FF · #00FFFF

CSS variables

:root {
  --cyberpunk-neon-grid-1: #000000;
  --cyberpunk-neon-grid-2: #FF0077;
  --cyberpunk-neon-grid-3: #39FF14;
  --cyberpunk-neon-grid-4: #00FFFF;
  --cyberpunk-neon-grid-5: #7F00FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-neon-grid": {
        1: "#000000",
        2: "#FF0077",
        3: "#39FF14",
        4: "#00FFFF",
        5: "#7F00FF",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#FF0077

Color 3#39FF14

Color 4#00FFFF

Color 5#7F00FF

Accessibility

Contrast checker

5.5:1AA

15.5:1AAA

16.7:1AAA

3.3:1AA18

5.5:1AA

2.8:1Fail

3:1AA18

1.6:1Fail

15.5:1AAA

2.8:1Fail

1.1:1Fail

4.6:1AA

16.7:1AAA

3:1AA18

1.1:1Fail

5:1AA

3.3:1AA18

1.6:1Fail

4.6:1AA

5:1AA

Similar palettes

More like Cyberpunk Neon Grid