Shades of (Grey)

What this tool does

Grey is the neutral between black and white, and it is quietly the backbone of almost every interface you use. Text, borders, backgrounds, dividers, disabled buttons, nearly all of it is grey. The trouble is that a real design does not need one grey, it needs a whole scale of them, evenly spaced from near-white to near-black, and building that by eye is fiddly and easy to get uneven.

That is what this does. You give it a grey, and it builds the whole run of that grey 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 greys and two genuine oddities about grey on the web. (And yes, it works the same whether you spell it grey or gray.)

How to use it

1. Set your gray. The tool starts on a grey with its Hex displayed. Choose your own through Change Color or the Color Picker, or enter a hex directly.
2. Choose the count. The Color Shades field sets the number of shades, ten by default. More steps build a finer grey scale.
3. Take what you need. The HEX, RGB, HSL, and HSV for each shade are listed, ready to drop in.

Grey sits right in the middle of the scale, so its range is the most balanced of the neutrals, running evenly from pale, near-white greys down to deep, near-black ones. That full scale is exactly what an interface needs.

How it works

The tool runs on TinyColor, a colour library that builds an even run from light to dark. It takes your grey, 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.

This is the neutral tool that gives you the most to work with. Because grey starts in the middle, it has room to move in both directions, so a single grey produces a full, even greyscale, the kind of light-to-dark scale that forms the skeleton of a well-built interface.

Two quirks of grey on the web

Grey hides two genuine oddities in CSS. The first is friendly: the web accepts both spellings as exactly the same colour. Write grey or gray, and you get an identical result, and the same goes for darkgrey and darkgray, lightgrey and lightgray, and the rest. Neither spelling is more correct, which is a small relief given how often people argue about it.

The second is genuinely strange. The CSS colour darkgray (#A9A9A9) is actually lighter than the CSS colour gray (#808080). It is not a typo, it is a historical accident: the two colours came from different early colour lists that were never reconciled, so darkgray ended up paler than plain gray, and there it has stayed. It is a classic gotcha that has tripped up many a developer reaching for a darker grey and getting a lighter one.

The named greys, with hex codes

Grey runs from pale to deep, with warm and cool versions along the way. Here are the common named ones, with a hex for each.

• Gray (#808080): the exact midpoint between black and white.
• Dark Gray (#A9A9A9): confusingly, lighter than plain gray, as above.
• Dim Gray (#696969): a genuinely darker mid grey.
• Light Gray (#D3D3D3) and Gainsboro (#DCDCDC): soft, pale greys.
• Silver (#C0C0C0): a light grey named after the metal.
• Slate Gray (#708090): a cool grey with a clear blue lean.

The subtle but important choice is temperature. A grey can lean warm, drifting toward beige, or cool, drifting toward blue like slate. The shift is tiny in the numbers but obvious to the eye, and it sets whether a design feels soft and human or crisp and technical.

What grey says

Grey is the colour of balance and neutrality. It reads as calm, professional, sophisticated, and timeless, the sensible colour that takes sides with nothing, which is why it underpins so much corporate, editorial, and product design. It is also the colour of the built world, of concrete, steel, and stone, so it feels solid and modern.

Its neutrality cuts both ways, though. The same restraint that makes grey sophisticated can tip into dull, gloomy, or lifeless if it is overused, and a grey area is, by definition, the place where things are uncertain and undecided. The fix is usually a touch of warmth or a single accent colour. Grey is the perfect supporting colour, but it rarely wants to be the whole story.

Building a palette from your grey

Grey's gift is making other colours look good. Against a neutral grey, a single accent colour reads as clean and deliberate, which is why so many interfaces are mostly grey with one brand colour doing the talking. Grey with white and black gives a crisp, classic, modern base.

To build a working set, use the steps from this tool as the spine: pale greys for backgrounds and surfaces, mid greys for borders and secondary text, and dark greys for headings and primary text. Decide early whether your greys lean warm or cool and keep them consistent, then add one accent colour for life. That single decision, neutral scale plus one colour, is the backbone of a huge amount of good design.

Questions people ask

What is the hex code for grey?

The CSS colour gray is #808080, the exact midpoint between black and white. It is a named CSS colour, so you can write it by name, and a specific grey will have its own hex.

Is it gray or grey?

Both. In CSS they are exact aliases, so grey and gray give an identical colour, as do darkgrey and darkgray, and so on. Grey is more common in British English, gray in American English.

Why is darkgray lighter than gray?

It is a historical quirk. The CSS colours gray (#808080) and darkgray (#A9A9A9) came from different early colour lists that were never reconciled, so darkgray ended up lighter than plain gray.

Can I use my own grey?

Yes. Paste your exact grey in as the base, and the tool builds the lighter and darker steps of that colour, so you get a full, even greyscale to build an interface on.

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. Grey, the neutral colour, its meanings, and usage. Wikipedia. https://en.wikipedia.org/wiki/Grey