Neon color palettes

Where neon palettes work

• Game launchers, esports pages, and stream overlays
• Nightlife, music, and festival identities
• Status lights, progress bars, and focus rings in dark dashboards
• Synthwave and cyberpunk illustration

Bright is not the same as high contrast

Neon colors are extremely saturated (this collection averages about 82% HSL saturation, the highest on the site), but saturation says nothing about contrast. Contrast depends on luminance. Neon cyan and yellow are very light: #00f5ff on black is 15.50:1. Neon magenta sits in the middle: #e90064 is 4.52:1 against white and 4.65:1 against black, so it barely passes with either and is a weak choice for small text in both themes.

Set the glow against a deep, tinted dark

Neon accents look strongest on a dark background with some color in it. In #060047, #b3005e, #e90064, #ff5f9e, the indigo #060047 does that job: pink #ff5f9e on it measures 6.72:1. Neon cyan #00f5ff and yellow #fce700 from other palettes reach 14.11:1 and 15.08:1 on the same indigo.

A glow is a stack of soft shadows in the accent color. Keep it on headings and controls, not paragraphs.

.neon-heading {
  color: #ff5f9e;
  text-shadow:
    0 0 4px color-mix(in srgb, #ff5f9e 80%, transparent),
    0 0 16px color-mix(in srgb, #e90064 60%, transparent);
}

Not every palette here is fluorescent

About two in five neon palettes also appear in the happy collection, and some are light candy colors, such as #ffffd0, #f3ccff, #d09cfa, #a555ec. Treat those like pastels: they need dark text (#2b1440 on #f3ccff is 11.66:1), and they will not glow on a light page.

• Flicker animations: if a sign effect flashes, keep it to three flashes or fewer per second (WCAG 2.3.1), and turn it off under prefers-reduced-motion.
• Long passages in saturated color on black can appear to shimmer for some readers. Use a soft off-white for body text and neon for highlights.

Pairing the colors

Start from a dark with a hue, such as indigo #060047 or violet #3f0071, then choose one neon to lead and one to support. Pink with cyan, as in #ea047e and #00f5ff, is a common pair. Use an off-white for paragraphs and keep neon for headings and controls.

Contrast and readability

Neon contrast depends on luminance, not on how bright a color looks. Yellow #fce700 reaches 16.57:1 on black, but magenta #ea047e is 4.36:1 against white and 4.82:1 against black. About two thirds of the swatches here fall below 3:1 on white; orange #ff6d28 is 2.81:1.

Questions

Are neon colors accessible?

They can be, when the luminance is right. Light neons (cyan, lime, yellow) on a dark background pass 4.5:1 easily, while mid-luminance neons such as magenta, hot pink, and electric blue often sit near or below it against both white and black. Check every text pair, and do not use color alone to show status.

What background makes neon colors stand out?

A near-black with a slight hue, such as deep indigo #060047 or violet #3f0071, rather than pure #000000. On a white background, neon colors lose their glow, and most fall below text contrast thresholds.