Electric Lime color palette
Neon lime #CCFF00 and chartreuse #99FF00 are close to highlighter yellow. From there the set drops through grass green #66CC00 to deep forest tones, #336600 and #1A3300. The bright and dark ends sit far apart, which makes for very legible combinations. It feels fast and athletic. Running apps and cycling clubs are the obvious match.
Electric Lime palette in use
Use #1A3300 as a dark background with #CCFF00 for headings and #99FF00 for buttons. On light pages, #336600 handles text and #66CC00 the button.
This pair measures 11.77:1, so it works for body text too. The button uses #99FF00 with black text.
ButtonGood for
- Running app
- Fitness tracker dashboard
- Sports drink label
- Cycling club kit
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 |
|---|---|---|---|
#1A3300 | #CCFF00 | 11.77:1 | AAA |
#1A3300 | #99FF00 | 10.97:1 | AAA |
#1A3300 | #66CC00 | 6.72:1 | AA |
#336600 | #CCFF00 | 5.87:1 | AA |
#336600 | #99FF00 | 5.47:1 | AA |
#336600 | #66CC00 | 3.35:1 | AA large |
Electric Lime palette as code
CSS variables
:root {
--electric-lime-1: #CCFF00;
--electric-lime-2: #99FF00;
--electric-lime-3: #66CC00;
--electric-lime-4: #336600;
--electric-lime-5: #1A3300;
}Tailwind v4
@theme {
--color-electric-lime-1: #CCFF00;
--color-electric-lime-2: #99FF00;
--color-electric-lime-3: #66CC00;
--color-electric-lime-4: #336600;
--color-electric-lime-5: #1A3300;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'electric-lime': {
100: '#CCFF00',
200: '#99FF00',
300: '#66CC00',
400: '#336600',
500: '#1A3300',
},SCSS
$electric-lime-1: #CCFF00;
$electric-lime-2: #99FF00;
$electric-lime-3: #66CC00;
$electric-lime-4: #336600;
$electric-lime-5: #1A3300;JSON
["#CCFF00","#99FF00","#66CC00","#336600","#1A3300"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.