Color code and palette
Shades of Gray
Gray provides the structural neutrals behind most interface systems. Cool and warm values can establish hierarchy, separate surfaces and let chromatic accent colors carry meaning.
Gray
#6B7280
Color formats
The same base color in common web formats.
Shades
| Color | Name | HEX | RGB | HSL | Copy |
|---|---|---|---|---|---|
| White Smoke | #F9FAFB | 249, 250, 251 | 210, 20%, 98% | ||
| Ghost White | #F3F4F6 | 243, 244, 246 | 220, 14%, 96% | ||
| Gainsboro | #E5E7EB | 229, 231, 235 | 220, 13%, 91% | ||
| Light Gray | #D1D5DB | 209, 213, 219 | 216, 12%, 84% | ||
| Silver | #9CA3AF | 156, 163, 175 | 218, 11%, 65% | ||
| Gray | #6B7280 | 107, 114, 128 | 220, 9%, 46% | ||
| Dim Gray | #4B5563 | 75, 85, 99 | 215, 14%, 34% | ||
| Dark Gray | #374151 | 55, 65, 81 | 217, 19%, 27% | ||
| Charcoal | #1F2937 | 31, 41, 55 | 215, 28%, 17% | ||
| Almost Black | #111827 | 17, 24, 39 | 221, 39%, 11% | ||
| Slate Light | #F8FAFC | 248, 250, 252 | 210, 40%, 98% | ||
| Slate Pale | #F1F5F9 | 241, 245, 249 | 210, 40%, 96% | ||
| Slate | #E2E8F0 | 226, 232, 240 | 214, 32%, 91% | ||
| Cool Gray | #CBD5E1 | 203, 213, 225 | 213, 27%, 84% | ||
| Steel | #94A3B8 | 148, 163, 184 | 215, 20%, 65% | ||
| Slate Gray | #64748B | 100, 116, 139 | 215, 16%, 47% | ||
| Storm | #475569 | 71, 85, 105 | 215, 19%, 35% | ||
| Gunmetal | #334155 | 51, 65, 85 | 215, 25%, 27% | ||
| Dark Slate | #1E293B | 30, 41, 59 | 217, 33%, 17% | ||
| Midnight | #0F172A | 15, 23, 42 | 222, 47%, 11% |
CSS keyword: gray
In CSS you can write it as the keyword gray.
Text contrast
These ratios use the WCAG relative luminance formula.
Aa White text 4.83:1
AA
Aa Black text 4.34:1
AA · Large text
Ways to use Gray
Interface backgrounds and borders
Typography hierarchy
Professional monochrome layouts
Colors that go with Gray
Color-wheel harmonies built from #6B7280. Click a swatch to copy it or open the set in the color wheel.
Split complementary
Open in color wheelA base plus the two neighbors of its complement — contrast with less tension.