HCHTML Color

Shades of green

Green is the color of nature, growth and “go”. The human eye is most sensitive to it, so greens look brighter than reds or blues at the same physical intensity.

green · #008000

20 green color names

Every CSS named color in the green family, lightest to darkest. Each name works directly in CSS. Open any swatch for its full conversions, 50–950 scale and harmonies.

honeydew#f0fff0rgb(240 255 240)oklch(0.985 0.025 145.4)greenyellow#adff2frgb(173 255 47)oklch(0.913 0.233 130)palegreen#98fb98rgb(152 251 152)oklch(0.904 0.162 144.1)chartreuse#7fff00rgb(127 255 0)oklch(0.89 0.265 136)lawngreen#7cfc00rgb(124 252 0)oklch(0.882 0.263 136.2)springgreen#00ff7frgb(0 255 127)oklch(0.875 0.235 151)lightgreen#90ee90rgb(144 238 144)oklch(0.868 0.156 144.1)mediumspringgreen#00fa9argb(0 250 154)oklch(0.867 0.207 156.9)lime#00ff00rgb(0 255 0)oklch(0.866 0.295 142.5)yellowgreen#9acd32rgb(154 205 50)oklch(0.785 0.184 126.6)darkseagreen#8fbc8frgb(143 188 143)oklch(0.751 0.08 144.7)limegreen#32cd32rgb(50 205 50)oklch(0.742 0.229 142.8)mediumseagreen#3cb371rgb(60 179 113)oklch(0.684 0.144 155)olivedrab#6b8e23rgb(107 142 35)oklch(0.599 0.137 126.3)olive#808000rgb(128 128 0)oklch(0.581 0.127 109.8)seagreen#2e8b57rgb(46 139 87)oklch(0.569 0.119 154.9)forestgreen#228b22rgb(34 139 34)oklch(0.558 0.169 142.9)green#008000rgb(0 128 0)oklch(0.52 0.177 142.5)darkolivegreen#556b2frgb(85 107 47)oklch(0.496 0.09 126.2)darkgreen#006400rgb(0 100 0)oklch(0.436 0.148 142.5)

Tailwind green scales

The Tailwind v4 default palette families closest to green, 50 to 950.

Using green in a UI

Green is the default success color in UI systems. Avoid relying on red versus green alone to carry meaning, since that is the pair most affected by color blindness.

green-colors.css
:root {
  --honeydew: oklch(0.985 0.025 145.4); /* #f0fff0 */
  --greenyellow: oklch(0.913 0.233 130); /* #adff2f */
  --palegreen: oklch(0.904 0.162 144.1); /* #98fb98 */
  --chartreuse: oklch(0.89 0.265 136); /* #7fff00 */
  --lawngreen: oklch(0.882 0.263 136.2); /* #7cfc00 */
  --springgreen: oklch(0.875 0.235 151); /* #00ff7f */
  --lightgreen: oklch(0.868 0.156 144.1); /* #90ee90 */
  --mediumspringgreen: oklch(0.867 0.207 156.9); /* #00fa9a */
  --lime: oklch(0.866 0.295 142.5); /* #00ff00 */
  --yellowgreen: oklch(0.785 0.184 126.6); /* #9acd32 */
  --darkseagreen: oklch(0.751 0.08 144.7); /* #8fbc8f */
  --limegreen: oklch(0.742 0.229 142.8); /* #32cd32 */
  --mediumseagreen: oklch(0.684 0.144 155); /* #3cb371 */
  --olivedrab: oklch(0.599 0.137 126.3); /* #6b8e23 */
  --olive: oklch(0.581 0.127 109.8); /* #808000 */
  --seagreen: oklch(0.569 0.119 154.9); /* #2e8b57 */
  --forestgreen: oklch(0.558 0.169 142.9); /* #228b22 */
  --green: oklch(0.52 0.177 142.5); /* #008000 */
  --darkolivegreen: oklch(0.496 0.09 126.2); /* #556b2f */
  --darkgreen: oklch(0.436 0.148 142.5); /* #006400 */
}
Generate a green scaleBuild a palette

Frequently asked questions

What is the hex code for green?
The CSS keyword green is #008000, which is rgb(0 128 0) or oklch(0.52 0.177 142.5). Tailwind's green-500 is #00C950, a softer green that many design systems use instead.
How many shades of green have CSS color names?
This page lists 20 CSS named colors in the green family, from honeydew (#F0FFF0) at the light end to darkgreen (#006400) at the dark end. Every one can be used directly in CSS by name.
What colors go well with green?
Green pairs well with pink, brown and white. For a guaranteed match, open any green shade and use its complementary, analogous or triadic palette, all calculated in OKLCH.
How do I make a green color scale for my design system?
Pick a green you like on this page, open it in the color scale generator, and export an 11-step 50–950 ramp as CSS variables, JSON or a Tailwind v4 theme. The ramp is built in OKLCH, so every step looks evenly spaced.

Other color families

RedOrangeYellowTealBluePurplePinkBrownGrayWhite