Neon Circuit color palette
One dark base, #0D1117, and four greens so bright they almost glow on screen. They range from a pure terminal green, #00FF41, to a yellowish chartreuse, #ADFF2F, all at full saturation. On a light background they'd be hard to read, so treat this as a dark-only palette. Developer tools, cybersecurity startups, esports teams and retro hacker themes are where it belongs.
Neon Circuit palette in use
Keep #0D1117 as the background and set text in #ADFF2F or #00FF41. Save #39FF14 for buttons and focus rings, and #7FFF00 for charts or status indicators.
This pair measures 15.42:1, so it works for body text too. The button uses #39FF14 with black text.
ButtonGood for
- Developer tool dark theme
- Cybersecurity landing page
- Esports team branding
- CLI documentation site
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#0D1117 | #ADFF2F | 15.42:1 | AAA |
#0D1117 | #7FFF00 | 14.60:1 | AAA |
#0D1117 | #39FF14 | 13.95:1 | AAA |
#0D1117 | #00FF41 | 13.86:1 | AAA |
Neon Circuit palette as code
CSS variables
:root {
--neon-circuit-1: #0D1117;
--neon-circuit-2: #00FF41;
--neon-circuit-3: #39FF14;
--neon-circuit-4: #7FFF00;
--neon-circuit-5: #ADFF2F;
}Tailwind v4
@theme {
--color-neon-circuit-1: #0D1117;
--color-neon-circuit-2: #00FF41;
--color-neon-circuit-3: #39FF14;
--color-neon-circuit-4: #7FFF00;
--color-neon-circuit-5: #ADFF2F;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'neon-circuit': {
100: '#0D1117',
200: '#00FF41',
300: '#39FF14',
400: '#7FFF00',
500: '#ADFF2F',
},SCSS
$neon-circuit-1: #0D1117;
$neon-circuit-2: #00FF41;
$neon-circuit-3: #39FF14;
$neon-circuit-4: #7FFF00;
$neon-circuit-5: #ADFF2F;JSON
["#0D1117","#00FF41","#39FF14","#7FFF00","#ADFF2F"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.