Green HEX Code
The HEX code for pure green (lime) is #00FF00. Note that CSS "green" is actually #008000, while the pure green primary color is technically called "lime" in CSS.
Green Color Values
| Name | HEX | RGB |
|---|---|---|
| Lime (pure) | #00FF00 | rgb(0, 255, 0) |
| Green (CSS) | #008000 | rgb(0, 128, 0) |
Green Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Light Green | #90EE90 | Soft, spring-like |
| Lime Green | #32CD32 | Vibrant, electric |
| Lime | #00FF00 | Pure green |
| Green | #008000 | CSS standard green |
| Forest Green | #228B22 | Deep, natural |
| Dark Green | #006400 | Very dark |
| Olive | #808000 | Yellow-tinted |
| Teal | #008080 | Blue-tinted |
Green in Design
Green represents:
- Nature: Environment, organic
- Growth: Finance, health
- Success: Positive actions, confirmations
- Freshness: Food, wellness
CSS Usage
``css
.success {
color: #00FF00; /* Lime - pure green */
/* Or for CSS green */
color: #008000; /* green keyword */
}
`
Brand Greens
| Brand | HEX |
|---|---|
| Spotify | #1DB954 |
| #25D366 | |
| Starbucks | #00704A |
| Android | #3DDC84 |
Green in Every Format
| Format | Value |
|---|---|
| HEX | #008000 |
| RGB | rgb(0, 128, 0) |
| HSL | hsl(120, 100%, 25%) |
| CMYK | cmyk(100%, 0%, 100%, 50%) |
| Nearest Tailwind | green-800 (#166534) |
About This Colour
CSS green is #008000, not #00FF00 — the bright one is lime. This trips people up constantly: the keyword is a half-intensity green inherited from the original 16 VGA colours.
Will It Pass Contrast?
| Combination | Ratio | WCAG |
|---|---|---|
| Green text on white | 5.14:1 | AA |
| Green text on black | 4.09:1 | AA large text only |
| White text on green | 5.14:1 | AA |
WCAG AA needs 4.5:1 for body text and 3:1 for text above 18pt or 14pt bold. Green passes on white, so it is safe for body text on a light background.Building a Palette Around It
| Role | Colour |
|---|---|
| Lighter (+20%) | #00e600 |
| Base | #008000 |
| Darker (−20%) | #001a00 |
| Complementary | #80007f |
| Triadic | #000080, #800000 |
Tints (toward white): #40a040, #80c080, #bfdfbfShades (toward black): #006000, #004000, #002000
Using It
`css
:root {
--green: #008000;
--green-light: #00e600;
--green-dark: #001a00;
}
.badge {
background: var(--green);
color: #000;
}
`
Define the colour once as a custom property rather than repeating the hex. When the brand
changes — and it will — you edit one line instead of grepping a stylesheet.
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.