Shades of Gray: Names and Hex Codes
This is a designer’s reference for the most useful shades of gray, with accurate hex codes, RGB values, and notes on undertone and use. Gray is the ultimate neutral, but it is rarely truly neutral — most useful grays lean warm or cool, and that subtle bias determines whether a layout feels clinical or cozy. Use the table below as a citable palette, then read on for how the shades group.
For symbolism, see gray color meaning; if you are unsure which word to use, read grey vs gray; and for pairing deep neutrals, see colors that go with charcoal. For the neutrals on either side of gray, see our shades of white and shades of black references.
Shades of gray: full table
| Shade name | Hex | RGB | Notes |
|---|---|---|---|
| Charcoal | #36454F | 54, 69, 79 | Deep blue-gray; near-black neutral. |
| Slate | #708090 | 112, 128, 144 | Cool blue-gray; CSS slategray. |
| Silver | #C0C0C0 | 192, 192, 192 | Light neutral gray; CSS silver. |
| Ash | #B2BEB5 | 178, 190, 181 | Pale green-gray; soft and muted. |
| Gunmetal | #2A3439 | 42, 52, 57 | Very dark blue-gray; metallic. |
| Dove | #6D6C6E | 109, 108, 110 | Soft warm mid gray; gentle. |
| Gray | #808080 | 128, 128, 128 | Pure neutral mid gray; CSS gray. |
| Light Gray | #D3D3D3 | 211, 211, 211 | CSS lightgray; soft background. |
| Dark Gray | #A9A9A9 | 169, 169, 169 | CSS darkgray; mid-light neutral. |
| Dim Gray | #696969 | 105, 105, 105 | CSS dimgray; deep neutral. |
| Battleship Gray | #848482 | 132, 132, 130 | Muted warm mid gray. |
| Stone | #928E85 | 146, 142, 133 | Warm taupe-gray; natural. |
| Pewter | #928E8B | 146, 142, 139 | Soft metallic gray; warm. |
| Cool Gray | #8C92AC | 140, 146, 172 | Blue-leaning mid gray. |
| Cinereous | #98817B | 152, 129, 123 | Warm taupe-gray; ashy brown. |
| Cadet Gray | #91A3B0 | 145, 163, 176 | Soft blue-gray; calm. |
| Slate Green-Gray | #465945 | 70, 89, 69 | Dark green-tinged gray. |
| Platinum | #E5E4E2 | 229, 228, 226 | Near-white pale gray; luxe. |
| Gainsboro | #DCDCDC | 220, 220, 220 | CSS gainsboro; very light gray. |
| Steel Gray | #71797E | 113, 121, 126 | Cool industrial mid gray. |
| Arsenic | #3B444B | 59, 68, 75 | Dark cool slate gray. |
| Medium Gray | #BEBEBE | 190, 190, 190 | Balanced light-mid neutral. |
| Iron | #544E4D | 84, 78, 77 | Warm dark gray; sturdy. |
| Smoke | #675D5A | 103, 93, 90 | Warm dusky gray-brown. |
| White Smoke | #F5F5F5 | 245, 245, 245 | CSS whitesmoke; off-white gray. |
| Payne’s Gray | #4C5866 | 76, 88, 102 | Deep blue-gray artist pigment. |
| French Gray | #9897A9 | 152, 151, 169 | Soft lavender-tinged gray. |
| Graphite | #1C1C1C | 28, 28, 28 | Very dark neutral; near-black. |
Dark, near-black grays
The deepest grays — Charcoal (#36454F), Gunmetal (#2A3439), Graphite (#1C1C1C), Payne’s Gray (#4C5866), and Arsenic (#3B444B) — are the most useful as text and grounding colors. They read as serious and refined and are softer than pure black, which makes them the default for primary text in premium, modern interfaces. Charcoal’s faint blue undertone keeps it from feeling muddy, and Gunmetal pushes that coolness further for a sleek, industrial look. Payne’s Gray is a beloved watercolor pigment that reads almost as a desaturated navy, making it a sophisticated stand-in for black in editorial and print work.
Balanced mid grays
Gray (#808080), Slate (#708090), Dove (#6D6C6E), Steel Gray (#71797E), and Dim Gray (#696969) sit in the workhorse middle. Slate and Steel lean cool; Dove and Battleship lean warm. These are your secondary text, borders, and UI-chrome colors — neutral enough to recede, dark enough to carry information.
Light grays and silvers
The pale family — Silver (#C0C0C0), Light Gray (#D3D3D3), Platinum (#E5E4E2), Gainsboro (#DCDCDC), and White Smoke (#F5F5F5) — defines backgrounds, dividers, and disabled states. They establish layout structure without adding color, and Platinum in particular reads as quietly premium.
Warm vs cool grays
Undertone is everything. Cool grays like Slate (#708090) and Payne’s Gray (#4C5866) feel crisp and technical; warm grays like Stone (#928E85), Smoke (#675D5A), and Cinereous (#98817B) feel softer and more organic. Pick one bias and stay consistent — mixing warm and cool grays in the same palette is the most common reason a neutral scheme looks “off.”
Named and specialty grays
Beyond the value scale, several grays carry a specific character worth knowing. Pewter (#928E8B) and Stone (#928E85) are warm, soft grays that feel natural and tactile, ideal for organic or heritage palettes. French Gray (#9897A9) carries a faint lavender tint that reads as elegant and slightly cool, popular in fashion and interiors. Smoke (#675D5A) and Iron (#544E4D) are warm dark grays that work as softer alternatives to charcoal when you want depth without a blue cast. On the cool side, Cadet Gray (#91A3B0) and Steel Gray (#71797E) bring a crisp, industrial feel. Choosing a named specialty gray over a generic value-scale step is an easy way to give a neutral palette a distinct personality without introducing real color.
Most popular shades of gray
The grays designers reach for most are Charcoal (#36454F) for dark text and depth, Slate (#708090) for a cool mid gray, Silver (#C0C0C0) for light neutrals, Gray (#808080) for a pure balanced tone, and Gunmetal (#2A3439) for near-black accents. They span the full value scale and cover both undertones, which is why these five names appear in nearly every brand and UI palette. If you are building a system from scratch, starting with this set and filling in the lighter and darker steps between them gives you a complete, professional ramp in minutes.
How to use shades of gray in design
Gray is the structural backbone of almost every interface and brand system. Build a value scale — a light gray for backgrounds, a mid gray for secondary text, and a charcoal for primary text — and keep the undertone consistent across the whole scale. Use grays to let accent colors do the talking; a vivid brand color reads far cleaner against neutral gray than against another saturated hue, which is why most design systems surround a single bold accent with a full ramp of grays. In practice, a five-to-nine step scale (from near-white through mid grays to near-black) covers backgrounds, borders, disabled states, secondary text, and primary text without ever needing pure black or white. For accessibility, check that mid grays meet WCAG contrast minimums against your background before using them for body text; a gray that looks fine on a monitor can fail for low-vision users. Light grays like Gainsboro and Platinum are ideal for dividers and card edges because they suggest structure without drawing attention. For how gray signals balance, neutrality, and professionalism, see color psychology, and remember that the undertone you choose quietly shapes whether the whole product feels warm and human or cool and technical.
Frequently Asked Questions
What is the hex code for charcoal?
A widely used hex code for charcoal is #36454F (RGB 54, 69, 79), a deep blue-gray that reads as near-black but softer. Some palettes use a more neutral charcoal around #333333. The #36454F version is preferred when you want a slight cool undertone rather than pure neutral.
Is it “gray” or “grey”?
Both are correct; “gray” is the standard American English spelling and “grey” is standard British English. They refer to the identical color, and CSS accepts both as named values that map to #808080. Use whichever matches your audience and stay consistent.
What is the difference between warm and cool gray?
Cool grays carry a blue undertone and feel crisp and technical, while warm grays carry a brown or taupe undertone and feel softer and more organic. The bias is subtle but important: mixing the two in one palette is a common reason neutral schemes look slightly off.
How many shades of gray are there?
Pure grayscale alone offers 254 distinct values between black and white, and tinted grays add countless more. Designers usually reference 25 to 35 named shades. This list includes 28 of the most recognized, spanning charcoals, mid grays, silvers, and warm and cool variants.
