CSS Color: LawnGreen
Named CSS color LawnGreen — #7CFC00 in HEX, rgb(124, 252, 0) in RGB, hsl(90, 100%, 49%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | LawnGreen | color: LawnGreen; |
| HEX | #7CFC00 | color: #7CFC00; |
| RGB | rgb(124, 252, 0) | color: rgb(124, 252, 0); |
| HSL | hsl(90, 100%, 49%) | color: hsl(90, 100%, 49%); |
About LawnGreen
LawnGreen is a vivid, electric chartreuse inspired by freshly mowed grass catching sunlight. At hex `#7CFC00`, it has a near-maximum green channel (252), moderate red (124), and zero blue. Sitting at 90 degrees on the hue wheel, it leans more green than yellow.
In web design, LawnGreen serves as an energetic accent color for gaming interfaces, sports platforms, and bold modern designs. Its high saturation makes it extremely visible on dark backgrounds. Like other vivid greens, it should be used sparingly as an accent rather than a dominant surface color.
Accessibility is difficult on light backgrounds — LawnGreen against white achieves only about 1.4:1 contrast. It works best on dark surfaces or as a background behind dark text. Against black, it achieves approximately 13.8:1 contrast.
LawnGreen is similar to Lime and GreenYellow but falls between them on the hue spectrum. It pairs well with dark backgrounds, purple accents, and charcoal. In Tailwind CSS, `lime-400` or `lime-500` offer the closest matches.
FAQ
What is the hex code for LawnGreen?
The CSS named color LawnGreen has the hex code #7CFC00. You can use it in CSS as color: #7CFC00; or simply color: LawnGreen;.
What is LawnGreen in RGB?
In RGB notation, LawnGreen is rgb(124, 252, 0). Use it in CSS as color: rgb(124, 252, 0);.
What is LawnGreen in HSL?
In HSL notation, LawnGreen is hsl(90, 100%, 49%). Use it in CSS as color: hsl(90, 100%, 49%);.
What color category is LawnGreen?
LawnGreen belongs to the Green color family in the CSS named colors specification.
Can I use the name "LawnGreen" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: LawnGreen; or background-color: LawnGreen; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert LawnGreen to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →