Neon Color Palette

Electric hues at maximum chroma against a dark ground — signage, gaming and nightlife. Palette anchors: #0A0A0A, #39FF14, #FF10F0.

neonelectric
#0A0A0A
#39FF14
#FF10F0
#00E5FF
#FFEE00
#0a0a0a #39ff14 #ff10f0 #00e5ff #ffee00
#0A0A0A #39FF14 #FF10F0 #00E5FF #FFEE00

Semantic roles

Assigned deterministically: lightest = background, darkest = text, most saturated = primary.

background#FFEE00
surface#39FF14
text#0A0A0A
text-muted#FF10F0
primary#00E5FF
secondary#39FF14
accent#FF10F0

CSS variables 

:root {
  --background: #ffee00;
  --surface: #39ff14;
  --text: #0a0a0a;
  --text-muted: #ff10f0;
  --primary: #00e5ff;
  --secondary: #39ff14;
  --accent: #ff10f0;
}
Preview in UIs →

Accessibility matrix

Text color (rows) on background (columns). Green = WCAG AA pass for normal text (≥4.5:1).

Text \ BG#0A0A0A#39FF14#FF10F0#00E5FF#FFEE00
#0A0A0A
1.0
14.6
6.2
12.9
16.5
#39FF14
14.6
1.0
2.4
1.1
1.1
#FF10F0
6.2
2.4
1.0
2.1
2.7
#00E5FF
12.9
1.1
2.1
1.0
1.3
#FFEE00
16.5
1.1
2.7
1.3
1.0

Under deuteranopia

Machado et al. (2009) simulation, severity 1.0 — approximation, not a medical tool.

Colors in this palette

#0A0A0A
rgb(10, 10, 10)
#39FF14
rgb(57, 255, 20)
#FF10F0
rgb(255, 16, 240)
#00E5FF
rgb(0, 229, 255)
#FFEE00
rgb(255, 238, 0)

Similar palettes

New Year Color Palette
Lime Color Palette
Logo Color Palette

FAQ

How do I use the neon color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #0A0A0A, #39FF14, #FF10F0, #00E5FF, #FFEE00.

Do these colors pass accessibility checks?

See the WCAG matrix on this page: every text-on-background pairing with ratio ≥ 4.5 passes AA for normal text; ≥ 3 passes AA for large text and UI components.