Lime HEX Code
The HEX code for lime is #00FF00. Lime is pure green in the RGB color model—maximum green with no red or blue. Note that CSS "green" (#008000) is actually darker; pure RGB green is called "lime."
Lime Color Values
| Format | Value |
|---|---|
| HEX | #00FF00 |
| RGB | rgb(0, 255, 0) |
| HSL | hsl(120, 100%, 50%) |
| CMYK | C:100 M:0 Y:100 K:0 |
Lime vs Green Confusion
| Name | HEX | Description |
|---|---|---|
| Lime | #00FF00 | Pure RGB green |
| Green | #008000 | CSS "green" |
| Lime Green | #32CD32 | Different shade |
Lime Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Pale Green | #98FB98 | Light lime |
| Lime | #00FF00 | Pure green |
| Lime Green | #32CD32 | Named shade |
| Lawn Green | #7CFC00 | Yellow-tinted |
| Chartreuse | #7FFF00 | Yellow-green |
Lime in Design
Lime conveys:
- Energy: Electric, vibrant
- Nature: Fresh, organic
- Growth: New, emerging
- Digital: Tech, gaming
Using Lime in Design
``css
/* Lime accent */
.accent-lime {
color: #00FF00;
}
/* Gaming/tech style */
.neon-lime {
color: lime;
text-shadow: 0 0 10px lime;
}
/* Softer lime palette */
:root {
--lime-50: #F7FEE7;
--lime-500: #84CC16;
--lime-900: #365314;
}
`
Lime Accessibility
Pure lime (#00FF00) has poor contrast on white:
| Combination | Contrast | WCAG |
|---|---|---|
| Lime on white | 1.4:1 | Fail |
| Lime on black | 15.3:1 | AAA |
Use darker greens (#16A34A) for text on white backgrounds.Tailwind Lime Scale
| Level | HEX | Use |
|---|---|---|
| 50 | #F7FEE7 | Backgrounds |
| 500 | #84CC16 | Primary |
| 700 | #4D7C0F | Dark |
Lime is popular in gaming, tech, and energy drink branding for its high-energy, electric feel.A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.