Recolorify
Sign inStart free →
DESIGN6 min read· Jun 22, 2026

The Ultimate Guide to Gray Color Codes, Hex Codes, and Shades of Gray

Gray is the color of balance, neutrality, and modern sophistication — it is the backbone of UI design, premium hardware, and minimalist fashion. A well-built gray scale carries most of a design system. Whether you are a web designer matching co-brand assets, an e-commerce manager building variant listings, or a developer wiring up a design system, color codes are your shared language. In this guide we break down the hex codes, RGB coordinates, and LAB parameters for the most popular shades of gray, with practical tips on recoloring assets into these exact tones without quality loss.

The Ultimate Guide to Gray Color Codes, Hex Codes, and Shades of Gray

The core grays and their codes

  • Medium gray — #808080 · RGB(128, 128, 128) · HSL(0°, 0%, 50%) — the standard mid gray.
  • Slate gray — #708090 · RGB(112, 128, 144) · a cool blue-gray, modern and calm.
  • Silver — #C0C0C0 · RGB(192, 192, 192) · a light metallic gray for hardware and accents.
  • Ash gray — #B2BEB5 · RGB(178, 190, 181) · a soft green-tinged gray for decor.
  • Charcoal gray — #36454F · RGB(54, 69, 79) · a deep, sophisticated near-black gray.
  • Light gray — #D3D3D3 · RGB(211, 211, 211) · a neutral UI surface and border tone.

Why hex alone isn't enough for recoloring

A hex code defines a target color, but it says nothing about lightness. Gray is unusual because it is almost pure lightness with very little color — a flat RGB swap to gray drains the lightness variation that gives a product its form, leaving a dull, even smear.

This is why perceptually-uniform spaces matter. LAB separates lightness (the L channel — folds, highlights, shadows) from the color itself (A and B). Recoloring in LAB lets you neutralize a product to a precise gray while keeping every highlight and shadow, so it still looks like a photographed object.

Matching brand grays across assets

Grays carry undertones — cool, warm, or neutral — and mismatched undertones across UI, packaging, and photography make a brand feel inconsistent even when nobody can say why. Define each brand gray once — with a name, a hex, and a use case — and recolor every asset to that exact value rather than eyeballing it.

With Recolorify you can paste an exact gray hex and recolor a logo, product photo, or garment to match it precisely, keeping texture intact. See also our guides to black color codes and white color codes.