Lime Fizz color palette
Acid yellow #F0FF00 and neon lime #C8FF00 fizz at the top, #96E600 and #64CC00 are bright greens, and #2D8000 is a deeper grass green. Saturation is maxed out everywhere, which makes the palette shout. It's at home in fitness and youth marketing, where it reads as fresh and caffeinated. Energy drink cans and sneaker drops are where it belongs.
Lime Fizz palette in use
Use #2D8000 for text and headings on white or #F0FF00. #64CC00 makes the button, #C8FF00 suits highlight blocks, and #96E600 icons and progress bars.
This pair measures 4.52:1, so it works for body text too. The button uses #C8FF00 with black text.
ButtonGood for
- Energy drink can
- Sneaker drop page
- Gym membership promo
- Cycling event poster
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 |
|---|---|---|---|
#2D8000 | #F0FF00 | 4.52:1 | AA |
#2D8000 | #C8FF00 | 4.22:1 | AA large |
#2D8000 | #96E600 | 3.24:1 | AA large |
Lime Fizz palette as code
CSS variables
:root {
--lime-fizz-1: #F0FF00;
--lime-fizz-2: #C8FF00;
--lime-fizz-3: #96E600;
--lime-fizz-4: #64CC00;
--lime-fizz-5: #2D8000;
}Tailwind v4
@theme {
--color-lime-fizz-1: #F0FF00;
--color-lime-fizz-2: #C8FF00;
--color-lime-fizz-3: #96E600;
--color-lime-fizz-4: #64CC00;
--color-lime-fizz-5: #2D8000;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'lime-fizz': {
100: '#F0FF00',
200: '#C8FF00',
300: '#96E600',
400: '#64CC00',
500: '#2D8000',
},SCSS
$lime-fizz-1: #F0FF00;
$lime-fizz-2: #C8FF00;
$lime-fizz-3: #96E600;
$lime-fizz-4: #64CC00;
$lime-fizz-5: #2D8000;JSON
["#F0FF00","#C8FF00","#96E600","#64CC00","#2D8000"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.