styleColor Scheme

Neon Glow

A glowing neon palette with electric colors on pure black backgrounds. Creates a night-city atmosphere with vivid luminous accents.

#020617
#0f172a
#22c55e
#d946ef
#0ea5e9

Color Breakdown

Role

background

Name

Slate 950

Hex

#020617

Tailwind

bg-slate-950

Role

surface

Name

Slate 900

Hex

#0f172a

Tailwind

bg-slate-900

Role

primary

Name

Green 500

Hex

#22c55e

Tailwind

text-green-500

Role

secondary

Name

Fuchsia 500

Hex

#d946ef

Tailwind

text-fuchsia-500

Role

accent

Name

Sky 500

Hex

#0ea5e9

Tailwind

bg-sky-500

Live Preview

Welcome Back

This is a live preview of the Neon Glow color scheme applied to a sample card component. See how the colors work together in a realistic UI context.

Design Rationale

Neon green and fuchsia on near-black backgrounds mimic glowing signs in a dark city. Sky blue adds depth to the luminous nighttime atmosphere.

Use Cases

Nightlife event pagesDJ portfolio sitesClub promotional sites

CSS Variables

CSS
:root {
  --background: #020617;
  --surface: #0f172a;
  --primary: #22c55e;
  --secondary: #d946ef;
  --accent: #0ea5e9;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'neon-glow': {
  'background': '#020617',  // bg-slate-950
  'surface': '#0f172a',  // bg-slate-900
  'primary': '#22c55e',  // text-green-500
  'secondary': '#d946ef',  // text-fuchsia-500
  'accent': '#0ea5e9',  // bg-sky-500
        },
      },
    },
  },
};

Related Color Schemes

Build with This Scheme

Use our palette generator to customize and extend this color scheme for your project.

Open Palette Generator

Frequently Asked Questions

How do you create a neon glow effect?
Use highly saturated colors on dark backgrounds with CSS glow effects like text-shadow and box-shadow for authenticity.