Lime green in CSS: limegreen is not lime
Here is a detail that trips up a lot of people: CSS has two similarly named colors. limegreen is the lime green on this page, #32CD32, rgb(50, 205, 50). lime, on the other hand, is #00FF00, the pure screen green with the green channel maxed out and the others at zero. Write color: lime; expecting a pleasant green and you get a fluorescent, almost harsh one. When in doubt, use the HEX value instead of the keyword.
Energy, freshness and attention
Perceptually, lime green sits on the edge between green and yellow. The eye picks it up fast, which is why it shows up in sports signage, safety gear and packaging that has to pop off a shelf. In Western contexts, the usual associations are freshness, youth, energy and “natural,” but overused it can look artificial or sour. As with any color meaning, it depends on culture, industry and what surrounds it.
Where to use it
- Sports and fitness: running shoes, activewear and workout apps use lime greens to suggest motion.
- Interfaces: works as a spot accent (a “new” badge, a progress bar) but rarely as a text color, since its contrast with white is low, around 2.1:1.
- Fashion: lime statement pieces pair well with neutrals and denim; the shade is easier to wear as an accessory than head to toe.
- Interiors: throw pillows, planters or a painted front door bring energy to gray or white rooms without taking over.
Suggested palette
To balance the intensity, pair lime green with heavier or neutral colors:
- Charcoal gray (
#36454F): the dark contrast that makes lime glow, a staple of athletic branding. - White (
#FFFFFF): clean and crisp, as long as you avoid green text on white. - Teal (
#008080): an analogous pairing that calms the whole scheme. - Purple (
#800080): near-complementary, for bold and playful designs.
Tip: if you need readable green text on a white background, darken the shade to something like #1F7A1F (contrast above 5:1). Dark mode works the other way around: the original #32CD32 already has good contrast on dark backgrounds. Test it in the contrast checker and generate variations with the palette generator.