Shades of Lime

What this tool does

Lime is loud. It is the zesty, high-voltage yellow-green that grabs your eye and will not let go, the colour of a tennis ball and a highlighter pen. Used well it brings real energy to a design, but it is strong, so you usually want a range of it: a softer lime to calm things down, a deeper one for contrast.

That is the job here. You give it a lime, and it builds the full run of that lime 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 limes and the genuinely surprising fact that lime is the most visible colour to the human eye.

How to use it

1. Set your lime. The tool loads with a lime and its Hex on show. Use Change Color or the Color Picker, or paste a hex of your own.
2. Choose the count. The Color Shades value controls how many shades appear, ten by default. More steps mean finer gradations.
3. Copy what you need. HEX, RGB, HSL, and HSV sit next to every shade, ready to drop into your project.

Lime is bright and saturated, so its lighter steps turn into soft, pale yellow-greens, while the darker steps deepen toward olive and forest. The softer steps are often the more usable ones, since full lime is a lot to take in large doses.

How it works

The tool runs on TinyColor, a colour library that works out the lighter and darker versions of a colour properly. It takes your lime, walks it toward white on one side and black on the other, spaces the steps evenly across that range, and writes each one out in the four code formats.

Because lime is so vivid to begin with, the range it produces is wide and useful: gentle, almost pastel greens at the light end, and deep, grounded greens at the dark end. That gives you a way to use the energy of lime without letting it overwhelm everything around it.

The fruit, and a naming quirk

Lime is named after the citrus fruit, and the colour is meant to be that fruit's skin: a bright, fresh yellow-green sitting between chartreuse and yellow on the wheel. The name is fairly old as colour names go, first recorded in English around 1890.

Here is the catch, and it is a good one. In CSS, the colour named lime is #00FF00, which is pure, full-strength green, not the yellow-green of an actual lime. That is the same X11 naming quirk that makes the keyword green a medium #008000 instead. So the web colour called lime is really just bright green, while the true yellow-green of the fruit sits closer to a value like #BFFF00. If you want the fruit, do not trust the keyword, use a hex.

The named limes, with hex codes

Lime covers a bright band from pure green through to clear yellow-green. Here are the named limes worth knowing, with a hex for each.

• Lime, web (#00FF00): the CSS keyword, which is actually pure bright green rather than a true lime.
• Lime Green (#32CD32): a slightly deeper, vivid green, a more usable everyday lime.
• True Lime (#BFFF00): a proper yellow-green, much closer to the fruit's skin.
• Chartreuse (#7FFF00): a vivid yellow-green, bright and a little acidic.
• Green-Yellow (#ADFF2F): lighter again, leaning further toward yellow.
• Yellow-Green (#9ACD32): a softer, more muted lime that is easier to use in quantity.
• Lawn Green (#7CFC00): a fresh, grassy lime with real punch.

The pattern to notice is the slide from pure green toward yellow. The further along that slide you go, the more zesty and citrus the colour reads, and the more it starts to feel like the fruit it is named after.

The most visible colour there is

Lime is not just bright by reputation, it is bright by biology. The human eye is most sensitive to light in the green-yellow part of the spectrum, which is exactly where lime sits. That makes a fluorescent yellow-green the single most eye-catching colour we can see, which is why it is used where being seen matters most.

That is the reason high-visibility safety vests are that particular lime, and why some fire engines in the United States are painted lime-yellow instead of the traditional red, since the lime is easier to spot, especially at dawn and dusk. The same quality made lime a defining colour of 2000s design, from Crocs to sports kits, and it is why a little lime in a layout pulls the eye straight to wherever you put it.

Building a palette from your lime

Lime works best as a spark, not a wall. The most effective way to use it is as a single bright accent against a quiet, dark background, where it almost glows, charcoal, near-black, navy, and deep grey all make a great stage for it. Pure white keeps it crisp and modern.

So when you build a palette from the steps in this tool, flip the usual order. Let a deep green or a near-neutral do the heavy lifting for surfaces and text, and save your brightest lime for buttons, highlights, and the one thing you want noticed first. Its opposite on the wheel is a purple or magenta, which makes a bold, high-energy pairing if you want maximum contrast. Used sparingly, lime lifts a design. Used everywhere, it tires the eye out fast.

Questions people ask

Why is the CSS colour lime pure green, not yellow-green?

It is a naming quirk inherited from the old X11 colour set. CSS assigned the name lime to #00FF00, which is full bright green, rather than the yellow-green of the fruit. The true citrus lime sits closer to a value like #BFFF00.

What is the hex code for lime?

The CSS keyword lime is #00FF00, which is bright green. For a true, fruit-like lime, use a yellow-green hex such as #BFFF00, and for an everyday usable lime, #32CD32 works well.

Is lime good for backgrounds?

Usually not at full strength, since it is intense enough to tire the eye over a whole page. It works far better as an accent against a darker colour, with the softer steps from this tool used for any larger areas.

Can I use my own lime?

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

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. Lime (color), naming, citrus origin, and high-visibility use. Wikipedia. https://en.wikipedia.org/wiki/Lime_(color)