Gray Colors
The complete gray scale — from near-white to near-black, with the warm, cool and pure variants that define modern interface design. Each color shows HEX, RGB and HSL values you can copy in one click.
Gray color reference
A complete 50–950 gray scale with hex, RGB and HSL values. This is the scale used by most modern design systems (Tailwind-style).
| Name | HEX | RGB | HSL | Contrast on white | |
|---|---|---|---|---|---|
| Gray 50 | #F9FAFB | 249, 250, 251 | 210°, 20%, 98% | 1.03:1 | |
| Gray 100 | #F3F4F6 | 243, 244, 246 | 220°, 14%, 96% | 1.10:1 | |
| Gray 200 | #E5E7EB | 229, 231, 235 | 220°, 13%, 91% | 1.25:1 | |
| Gray 300 | #D1D5DB | 209, 213, 219 | 216°, 12%, 84% | 1.55:1 | |
| Gray 400 | #9CA3AF | 156, 163, 175 | 218°, 11%, 65% | 2.9:1 | |
| Gray 500 | #6B7280 | 107, 114, 128 | 220°, 9%, 46% | 4.6:1 | |
| Gray 600 | #4B5563 | 75, 85, 99 | 215°, 14%, 34% | 7.5:1 | |
| Gray 700 | #374151 | 55, 65, 81 | 215°, 19%, 27% | 10.3:1 | |
| Gray 800 | #1F2937 | 31, 41, 55 | 215°, 28%, 17% | 14.4:1 | |
| Gray 900 | #111827 | 17, 24, 39 | 221°, 39%, 11% | 18.8:1 | |
| Gray 950 | #030712 | 3, 7, 18 | 224°, 71%, 4% | 20.4:1 |
Named grays
Common named grays from CSS and design practice.
Warm, cool and neutral grays
Modern design systems tint their grays slightly to match the brand. The three most common families are slate (cool), zinc (neutral), and stone (warm).
Cool (slate)
Slight blue tint. Reads technological and clean.
Neutral (zinc)
Pure equal-channel gray. Balanced and universal.
Warm (stone)
Slight brown/yellow tint. Reads organic and printed.
Gray in design and accessibility
Gray is the most-used color in interface design. It carries text, borders, dividers, backgrounds, disabled states and icons. A well-built gray scale is the backbone of any design system — and a poorly-built one is the source of most accessibility failures on the web.
Common uses in interfaces
- Body text — Gray 700 (#374151) or darker is the standard body-text color.
- Borders and dividers — Grays 200–300 at low opacity keep interfaces readable.
- Surfaces — Grays 50–100 form neutral backgrounds that let color pop.
- Secondary and disabled text — Grays 400–500 for hints and disabled controls.
Accessibility notes
Gray is where most contrast failures happen. On white: #4B5563 reaches about 7.5:1 (AAA), #6B7280 reaches about 4.6:1 (AA), and #9CA3AF reaches only about 2.9:1 (fails AA for text — use only for icons, dividers or large secondary labels). Never use very light grays for body copy; they are the most common accessibility failure on modern websites.
Frequently asked questions
What is the standard gray hex code?
CSS gray is #808080 — RGB (128, 128, 128), the exact midpoint between black and white. Silver is #C0C0C0, dim gray is #696969. Most modern design systems use an 11-step gray scale from 50 (near-white) to 950 (near-black).
What are the warm, cool and neutral grays?
Pure gray has equal R, G and B values. Cool grays lean slightly blue (blue channel higher), warm grays lean slightly brown or yellow (red channel higher). Modern design systems often use tinted grays — slate (cool), zinc (neutral), stone (warm) — to add subtle character and match the brand hue.
How many grays should a design system have?
Most systems use between 9 and 12 gray steps. Tailwind provides 11 (50–950). The minimum useful set is 6: near-white for surfaces, light gray for borders, mid gray for secondary text, mid-dark gray for primary text, dark gray for headings, and near-black for high-contrast text.
Is gray accessible for text?
Gray is the most-used text color in interfaces and also the source of most accessibility issues. On white: #4B5563 reaches about 7.5:1 (AAA), #6B7280 reaches about 4.6:1 (AA), and #9CA3AF reaches only about 2.9:1 (fails AA). Never use very light grays for body copy.
How do I generate a full gray scale?
Use our shades generator with any mid-gray as the base. Or copy the ready-made scale from this page directly into your tokens.