Shades of Silver

What this tool does

Silver is a light, cool grey with a metallic shine, the colour of the precious metal, of chrome, and of sleek modern technology. On a screen it is really a cool light grey, but it carries a sense of polish that plain grey does not. To build with it you need its range, a pale silver for surfaces and a deeper grey for contrast.

That is what this does. You give it a silver, and it builds the whole run of that colour 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 silvers and a note on why digital silver needs a little help to shine.

How to use it

1. Set your silver. The page opens on a silver and shows its Hex. Pick your own with Change Color or the Color Picker, or paste a hex straight in.
2. Pick how many shades. The Color Shades number decides how many appear, ten to begin with. Raise it for a smoother run.
3. Grab the codes. Each shade shows its HEX, RGB, HSL, and HSV, ready to copy.

Silver is a cool, light grey, so its lighter steps move toward near-white and its darker steps deepen into a cool mid grey. That cool, polished character runs the length of the range.

How it works

The tool runs on TinyColor, a colour library that walks a colour from light to dark cleanly. It takes your silver, 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.

The same limit applies to silver as to gold and bronze: a flat colour cannot look like polished metal, because metallic shine is made of highlights and reflections. This tool gives you the cool silver-grey tones, but the gleam comes from how you use them, with gradients and bright highlights, or with foil in print. The colours are the starting point; the shine is something you build.

The colour of the metal

Silver the colour is named after silver the precious metal, and it inherits the metal's standing. Silver has always been valuable, just a step below gold, so the colour reads as wealth and quality, but of a cooler, more modern kind. That second-place position is literal as well: the silver medal marks the runner-up on the podium, one step below gold.

What sets silver apart from gold is its temperature and its mood. Where gold is warm and traditional, silver is cool, sleek, and forward-looking, the colour of chrome, steel, mirrors, and machinery. That has tied it tightly to technology and the modern world, which is why so much tech, automotive, and industrial design reaches for silver when it wants to feel clean, precise, and futuristic.

The named silvers, with hex codes

Silver lives among the pale, cool greys. Here are useful reference points, with a hex for each.

• Silver (#C0C0C0): the CSS named silver, a light, slightly cool grey.
• Gainsboro (#DCDCDC) and Light Gray (#D3D3D3): paler, soft greys near the top of the range.
• Cool Silver (around #AAA9AD): a slightly deeper grey with a cool cast.
• Gray (#808080): a deeper mid grey for the darker end.

Two things are worth knowing. First, the CSS colour silver, #C0C0C0, is simply a flat light grey, with none of the shine of the real metal, which is where highlights and gradients come in. Second, that is the real difference between silver and grey: silver is a cool grey that is meant to read as shiny metal, while grey is just grey.

Where silver works

Silver is the cool, modern metallic. It signals quality and sophistication like gold, but with a sleeker, more technical edge, which makes it a natural fit for technology, automotive, and industrial brands, and for anything that wants to feel clean, precise, and futuristic. It is premium without warmth, polished without fuss.

Like the other metallics, it works best as an accent or a finish rather than a flat fill. Silver shines on fine lines, hardware, chrome effects, and highlights, where its cool gleam can do its work. The lighter and deeper steps from this tool let you build that properly, a pale silver surface, a silver accent, and a cool mid grey for contrast, all in the same cool family.

Building a palette from your silver

Silver likes cool, clean company. With black or charcoal it looks sleek and high-tech, the chrome-on-black of modern gadgets. With white and a cool blue it reads as clean, fresh, and futuristic, and with navy it feels sharp and premium. As a rule, silver is the cool counterpart to gold, so it suits cool palettes the way gold suits warm ones.

To build a working set, use the steps from this tool as the spine: a deep cool grey for contrast and text, your main silver as the metallic accent, and a pale silver surface behind content. Then anchor it with black, charcoal, or navy, and add a cool blue if you want a touch of colour. Keep the silver sparing and let highlights suggest the shine.

Questions people ask

What colour is silver?

A light, cool grey meant to suggest the shine of the metal. On screen it is essentially a pale grey, with the metallic look coming from highlights and reflections rather than the colour alone.

What is the hex code for silver?

The standard web value is #C0C0C0. It is one of the named CSS colours, so you can also just write "silver" in your stylesheet, while a specific silver will have its own hex.

What is the difference between silver and grey?

Silver is a cool grey that is meant to read as shiny metal, usually with highlights to suggest its shine. Grey is simply grey, with no metallic intent. As flat colours they are close, but their roles differ.

Can I use my own silver?

Yes. Paste your exact silver in as the base, and the tool builds the lighter and darker steps of that colour, so you get a matching set of cool greys for surfaces, accents, 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. Silver (color), the metal, its associations, and the named web value. Wikipedia. https://en.wikipedia.org/wiki/Silver_(color)