Shades of Gray

Shades of gray (or grey) include silver, dim gray, slate gray, charcoal, and gainsboro. The base gray color's hex value in HTML is #808080. Use this gallery for UI neutrals, copy HEX codes, or expand a gray into a full scale with Shade Color.

All Shades of Gray

51 named colors · one-click copy · WCAG contrast vs white/black

Shade Color

Browse named gray colors, copy a precise HEX in one click, and check WCAG contrast on white or black. Display Format only changes how values are shown — it does not build a theme scale. Turn on Preview UI to see each color as text and a button.

White

#FFFFFF Palette

W 1.0:1 Fail B 21.0:1 AAA

Snow

#FFFAFA Palette

W 1.0:1 Fail B 20.3:1 AAA

White Smoke

#F5F5F5 Palette

W 1.1:1 Fail B 19.3:1 AAA

Ghost White

#F8F8FF Palette

W 1.1:1 Fail B 19.9:1 AAA

Gainsboro

#DCDCDC Palette

W 1.4:1 Fail B 15.3:1 AAA

Light Gray

#D3D3D3 Palette

W 1.5:1 Fail B 14.0:1 AAA

Silver

#C0C0C0 Palette

W 1.8:1 Fail B 11.5:1 AAA

Dark Gray

#A9A9A9 Palette

W 2.4:1 Fail B 8.9:1 AAA

Gray

#808080 Palette

W 3.9:1 Fail B 5.3:1 AA

Dim Gray

#696969 Palette

W 5.5:1 AA B 3.8:1 Fail

Light Slate Gray

#778899 Palette

W 3.6:1 Fail B 5.8:1 AA

Slate Gray

#708090 Palette

W 4.1:1 Fail B 5.2:1 AA

Dark Slate Gray

#2F4F4F Palette

W 8.9:1 AAA B 2.4:1 Fail

Charcoal

#36454F Palette

W 9.9:1 AAA B 2.1:1 Fail

Outer Space

#414A4C Palette

W 9.1:1 AAA B 2.3:1 Fail

Jet

#343434 Palette

W 12.4:1 AAA B 1.7:1 Fail

Raisin Black

#242124 Palette

W 15.9:1 AAA B 1.3:1 Fail

Platinum

#E5E4E2 Palette

W 1.3:1 Fail B 16.5:1 AAA

Ash Gray

#B2BEB5 Palette

W 1.9:1 Fail B 10.9:1 AAA

Old Silver

#848482 Palette

W 3.7:1 Fail B 5.6:1 AA

Gunmetal

#2A3439 Palette

W 12.7:1 AAA B 1.6:1 Fail

Davys Gray

#555555 Palette

W 7.5:1 AAA B 2.8:1 Fail

Sonic Silver

#757575 Palette

W 4.6:1 AA B 4.6:1 AA

Spanish Gray

#989898 Palette

W 2.9:1 Fail B 7.3:1 AAA

Quick Silver

#A6A6A6 Palette

W 2.4:1 Fail B 8.6:1 AAA

Silver Chalice

#ACACAC Palette

W 2.3:1 Fail B 9.3:1 AAA

Manatee

#979AAA Palette

W 2.8:1 Fail B 7.5:1 AAA

Cadet Gray

#91A3B0 Palette

W 2.6:1 Fail B 8.1:1 AAA

Cool Gray

#8C92AC Palette

W 3.1:1 Fail B 6.8:1 AA

Paynes Gray

#536878 Palette

W 5.8:1 AA B 3.6:1 Fail

Roman Silver

#838996 Palette

W 3.5:1 Fail B 6.0:1 AA

Nickel

#727472 Palette

W 4.7:1 AA B 4.5:1 Fail

Granite Gray

#676767 Palette

W 5.7:1 AA B 3.7:1 Fail

Medium Gray

#BEBEBE Palette

W 1.9:1 Fail B 11.3:1 AAA

Taupe Gray

#8B8589 Palette

W 3.6:1 Fail B 5.8:1 AA

Rocket Metallic

#8A7F80 Palette

W 3.9:1 Fail B 5.4:1 AA

Cinereous

#98817B Palette

W 3.6:1 Fail B 5.8:1 AA

Timberwolf

#DBD7D2 Palette

W 1.4:1 Fail B 14.7:1 AAA

Silver Sand

#BFC1C2 Palette

W 1.8:1 Fail B 11.6:1 AAA

Pale Silver

#C9C0BB Palette

W 1.8:1 Fail B 11.7:1 AAA

Shadow Blue

#778BA5 Palette

W 3.5:1 Fail B 6.0:1 AA

Stormcloud

#4F666A Palette

W 6.1:1 AA B 3.4:1 Fail

Dark Charcoal

#333333 Palette

W 12.6:1 AAA B 1.7:1 Fail

Graphite

#383838 Palette

W 11.7:1 AAA B 1.8:1 Fail

Iron

#4C4C4C Palette

W 8.6:1 AAA B 2.4:1 Fail

Smoke

#738276 Palette

W 4.1:1 Fail B 5.2:1 AA

Dove Gray

#6D6D6D Palette

W 5.2:1 AA B 4.1:1 Fail

Cloud Gray

#B6B6B6 Palette

W 2.0:1 Fail B 10.4:1 AAA

Fog

#D6D6D6 Palette

W 1.5:1 Fail B 14.4:1 AAA

Mist Gray

#C4C4C4 Palette

W 1.7:1 Fail B 12.0:1 AAA

Stone Gray

#928E85 Palette

W 3.3:1 Fail B 6.4:1 AA

Popular Shade Collections

Browse other named shade galleries, or open the Shade Color tool to generate a custom 50–950 palette.

Shades of Blue

Shades of Green

Shades of Purple

Shades of Pink

Shades of Brown

Shades of Yellow

Shades of Red

Shades of Black

About Shades of Gray

This page is a named-gray color card for neutral reference swatches. Copy codes, read the W/B contrast labels before using any gray as text, or expand a gray into a scale with Shade Color.

Want a full Gray theme (50–950)?

Pick one base color from the gallery above.
Click Palette on that card to open Shade Color.
The tool builds a locked-H / locked-S lightness scale (HSL algorithm) named like Gray-50 … 950.
Copy the HEX values into CSS variables for production.

Gray Shades Glossary

Each named gray lists HEX, HSL, WCAG contrast vs white/black, and copy-ready CSS / Tailwind arbitrary values. Many light grays fail as body text on white—use them for borders or surfaces only when the labels say Fail for type.

Charcoal: #36454F hsl(204, 19%, 26%) W 9.9:1 AAA B 2.1:1 Fail

CSS color: #36454F; Tailwind bg-[#36454F]
Silver: #C0C0C0 hsl(0, 0%, 75%) W 1.8:1 Fail B 11.5:1 AAA

CSS color: #C0C0C0; Tailwind bg-[#C0C0C0]
Slate Gray: #708090 hsl(210, 13%, 50%) W 4.1:1 Fail B 5.2:1 AA

CSS color: #708090; Tailwind bg-[#708090]
Gainsboro: #DCDCDC hsl(0, 0%, 86%) W 1.4:1 Fail B 15.3:1 AAA

CSS color: #DCDCDC; Tailwind bg-[#DCDCDC]
Gunmetal: #2A3439 hsl(200, 15%, 19%) W 12.7:1 AAA B 1.6:1 Fail

CSS color: #2A3439; Tailwind bg-[#2A3439]
Dim Gray: #696969 hsl(0, 0%, 41%) W 5.5:1 AA B 3.8:1 Fail

CSS color: #696969; Tailwind bg-[#696969]
Cool Gray: #8C92AC hsl(229, 16%, 61%) W 3.1:1 Fail B 6.8:1 AA

CSS color: #8C92AC; Tailwind bg-[#8C92AC]
Platinum: #E5E4E2 hsl(40, 5%, 89%) W 1.3:1 Fail B 16.5:1 AAA

CSS color: #E5E4E2; Tailwind bg-[#E5E4E2]
White: #FFFFFF hsl(0, 0%, 100%) W 1.0:1 Fail B 21.0:1 AAA

CSS color: #FFFFFF; Tailwind bg-[#FFFFFF]
Snow: #FFFAFA hsl(0, 100%, 99%) W 1.0:1 Fail B 20.3:1 AAA

CSS color: #FFFAFA; Tailwind bg-[#FFFAFA]
White Smoke: #F5F5F5 hsl(0, 0%, 96%) W 1.1:1 Fail B 19.3:1 AAA

CSS color: #F5F5F5; Tailwind bg-[#F5F5F5]
Ghost White: #F8F8FF hsl(240, 100%, 99%) W 1.1:1 Fail B 19.9:1 AAA

CSS color: #F8F8FF; Tailwind bg-[#F8F8FF]
Light Gray: #D3D3D3 hsl(0, 0%, 83%) W 1.5:1 Fail B 14.0:1 AAA

CSS color: #D3D3D3; Tailwind bg-[#D3D3D3]
Dark Gray: #A9A9A9 hsl(0, 0%, 66%) W 2.4:1 Fail B 8.9:1 AAA

CSS color: #A9A9A9; Tailwind bg-[#A9A9A9]
Gray: #808080 hsl(0, 0%, 50%) W 3.9:1 Fail B 5.3:1 AA

CSS color: #808080; Tailwind bg-[#808080]
Light Slate Gray: #778899 hsl(210, 14%, 53%) W 3.6:1 Fail B 5.8:1 AA

CSS color: #778899; Tailwind bg-[#778899]
Dark Slate Gray: #2F4F4F hsl(180, 25%, 25%) W 8.9:1 AAA B 2.4:1 Fail

CSS color: #2F4F4F; Tailwind bg-[#2F4F4F]
Outer Space: #414A4C hsl(191, 8%, 28%) W 9.1:1 AAA B 2.3:1 Fail

CSS color: #414A4C; Tailwind bg-[#414A4C]
Jet: #343434 hsl(0, 0%, 20%) W 12.4:1 AAA B 1.7:1 Fail

CSS color: #343434; Tailwind bg-[#343434]
Raisin Black: #242124 hsl(300, 4%, 14%) W 15.9:1 AAA B 1.3:1 Fail

CSS color: #242124; Tailwind bg-[#242124]
Ash Gray: #B2BEB5 hsl(135, 8%, 72%) W 1.9:1 Fail B 10.9:1 AAA

CSS color: #B2BEB5; Tailwind bg-[#B2BEB5]
Old Silver: #848482 hsl(60, 1%, 51%) W 3.7:1 Fail B 5.6:1 AA

CSS color: #848482; Tailwind bg-[#848482]
Davys Gray: #555555 hsl(0, 0%, 33%) W 7.5:1 AAA B 2.8:1 Fail

CSS color: #555555; Tailwind bg-[#555555]
Sonic Silver: #757575 hsl(0, 0%, 46%) W 4.6:1 AA B 4.6:1 AA

CSS color: #757575; Tailwind bg-[#757575]
Spanish Gray: #989898 hsl(0, 0%, 60%) W 2.9:1 Fail B 7.3:1 AAA

CSS color: #989898; Tailwind bg-[#989898]
Quick Silver: #A6A6A6 hsl(0, 0%, 65%) W 2.4:1 Fail B 8.6:1 AAA

CSS color: #A6A6A6; Tailwind bg-[#A6A6A6]
Silver Chalice: #ACACAC hsl(0, 0%, 67%) W 2.3:1 Fail B 9.3:1 AAA

CSS color: #ACACAC; Tailwind bg-[#ACACAC]
Manatee: #979AAA hsl(231, 10%, 63%) W 2.8:1 Fail B 7.5:1 AAA

CSS color: #979AAA; Tailwind bg-[#979AAA]
Cadet Gray: #91A3B0 hsl(205, 16%, 63%) W 2.6:1 Fail B 8.1:1 AAA

CSS color: #91A3B0; Tailwind bg-[#91A3B0]
Paynes Gray: #536878 hsl(206, 18%, 40%) W 5.8:1 AA B 3.6:1 Fail

CSS color: #536878; Tailwind bg-[#536878]
Roman Silver: #838996 hsl(221, 8%, 55%) W 3.5:1 Fail B 6.0:1 AA

CSS color: #838996; Tailwind bg-[#838996]
Nickel: #727472 hsl(120, 1%, 45%) W 4.7:1 AA B 4.5:1 Fail

CSS color: #727472; Tailwind bg-[#727472]
Granite Gray: #676767 hsl(0, 0%, 40%) W 5.7:1 AA B 3.7:1 Fail

CSS color: #676767; Tailwind bg-[#676767]
Medium Gray: #BEBEBE hsl(0, 0%, 75%) W 1.9:1 Fail B 11.3:1 AAA

CSS color: #BEBEBE; Tailwind bg-[#BEBEBE]
Taupe Gray: #8B8589 hsl(320, 3%, 53%) W 3.6:1 Fail B 5.8:1 AA

CSS color: #8B8589; Tailwind bg-[#8B8589]
Rocket Metallic: #8A7F80 hsl(355, 4%, 52%) W 3.9:1 Fail B 5.4:1 AA

CSS color: #8A7F80; Tailwind bg-[#8A7F80]
Cinereous: #98817B hsl(12, 12%, 54%) W 3.6:1 Fail B 5.8:1 AA

CSS color: #98817B; Tailwind bg-[#98817B]
Timberwolf: #DBD7D2 hsl(33, 11%, 84%) W 1.4:1 Fail B 14.7:1 AAA

CSS color: #DBD7D2; Tailwind bg-[#DBD7D2]
Silver Sand: #BFC1C2 hsl(200, 2%, 75%) W 1.8:1 Fail B 11.6:1 AAA

CSS color: #BFC1C2; Tailwind bg-[#BFC1C2]
Pale Silver: #C9C0BB hsl(21, 11%, 76%) W 1.8:1 Fail B 11.7:1 AAA

CSS color: #C9C0BB; Tailwind bg-[#C9C0BB]
Shadow Blue: #778BA5 hsl(214, 20%, 56%) W 3.5:1 Fail B 6.0:1 AA

CSS color: #778BA5; Tailwind bg-[#778BA5]
Stormcloud: #4F666A hsl(189, 15%, 36%) W 6.1:1 AA B 3.4:1 Fail

CSS color: #4F666A; Tailwind bg-[#4F666A]
Dark Charcoal: #333333 hsl(0, 0%, 20%) W 12.6:1 AAA B 1.7:1 Fail

CSS color: #333333; Tailwind bg-[#333333]
Graphite: #383838 hsl(0, 0%, 22%) W 11.7:1 AAA B 1.8:1 Fail

CSS color: #383838; Tailwind bg-[#383838]
Iron: #4C4C4C hsl(0, 0%, 30%) W 8.6:1 AAA B 2.4:1 Fail

CSS color: #4C4C4C; Tailwind bg-[#4C4C4C]
Smoke: #738276 hsl(132, 6%, 48%) W 4.1:1 Fail B 5.2:1 AA

CSS color: #738276; Tailwind bg-[#738276]
Dove Gray: #6D6D6D hsl(0, 0%, 43%) W 5.2:1 AA B 4.1:1 Fail

CSS color: #6D6D6D; Tailwind bg-[#6D6D6D]
Cloud Gray: #B6B6B6 hsl(0, 0%, 71%) W 2.0:1 Fail B 10.4:1 AAA

CSS color: #B6B6B6; Tailwind bg-[#B6B6B6]
Fog: #D6D6D6 hsl(0, 0%, 84%) W 1.5:1 Fail B 14.4:1 AAA

CSS color: #D6D6D6; Tailwind bg-[#D6D6D6]
Mist Gray: #C4C4C4 hsl(0, 0%, 77%) W 1.7:1 Fail B 12.0:1 AAA

CSS color: #C4C4C4; Tailwind bg-[#C4C4C4]
Stone Gray: #928E85 hsl(42, 6%, 55%) W 3.3:1 Fail B 6.4:1 AA

CSS color: #928E85; Tailwind bg-[#928E85]

FAQ

How to use this page?

Copy neutral HEX values for design tokens, or generate a stepped gray ladder in Shade Color.

What is the most popular shade of gray?

Charcoal is a go-to popular gray for dark UI surfaces—softer than pure black, cooler than warm taupe grays.

What is the base gray HEX value?

The reference base gray on this page uses #808080. Use it as a starting seed in Shade Color, or pick any named swatch above as your base.

How do I turn a swatch into a full UI theme?

Click Palette on one gallery card. Shade Color locks hue and saturation, then varies lightness into tokens like Gray-50 through Gray-950 for CSS variables.

What do the W / B contrast labels mean?

Each card shows WCAG 2.x contrast for this color used as text on white (W) and text on black (B). AA means at least 4.5:1 (normal text); AAA means at least 7:1. Fail means below 4.5:1 — still fine for large decorative areas, but avoid for small body text.

What does Preview UI show?

Turn on Preview UI to see the color as text on white/black and as a simple button sample. It is a quick accessibility and context check—not a full design system.

Why use this gallery instead of sampling from a screenshot?

Named colors here use fixed HEX values, so you avoid compression and display-profile drift from screenshots. Copy the code once, then reuse it consistently in CSS or design tokens. For a full 50–950 CSS variable block, open Palette on a card and use Copy CSS in Shade Color.