🎨 Shades of Gray (and Black)

28 gray tones, each one click from your clipboard — 16 classic named colors plus a generated tint scale for building UI palettes. Gray is design's load-bearing color: it builds hierarchy, borders, and backgrounds while accents do the talking. True neutral grays feel mechanical; most design systems warm or cool their grays slightly (this page's generated strip is cool-tinted).

• Black#000000
• Onyx#353839
• Charcoal#36454f
• Gunmetal#2a3439
• Slate Gray#708090
• Dim Gray#696969
• Gray#808080
• Cool Gray#8c92ac
• Dark Gray#a9a9a9
• Silver#c0c0c0
• Ash#b2beb5
• Light Gray#d3d3d3
• Gainsboro#dcdcdc
• Platinum#e5e4e2
• White Smoke#f5f5f5
• White#ffffff
• Gray 100#131416
• Gray 200#26282c
• Gray 300#383c42
• Gray 400#4b4f58
• Gray 500#5e636e
• Gray 600#717784
• Gray 700#868c98
• Gray 800#9ca1ab
• Gray 900#b2b6bd
• Gray 1000#c8cbd0
• Gray 1100#dee0e3
• Gray 1200#eeeff1

Click any swatch to copy its hex code.

Using gray well

Charcoal instead of pure black softens text on white; slate grays cool an interface toward professional, while greige (gray-beige) warms it toward cozy. The classic system: two grays for text, two for borders/backgrounds, one accent color.

Need variations of a specific shade? Copy its hex into the palette generator for harmonies, or the contrast checker to verify text passes WCAG on top of it.

Frequently asked questions

What are the most popular shades of gray?

The classics are Black, Onyx, Charcoal, Gunmetal, Slate Gray, Dim Gray — the named swatches at the top of this page. Click any of them to copy the hex code.

What do the numbered shades (100–1000) mean?

They're a generated lightness scale of one representative hue, in the naming style design systems like Tailwind and Material use — low numbers dark, high numbers light. Use them as a ready-made UI ramp.

How do I get RGB or HSL instead of hex?

Copy the hex here, then paste it into our HEX to RGB converter — it returns RGB and HSL together, and the color picker gives sliders for fine-tuning.