Shades of Gray: Hex, RGB, and HSL Codes

What counts as a shade of gray?

Gray is what you get when red, green, and blue are equal — Gray #808080 is exactly that, and so are LightGray #D3D3D3, Silver #C0C0C0, and DimGray #696969. The 16 shades below run from Gainsboro #DCDCDC at the light end down to DarkSlateGray #2F4F4F, and they are the working backbone of nearly every interface: borders, dividers, disabled states, and secondary text all live in this list.

The interesting entries are the ones that are not truly neutral. SlateGray #708090 and LightSlateGray #778899 carry a blue cast; Ash Gray #B2BEB5 leans green; Charcoal #36454F is blue enough to read as near-navy at small sizes. Those tinted grays are what make a palette feel deliberate — a page built entirely from pure neutrals often looks flat, while one where the grays share a slight cast with the brand color looks composed.

How to use these color codes

1. Find your shade. The list runs roughly light to dark, with a live preview beside every name — scan it the way you would a paint chart.
2. Click a code to copy. Each row carries the hex, RGB, and HSL value of that color. One click copies that exact string to your clipboard.
3. Paste it into your project. Drop the hex into CSS, Figma, Photoshop, or a document. Clicking the swatch itself copies the hex, so you can grab colors without aiming at the small text.

What gray communicates

Gray is the color of restraint. It signals neutrality, professionalism, and precision, and it is the safest large-area color there is because it never competes with content — which is exactly why editorial and interface design lean on it so heavily.

Its risk is the flip side of the same trait: too much unrelieved gray reads as bleak, corporate, or unfinished. The fix is rarely more color but more contrast range — pairing Gainsboro against Charcoal rather than crowding several mid-grays together. Silver and Pewter #899499 add a metallic register that suggests technology and premium hardware, which is why they dominate in consumer electronics.

Honest limitations

A hex code is exact, but the color you see is not. The same #FF0000 looks different on an OLED phone, a cheap office monitor, and a printed page, because each device has its own gamut and calibration. Treat these values as a precise starting point for screens, and always check a physical proof before committing a color to print — CMYK cannot reproduce every shade listed here.

Color names are a mix of two things. Entries badged CSS are official CSS named colors: the name itself works in a stylesheet and every browser resolves it to exactly that hex. The rest are conventional names — Burgundy, Sage, Espresso — that no standards body owns. Their hex values follow the most widely cited convention, but another chart may place them a few percent lighter or darker, so quote the hex rather than the name when the exact value matters.

Why is it free?

FreeToGenerate.com keeps every tool genuinely free. This page is a static list of color values rendered in your browser — nothing to install, no account, no premium tier holding back the darker half of the palette. Copy as many codes as you need, as often as you need.

Other color families

redorangeyellowgreencyanbluepurplepinkbrownblackwhiteAll color families