Shades of Green

What this tool does

Green is the colour of growing things, and it covers an enormous amount of ground, from the palest mint to the deepest forest. That range is the catch when you are designing. You pick one green for a brand or a button, and then you need a lighter one for a success message and a darker one for text, and matching them by eye is fiddly.

That is what this does. You give it a green, and it builds the whole run of that green in even steps, each with its HEX, RGB, HSL, and HSV codes ready to copy. Below the tool there is a reference of the named greens, including one naming quirk that trips up a lot of developers.

How to use it

1. Set your green. The page starts on a green with its Hex displayed. Change it with Change Color or the Color Picker, or drop in your own hex.
2. Pick how many. The Color Shades number sets the count, ten to begin with. Ask for more to get a smoother spread between light and dark.
3. Grab the codes. Each shade shows its HEX, RGB, HSL, and HSV, so you can copy the one your tool expects.

Green spans a wide stretch of the spectrum, so a yellow-leaning green and a blue-leaning green behave quite differently as they lighten. Start from the exact green you mean, and the whole range follows its lead.

How it works

The tool runs on TinyColor, a colour library that lightens and darkens a colour cleanly rather than just fading it. It takes your green, walks it toward white on one side and black on the other, spaces the steps evenly, and writes each one out in the four code formats.

Green sits in the middle of the visible spectrum, which gives it room to move in both directions. The lighter steps open into fresh mints and sages, and the darker steps deepen into forest and pine, so a single green can carry a whole palette on its own.

The colour your eyes see best

There is a reason green feels easy to look at. The human eye is more sensitive to green than to any other colour. Our daytime vision peaks in the green-yellow part of the spectrum, around 555 nanometres, which means we pick out more shades of green and perceive them more brightly than reds or blues.

That sensitivity has real consequences. It is part of why green reads as restful and balanced, why it is used for backgrounds meant to reduce eye strain, and why so much of the natural world being green sits comfortably with us. It also explains a quirk on the lime page next door: the most visible warning colours are yellow-greens, precisely because that is where our eyes are sharpest.

The named greens, with hex codes

Green has more named versions than almost any other colour. Here are the ones worth knowing, with a hex for each.

• Green (#008000): the standard web green, a medium, balanced green.
• Forest Green (#228B22): a deep, natural green, a good all-round nature colour.
• Dark Green (#006400): deeper still, almost pine.
• Sea Green (#2E8B57): a green with a cool, blue lean.
• Lime Green (#32CD32): bright and lively without going neon.
• Spring Green (#00FF7F): a fresh green tipping toward mint.
• Chartreuse (#7FFF00): a vivid yellow-green, almost lime.
• Olive (#808000) and Sage (#BCB88A): muted, greyed greens that work as natural neutrals.

Here is the quirk that catches developers out. In CSS, the colour named green is #008000, a medium green, not the bright #00FF00 you might expect. That bright pure green is actually called lime in CSS. It is one of the very few places where the web colour names disagree with the older X11 set they came from, so if green looks darker than you wanted, that is why, and a hex is the fix.

What green says

No colour is tied to meaning quite as tightly as green is to nature. It reads as growth, life, freshness, and renewal, which makes it the obvious choice for anything to do with plants, the outdoors, health, and sustainability. The word green has become shorthand for environmentally friendly all on its own.

It carries a couple of other strong signals too. Green means go, from traffic lights to the green tick of a passing test, so it works well for success states and confirmations. In a lot of Western contexts it is also the colour of money and finance. Those meanings can pull in different directions, so it is worth being clear which green you are leaning on, the natural one, the go one, or the money one, since the shade you pick nudges the reading.

Building a palette from your green

Green is one of the easiest colours to build around. Use the steps from this tool as the spine: a deep green for text and headers, your main green for blocks and buttons, and a pale green surface behind content. Because green sits in the middle of the spectrum, it gets along with most of its neighbours.

For accents, green has a few reliable partners. Brown and other earth tones lean into its natural side and feel grounded and organic. White and cream keep it clean and fresh. Its true opposite is red, which is striking but festive, so use that pairing sparingly unless you want a holiday feel. A touch of warm yellow or gold also lifts a green palette nicely without fighting it.

Questions people ask

Why is the CSS colour green darker than I expected?

Because CSS defines green as #008000, a medium green inherited from the old X11 colour set. The bright #00FF00 most people picture as green is named lime in CSS, which is why the keyword looks darker than you might want.

What is the hex code for green?

The standard web value for the name green is #008000. For the bright, pure green, use #00FF00, which CSS calls lime. A specific brand green will have its own hex.

What does the colour green mean?

Most strongly, nature, growth, and freshness. It also signals go and success, and in many Western contexts it is linked to money and finance. The exact shade nudges which meaning comes through.

Can I use my own green?

Yes. Paste your exact green in as the base, and the tool builds the lighter and darker steps of that colour, so you get a matching set for surfaces, text, and accents.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor
3. Green, colour, meaning and named web values. Wikipedia. https://en.wikipedia.org/wiki/Green