Shades of gray
Gray (or grey) runs from near-white platinum and gainsboro to charcoal, onyx and jet. Many “grays” carry a slight blue, green or warm tint. Below: 36 named shades with hex codes — tap a chip to copy it.
20 light · 8 medium · 8 dark · 8 pass AA as text on white
- White#FFFFFF
- Ivory#FFFFF0
- Mint Cream#F5FFFA
- Azure#F0FFFF
- Snow#FFFAFA
- Floral White#FFFAF0
- Honeydew#F0FFF0
- Ghost White#F8F8FF
- Sea Shell#FFF5EE
- Alice Blue#F0F8FF
- Old Lace#FDF5E6
- White Smoke#F5F5F5
- Lavenderblush#FFF0F5
- Linen#FAF0E6
- Lavender#E6E6FA
- Platinum#E5E4E2
- Gainsboro#DCDCDC
- Timberwolf#DBD7D2
- Light Gray#D3D3D3
- Silver#C0C0C0
- Ash gray#B2BEB5
- Dark Gray#A9A9A9
- Cool gray#8C92AC
- Taupe gray#8B8589
- Light Slate Gray#778899
- Battleship gray#848482
- Gray#808080
- Slate Gray#708090
- Dim Gray#696969
- Davy’s gray#555555
- Dark Slate Gray#2F4F4F
- Charcoal#36454F
- Onyx#353839
- Jet#343434
- Gunmetal#2A3439
- Black#000000
Gray color codes: HEX, RGB, HSL, CMYK
Contrast is the WCAG 2.2 ratio of the shade as text on a white or black background (AA body text needs 4.5:1). “CSS” marks names you can type straight into CSS.
| Shade | HEX | RGB | HSL | CMYK | On white | On black |
|---|---|---|---|---|---|---|
| WhiteCSS | #FFFFFF | rgb(255, 255, 255) | hsl(0 0% 100%) | (0%, 0%, 0%, 0%) | 1.00:1 | 21.00:1 |
| IvoryCSS | #FFFFF0 | rgb(255, 255, 240) | hsl(60 100% 97%) | (0%, 0%, 6%, 0%) | 1.00:1 | 20.81:1 |
| Mint CreamCSS | #F5FFFA | rgb(245, 255, 250) | hsl(150 100% 98%) | (4%, 0%, 2%, 0%) | 1.02:1 | 20.56:1 |
| AzureCSS | #F0FFFF | rgb(240, 255, 255) | hsl(180 100% 97%) | (6%, 0%, 0%, 0%) | 1.02:1 | 20.45:1 |
| SnowCSS | #FFFAFA | rgb(255, 250, 250) | hsl(0 100% 99%) | (0%, 2%, 2%, 0%) | 1.03:1 | 20.30:1 |
| Floral WhiteCSS | #FFFAF0 | rgb(255, 250, 240) | hsl(40 100% 97%) | (0%, 2%, 6%, 0%) | 1.04:1 | 20.18:1 |
| HoneydewCSS | #F0FFF0 | rgb(240, 255, 240) | hsl(120 100% 97%) | (6%, 0%, 6%, 0%) | 1.03:1 | 20.26:1 |
| Ghost WhiteCSS | #F8F8FF | rgb(248, 248, 255) | hsl(240 100% 99%) | (3%, 3%, 0%, 0%) | 1.05:1 | 19.86:1 |
| Sea ShellCSS | #FFF5EE | rgb(255, 245, 238) | hsl(25 100% 97%) | (0%, 4%, 7%, 0%) | 1.07:1 | 19.54:1 |
| Alice BlueCSS | #F0F8FF | rgb(240, 248, 255) | hsl(208 100% 97%) | (6%, 3%, 0%, 0%) | 1.07:1 | 19.57:1 |
| Old LaceCSS | #FDF5E6 | rgb(253, 245, 230) | hsl(39 85% 95%) | (0%, 3%, 9%, 1%) | 1.08:1 | 19.38:1 |
| White SmokeCSS | #F5F5F5 | rgb(245, 245, 245) | hsl(0 0% 96%) | (0%, 0%, 0%, 4%) | 1.09:1 | 19.26:1 |
| LavenderblushCSS | #FFF0F5 | rgb(255, 240, 245) | hsl(340 100% 97%) | (0%, 6%, 4%, 0%) | 1.10:1 | 19.03:1 |
| LinenCSS | #FAF0E6 | rgb(250, 240, 230) | hsl(30 67% 94%) | (0%, 4%, 8%, 2%) | 1.12:1 | 18.67:1 |
| LavenderCSS | #E6E6FA | rgb(230, 230, 250) | hsl(240 67% 94%) | (8%, 8%, 0%, 2%) | 1.23:1 | 17.06:1 |
| Platinum | #E5E4E2 | rgb(229, 228, 226) | hsl(40 5% 89%) | (0%, 0%, 1%, 10%) | 1.27:1 | 16.52:1 |
| GainsboroCSS | #DCDCDC | rgb(220, 220, 220) | hsl(0 0% 86%) | (0%, 0%, 0%, 14%) | 1.37:1 | 15.31:1 |
| Timberwolf | #DBD7D2 | rgb(219, 215, 210) | hsl(33 11% 84%) | (0%, 2%, 4%, 14%) | 1.43:1 | 14.66:1 |
| Light GrayCSS | #D3D3D3 | rgb(211, 211, 211) | hsl(0 0% 83%) | (0%, 0%, 0%, 17%) | 1.49:1 | 14.02:1 |
| SilverCSS | #C0C0C0 | rgb(192, 192, 192) | hsl(0 0% 75%) | (0%, 0%, 0%, 25%) | 1.81:1 | 11.54:1 |
| Ash gray | #B2BEB5 | rgb(178, 190, 181) | hsl(135 8% 72%) | (6%, 0%, 5%, 25%) | 1.92:1 | 10.92:1 |
| Dark GrayCSS | #A9A9A9 | rgb(169, 169, 169) | hsl(0 0% 66%) | (0%, 0%, 0%, 34%) | 2.35:1 | 8.93:1 |
| Cool gray | #8C92AC | rgb(140, 146, 172) | hsl(229 16% 61%) | (19%, 15%, 0%, 33%) | 3.07:1 | 6.82:1 |
| Taupe gray | #8B8589 | rgb(139, 133, 137) | hsl(320 3% 53%) | (0%, 4%, 1%, 45%) | 3.61:1 | 5.81:1 |
| Light Slate GrayCSS | #778899 | rgb(119, 136, 153) | hsl(210 14% 53%) | (22%, 11%, 0%, 40%) | 3.64:1 | 5.76:1 |
| Battleship gray | #848482 | rgb(132, 132, 130) | hsl(60 1% 51%) | (0%, 0%, 2%, 48%) | 3.74:1 | 5.60:1 |
| GrayCSS | #808080 | rgb(128, 128, 128) | hsl(0 0% 50%) | (0%, 0%, 0%, 50%) | 3.94:1 | 5.31:1 |
| Slate GrayCSS | #708090 | rgb(112, 128, 144) | hsl(210 13% 50%) | (22%, 11%, 0%, 44%) | 4.05:1 | 5.17:1 |
| Dim GrayCSS | #696969 | rgb(105, 105, 105) | hsl(0 0% 41%) | (0%, 0%, 0%, 59%) | 5.48:1 | 3.82:1 |
| Davy’s gray | #555555 | rgb(85, 85, 85) | hsl(0 0% 33%) | (0%, 0%, 0%, 67%) | 7.45:1 | 2.81:1 |
| Dark Slate GrayCSS | #2F4F4F | rgb(47, 79, 79) | hsl(180 25% 25%) | (41%, 0%, 0%, 69%) | 8.92:1 | 2.35:1 |
| Charcoal | #36454F | rgb(54, 69, 79) | hsl(204 19% 26%) | (32%, 13%, 0%, 69%) | 9.90:1 | 2.12:1 |
| Onyx | #353839 | rgb(53, 56, 57) | hsl(195 4% 22%) | (7%, 2%, 0%, 78%) | 11.82:1 | 1.77:1 |
| Jet | #343434 | rgb(52, 52, 52) | hsl(0 0% 20%) | (0%, 0%, 0%, 80%) | 12.44:1 | 1.68:1 |
| Gunmetal | #2A3439 | rgb(42, 52, 57) | hsl(200 15% 19%) | (26%, 9%, 0%, 78%) | 12.73:1 | 1.64:1 |
| BlackCSS | #000000 | rgb(0, 0, 0) | hsl(0 0% 0%) | (0%, 0%, 0%, 100%) | 21.00:1 | 1.00:1 |
Make your own shades of gray
Pick any gray and get an evenly stepped 50–950 scale built in OKLCH, so each step looks evenly lighter or darker. Your exact color stays at its natural step.
Using gray in design
Grays carry most of an interface: text, borders, surfaces. On white, body text needs at least #767676 (4.54:1) to pass WCAG AA.
To pair it with other hues, start from the color wheel or see colors that go with gray. Check text and background pairs in the WCAG contrast checker, and drop a shade into the palette generator to build a full scheme around it.
Sources: CSS named colors from the W3C CSS Color Module Level 4; other names and hex values as commonly listed in Wikipedia’s color articles. Names for the same color vary between sources.
Frequently asked questions
How many shades of gray are there?
There is no fixed number: screens can show millions of colors and any gray hue can be made lighter, darker or more muted. This page lists 36 named shades of gray — the CSS named colors that fall in the gray family plus widely used names such as charcoal, ash gray, battleship gray.
What is the hex code for gray?
There is no single official gray. The CSS keyword "gray" is #808080; designers often use other values. Click any swatch on this page to copy its hex code.
What is the lightest and the darkest shade of gray?
In this list the lightest is White (#FFFFFF) and the darkest is Black (#000000), measured by OKLCH lightness, which tracks how bright a color actually looks.
Which shades of gray are readable as text on white?
8 of the 36 shades reach the WCAG AA ratio of 4.5:1 on white, for example Jet (#343434), Gunmetal (#2A3439), Black (#000000). Use the "On white" column in the table, or check any pair in the contrast checker.
What colors go with gray?
See the palettes on our "colors that go with gray" page: complementary, analogous and neutral pairings with hex codes.
What is the difference between a shade, a tint and a tone of gray?
Strictly, a shade is a color mixed with black, a tint is mixed with white and a tone is mixed with gray. In everyday use "shades of gray" means every variation of the hue, which is how this page uses it.