Neon Color Generator

Neon colors are defined by maximum saturation (100% in HSL color space) and a specific lightness range (48-58%). This combination creates colors that appear to glow like illuminated neon signs. The 100% saturation ensures pure, vivid hues without any gray or muted tones. Lightness below 48% loses the bright glow effect, while above 58% appears washed out. This is not arbitrary - it's based on the perceptual properties of how our eyes process extremely saturated colors at medium-high brightness.

Neon colors have terrible readability when used for text because their 100% saturation causes extreme eye strain and makes letters difficult to distinguish. They work best for: (1) Accent colors on buttons, borders, and icons, (2) Highlights and active states in dark themes, (3) Decorative elements and glowing effects, (4) Status indicators and notifications, (5) Headers and large display text (sparingly). Always use neon colors on dark backgrounds - they lose their 'glow' effect on light backgrounds and become hard to see.

Start by generating a palette with your desired number of colors (5, 7, 9, or 11). Click the lock icon on any color you like to preserve it. Then use 'Randomize Unlocked' to regenerate only the unlocked colors with random hues while keeping your favorites. Adjust the lightness slider (48-58%) to fine-tune brightness. The 'Regenerate All' button creates a new evenly-distributed palette across the color spectrum. Lock/unlock colors strategically to build exactly the palette you want.

Each preset represents different aesthetic styles with specific color combinations: 'Classic Neon Signs' uses traditional neon sign colors (pink, blue, green, yellow, orange). 'Cyberpunk' focuses on futuristic tech aesthetics with hot pinks, electric blues, and toxic greens. '80s Retro' uses vibrant pinks, purples, and blues from 1980s design. 'Synthwave' features purple, pink, and cyan for retro-futuristic vibes. 'Toxic' emphasizes bright greens. 'Electric' uses blues and purples. 'Miami Vice' combines pink and teal. 'Vaporwave' uses pastel neon aesthetics.

Export as CSS to get CSS custom properties (--neon-1, --neon-2, etc.) that you can use in stylesheets. Export as SCSS for Sass variables ($neon-1, $neon-2). Export as JSON to get all color data (HEX, RGB, HSL) in a structured format for JavaScript. Export as Tailwind to get a ready-to-use Tailwind CSS config extension with your neon colors as utility classes (bg-neon-100, text-neon-200, etc.). Copy individual HEX codes by clicking them, or use 'Copy All HEX' to get all colors at once for quick use.