Gray is any colour with little or no saturation. A true neutral has red, green and blue equal; everything else is a tinted grey, and the tint is usually what decides whether a design feels warm or cold. Copy the HEX codes from any scheme below, or generate a harmonious gray palette anchored to your own base colour.
Neutral Gray carries a slight blue tint (216°–220°) and never more than 19% saturation — the standard interface ramp. Cool Gray is flatter still, down to 7% at #6C757D. Slate Gray is the most tinted, 37% saturation at #1B263B, and behaves like a colour rather than a neutral.
#F3F4F6#D1D5DB#9CA3AF#6B7280#374151#E9ECEF#CED4DA#ADB5BD#6C757D#343A40#1B263B#415A77#778DA9#A9B4C2#E0E1DDAnchored to a gray base — press Space or Generate to roll more schemes. Click a swatch to copy its HEX, lock one to keep it while the rest re-roll, then export as CSS, JSON or HEX.
Drag in the colour area or the hue bar, or type a HEX / RGB value, then build a scheme anchored to it.
Gray is the surface layer of most interfaces, so the real question is which accent sits on it. A blue-tinted grey takes blue and teal without friction; a warm grey needs a warm accent or it looks dirty. For the darker end of the same family see charcoal. Keep at least three clear steps between background, border and text greys.
:root block with each colour as a custom property (--color-1, --color-2 and so on), or copy a single HEX straight from any swatch above. The generator here starts anchored to #6B7280, so the first block you copy is a set of gray variations rather than a random hue. Copy JSON returns the same five values as an array for a build step or a token file, and Copy HEX returns them as a plain comma-separated line. Lock any swatch you want to keep before generating again and it survives into the next export.More palettes: Charcoal palette · Brown palette · Taupe palette · all colours