12 Different Shades of Gray (+ HEX codes)

Explore all shades of gray, from lighter to darker shades. See HEX codes, shade names, and gray color palettes. Click any shade to copy its HEX code.

Grey is what the rest of a palette stands on. The decision that matters is its temperature: a grey with blue in it feels technical, one with brown in it feels human.

Never use mid-grey text on a light-grey background — it is the most common accessibility failure there is.

wild sand
#f5f5f5
mercury
#e9e9e9
alto
#dcdcdc
silver
#c4c4c4
silver chalice
#acacac
gray
#939393
boulder
#7b7b7b
dove gray
#6e6e6e
scorpion
#565656
tundora
#4a4a4a
mine shaft
#3e3e3e
cod gray
#191919

Gray: HEX & RGB Codes

gray has the following primary color codes:

HEX: #f5f5f5
RGB: (245, 245, 245).

Explore a wide range of gray shades using our interactive color picker. Click any color to copy its HEX code and use it in your project!

Explore tints of gray

Wild Sand
#f5f5f5
Wild Sand
#f5f5f5
Wild Sand
#f7f7f7
Wild Sand
#f7f7f7
Alabaster
#fafafa
Alabaster
#fafafa
Alabaster
#fafafa
Alabaster
#fcfcfc
Alabaster
#fcfcfc
White
#ffffff

Explore shades of gray

Aubergine
#330a0a
Cedar
#4b1616
Buccaneer
#622727
Lotus
#7b3d3d
Au Chico
#935858
Pharlap
#ab7878
Quicksand
#c49c9c
Wafer
#ddc6c6

gray in HEX, RGB, HSL and CMYK

HEX	#808080
RGB	rgb(128, 128, 128)
HSL	hsl(0, 0%, 50%)
CMYK	cmyk(0%, 0%, 0%, 50%)

Tints and shades of gray

Tints add white and shades add black, keeping the hue. Use them for hover states, borders and backgrounds that still belong to the same colour.

Tints (lighter)

#939393
#a7a7a7
#bababa
#cecece
#e1e1e1
#f5f5f5

Shades (darker)

#6c6c6c
#585858
#454545
#313131
#1e1e1e
#0a0a0a

Colours that work with gray

Complementary

#808080 #808080

Opposite on the colour wheel. Maximum contrast — use it for accents, not for half the page.

Analogous

#808080 #808080 #808080

Neighbours on the wheel. Calm and cohesive, the safest way to build a palette.

Triadic

#808080 #808080 #808080

Three colours evenly spaced. Lively and balanced; let one dominate.

Text on gray

Example Primary text

White text on gray3.95:1Large text only

Example Primary text

Near-black text on gray4.49:1Large text only

Measured against WCAG: 4.5:1 for body text, 3:1 for large text. Test your own pair in the Contrast Checker

gray shade chart

Shade chart showing five steps of gray, from light tint to deep shade

Right-click to save the chart, or copy the individual codes above.