Green Color

About green

In CSS, the keyword green means #008000: the green channel at half intensity (128) and red and blue off. The fully saturated #00FF00 has a different name — lime. The naming goes back to the original 16 HTML colors, where the bright version was already called lime.

Because it is darker than pure green, #008000 works well in interfaces: it is readable as text on a white background and is a common choice for success messages and “go” actions.

#008000 is the value of the CSS named color green, defined in the CSS Color specification and identical in every browser.

Other colors called green

• Lime (CSS) #00FF00Pure RGB green, full intensity.Copy
• Forest green (CSS) #228B22A slightly lighter, more natural green.Copy

Green shades and tints

Shades mix green with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with green

Color harmonies based on the hue of #008000: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Green contrast and readability

On a green background, white text reads best (5.13:1). Here is how green works as a text color:

Use #008000 or darker for green text on white. The bright #00FF00 (lime) is very hard to read on white and is better suited to dark backgrounds or small accents.

Using green in CSS and HTML

:root {
  --color-green: #008000;
}

.highlight {
  background-color: var(--color-green);
}

.banner {
  background-color: green;
  color: #ffffff;
}

.label {
  color: #008000;
  border: 2px solid rgb(0, 128, 0);
}

<p style="background-color: #008000; color: #FFFFFF;">
  Green background
</p>