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

55 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

Eerie Black

#1B1B1B Palette

W 17.2:1 AAA B 1.2:1 Fail

Black

#000000 Palette

W 21.0:1 AAA B 1.0: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

Battleship Gray

#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

Blue Gray

#6699CC Palette

W 3.0:1 Fail B 7.0: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

Old Silver

#848482 Palette

W 3.7:1 Fail B 5.6: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

Gray scales power typography, borders, surfaces, and disabled states. Cool blue-grays pair with tech brands; warmer grays suit editorial and print-inspired UIs.

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.

Popular Gray Shades Glossary

Gray notes below focus on neutral roles—text, borders, surfaces—so each step in a gray scale earns its place.

What is Charcoal?

Charcoal (#36454F) is a cool dark gray with a hint of blue-green. Excellent dark-UI surface above pure black.

What is Silver?

Silver (#C0C0C0) is a classic mid-light metal gray. Use for dividers, skeletons, and neutral illustration fills.

What is Slate Gray?

Slate Gray (#708090) is a blue-leaning mid gray. Reliable for secondary text, icons, and muted chrome.

What is Gainsboro?

Gainsboro (#DCDCDC) is a light CSS gray for borders and disabled fills. Quieter than pure silver on large areas.

What is Gunmetal?

Gunmetal (#2A3439) is a dark blue-gray metal tone. Premium dark surface for hardware and tech brands.

What is Dim Gray?

Dim Gray (#696969) reads as a muted mid-tone gray in digital palettes. Its RGB mix (105, 105, 105) skews toward muted gray work—especially skeleton loaders.

What is Cool Gray?

Cool Gray (#8C92AC) is a light gray with a balanced character. Around HSL(228, 16%, 61%), it stays useful for typography hierarchy.

What is Platinum?

Platinum (#E5E4E2) brings a metallic, pale note to the gray family. On screens it stays readable for skeleton loaders when contrast is checked.

More Gray color definitions

White (#FFFFFF): White (#FFFFFF) is a pale gray with a muted character. It pairs well with neutrals and holds up in disabled controls.
Snow (#FFFAFA): Snow (#FFFAFA) brings a soft, pale note to the gray family. Its RGB mix (255, 250, 250) skews toward soft gray work—especially borders and dividers.
White Smoke (#F5F5F5): Reach for White Smoke (#F5F5F5) when you need a pale gray that feels muted. Around HSL(0, 0%, 96%), it stays useful for disabled controls.
Ghost White (#F8F8FF): Ghost White (#F8F8FF) reads as a muted pale gray in digital palettes. On screens it stays readable for elevation surfaces when contrast is checked.
Light Gray (#D3D3D3): Light Gray (#D3D3D3) lands as a pale gray—muted enough for elevation surfaces. Its RGB mix (211, 211, 211) skews toward muted gray work—especially elevation surfaces.
Dark Gray (#A9A9A9): Dark Gray (#A9A9A9) brings a muted, light note to the gray family. On screens it stays readable for skeleton loaders when contrast is checked.
Gray (#808080): Reach for Gray (#808080) when you need a mid-tone gray that feels muted. It pairs well with neutrals and holds up in neutral illustration fills.
Light Slate Gray (#778899): Designers pick Light Slate Gray (#778899) as a mid-tone gray accent with a balanced vibe. Around HSL(210, 14%, 53%), it stays useful for neutral illustration fills.
Dark Slate Gray (#2F4F4F): Dark Slate Gray (#2F4F4F) is a deep gray with a dramatic character. It pairs well with neutrals and holds up in disabled controls.
Outer Space (#414A4C): Reach for Outer Space (#414A4C) when you need a deep gray that feels muted. Around HSL(190, 7%, 27%), it stays useful for disabled controls.
Jet (#343434): Jet (#343434) is a near-black gray. Softens dark themes compared with #000 while staying clearly “black.”
Raisin Black (#242124): Designers pick Raisin Black (#242124) as a very dark gray accent with a muted vibe. It pairs well with neutrals and holds up in typography hierarchy.
Eerie Black (#1B1B1B): Eerie Black (#1B1B1B) lands as a very dark gray—muted enough for elevation surfaces. Its RGB mix (27, 27, 27) skews toward muted gray work—especially elevation surfaces.
Black (#000000): Black (#000000) is a very dark gray with a muted character. Around HSL(0, 0%, 0%), it stays useful for typography hierarchy.
Ash Gray (#B2BEB5): Reach for Ash Gray (#B2BEB5) when you need a light gray that feels muted. It pairs well with neutrals and holds up in neutral illustration fills.
Battleship Gray (#848482): Battleship Gray (#848482) reads as a muted mid-tone gray in digital palettes. Its RGB mix (132, 132, 130) skews toward muted gray work—especially skeleton loaders.
Davys Gray (#555555): Davys Gray (#555555) lands as a deep gray—muted enough for elevation surfaces. On screens it stays readable for borders and dividers when contrast is checked.
Sonic Silver (#757575): Sonic Silver (#757575) is a mid-tone gray with a metallic character. It pairs well with neutrals and holds up in disabled controls.
Spanish Gray (#989898): Spanish Gray (#989898) brings a muted, light note to the gray family. Its RGB mix (152, 152, 152) skews toward muted gray work—especially borders and dividers.
Quick Silver (#A6A6A6): Reach for Quick Silver (#A6A6A6) when you need a light gray that feels metallic. Around HSL(0, 0%, 65%), it stays useful for disabled controls.
Silver Chalice (#ACACAC): Silver Chalice (#ACACAC) reads as a metallic light gray in digital palettes. On screens it stays readable for elevation surfaces when contrast is checked.
Manatee (#979AAA): Designers pick Manatee (#979AAA) as a light gray accent with a muted vibe. It pairs well with neutrals and holds up in typography hierarchy.
Cadet Gray (#91A3B0): Cadet Gray (#91A3B0) lands as a light gray—balanced enough for elevation surfaces. Its RGB mix (145, 163, 176) skews toward balanced gray work—especially elevation surfaces.
Blue Gray (#6699CC): Blue Gray (#6699CC) brings a balanced, light note to the gray family. On screens it stays readable for skeleton loaders when contrast is checked.
Paynes Gray (#536878): Reach for Paynes Gray (#536878) when you need a mid-tone gray that feels balanced. It pairs well with neutrals and holds up in neutral illustration fills.
Roman Silver (#838996): Roman Silver (#838996) reads as a metallic mid-tone gray in digital palettes. Its RGB mix (131, 137, 150) skews toward metallic gray work—especially skeleton loaders.
Old Silver (#848482): Designers pick Old Silver (#848482) as a mid-tone gray accent with a metallic vibe. Around HSL(60, 0%, 51%), it stays useful for neutral illustration fills.
Nickel (#727472): Nickel (#727472) lands as a mid-tone gray—muted enough for elevation surfaces. On screens it stays readable for borders and dividers when contrast is checked.
Granite Gray (#676767): Granite Gray (#676767) is a mid-tone gray with a muted character. It pairs well with neutrals and holds up in disabled controls.
Medium Gray (#BEBEBE): Medium Gray (#BEBEBE) brings a muted, light note to the gray family. Its RGB mix (190, 190, 190) skews toward muted gray work—especially borders and dividers.
Taupe Gray (#8B8589): Reach for Taupe Gray (#8B8589) when you need a mid-tone gray that feels muted. Around HSL(320, 2%, 53%), it stays useful for disabled controls.
Rocket Metallic (#8A7F80): Rocket Metallic (#8A7F80) reads as a metallic mid-tone gray in digital palettes. On screens it stays readable for elevation surfaces when contrast is checked.
Cinereous (#98817B): Designers pick Cinereous (#98817B) as a mid-tone gray accent with a balanced vibe. It pairs well with neutrals and holds up in typography hierarchy.
Timberwolf (#DBD7D2): Timberwolf (#DBD7D2) lands as a pale gray—muted enough for elevation surfaces. Its RGB mix (219, 215, 210) skews toward muted gray work—especially elevation surfaces.
Silver Sand (#BFC1C2): Silver Sand (#BFC1C2) is a pale gray with a metallic character. Around HSL(199, 2%, 75%), it stays useful for typography hierarchy.
Pale Silver (#C9C0BB): Pale Silver (#C9C0BB) brings a metallic, pale note to the gray family. On screens it stays readable for skeleton loaders when contrast is checked.
Shadow Blue (#778BA5): Reach for Shadow Blue (#778BA5) when you need a mid-tone gray that feels balanced. It pairs well with neutrals and holds up in neutral illustration fills.
Stormcloud (#4F666A): Stormcloud (#4F666A) reads as a balanced mid-tone gray in digital palettes. Its RGB mix (79, 102, 106) skews toward balanced gray work—especially skeleton loaders.
Dark Charcoal (#333333): Designers pick Dark Charcoal (#333333) as a deep gray accent with a muted vibe. Around HSL(0, 0%, 20%), it stays useful for neutral illustration fills.
Graphite (#383838): Graphite (#383838) lands as a deep gray—muted enough for elevation surfaces. On screens it stays readable for borders and dividers when contrast is checked.
Iron (#4C4C4C): Iron (#4C4C4C) is a deep gray with a metallic character. It pairs well with neutrals and holds up in disabled controls.
Smoke (#738276): Smoke (#738276) brings a muted, mid-tone note to the gray family. Its RGB mix (115, 130, 118) skews toward muted gray work—especially borders and dividers.
Dove Gray (#6D6D6D): Reach for Dove Gray (#6D6D6D) when you need a mid-tone gray that feels muted. Around HSL(0, 0%, 42%), it stays useful for disabled controls.
Cloud Gray (#B6B6B6): Cloud Gray (#B6B6B6) reads as a muted light gray in digital palettes. On screens it stays readable for elevation surfaces when contrast is checked.
Fog (#D6D6D6): Designers pick Fog (#D6D6D6) as a pale gray accent with a soft vibe. It pairs well with neutrals and holds up in typography hierarchy.
Mist Gray (#C4C4C4): Mist Gray (#C4C4C4) lands as a pale gray—soft enough for elevation surfaces. Its RGB mix (196, 196, 196) skews toward soft gray work—especially elevation surfaces.
Stone Gray (#928E85): Stone Gray (#928E85) is a light gray with a muted character. Around HSL(41, 5%, 54%), it stays useful for typography hierarchy.

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.