Recolorify
Sign inStart free →
DESIGN10 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

Interactive Gray Swatch Grid

Click any swatch to copy its Hex code to your clipboard and view its RGB/HSL conversions.

Medium gray

HSL(0°, 0%, 50%) — the standard mid gray.

Selected color: #808080

Gray in RGB, HSL, and CMYK

A true gray has equal red, green, and blue, so #808080 is RGB(128, 128, 128) — a perfectly neutral mid gray. Undertoned grays break that equality slightly.

For medium gray #808080: RGB(128, 128, 128), HSL(0°, 0%, 50%), CMYK(0%, 0%, 0%, 50%). For slate gray #708090: RGB(112, 128, 144), HSL(210°, 13%, 50%) — the extra blue is what makes it a cool, modern gray rather than a neutral one.

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, a product photo, or a garment to match it precisely, keeping texture intact. See also our guides to black color codes and white color codes.

Best color pairings for gray

  • Gray + white (#FFFFFF) — clean, minimal, and modern; the backbone of most UI.
  • Gray + a single bright accent (#FF7A00) — lets one color pop against a neutral base.
  • Gray + navy (#0B1F3A) — professional and understated for corporate design.
  • Gray + blush pink (#FADADD) — soft and contemporary for beauty and lifestyle.
  • Gray + black (#0A0A0A) — sleek monochrome for premium hardware and tech.

Frequently asked questions about gray color codes

What is the hex code for gray? The CSS keyword "gray" is #808080 — a neutral mid gray. (Both "gray" and "grey" spellings map to the same value.)

What is the RGB code for gray? Medium gray is RGB(128, 128, 128); light gray is RGB(211, 211, 211).

What is the difference between warm and cool gray? A cool gray (like slate #708090) leans blue; a warm gray (like taupe #8B8589) leans brown or mauve. Mixing undertones across a design looks inconsistent.

What is the hex code for slate gray? Slate gray is #708090 — a cool, modern blue-gray.