Gray Color Codes (Shades of Gray)

Grays are the backbone of interfaces: text, borders, backgrounds and disabled states. This page lists 31 grays — the 10 CSS named grays such as gray, silver, gainsboro, slategray and dimgray, plus ash, battleship, charcoal, gunmetal, platinum, taupe gray and others, cool and warm — with HEX, RGB, HSL, HSV, CMYK and OKLCH codes, and a table of neutral grays in 10% lightness steps. CSS accepts both spellings: gray and grey are the same color.

How to use this tool

1. Choose a shade of gray from the list.
2. Copy its HEX, RGB or HSL code.
3. Use the 10% step table to build an evenly spaced gray scale.
4. Check the readable text color before using a gray as a background.

Formula

neutral gray at HSL lightness L% = round(L × 2.55) on all three channels

A neutral gray has R = G = B. Grays with slightly more blue (slate, cadet) feel cool; with more red and yellow (greige, cinereous) they feel warm. HSL steps are even in numbers but not in perception — the OKLCH column shows the perceived lightness of each step.

Example

Slate gray (slategray) is #708090 = rgb(112, 128, 144), hsl(210, 12.6%, 50.2%): a gray tinted blue by 32 steps from red to blue. In the 10% step table, 50% lightness is 127.5 → #808080, CSS gray, and 30% is 76.5 → #4D4D4D.