Black text 5.3:1
Gray is the quiet workhorse of design - backgrounds, borders, text and shadows.
Here are 32 named shades of gray, from Gainsboro and Platinum to Charcoal and Gunmetal, with HEX, RGB, HSL and CMYK codes.
Some lean warm, some lean cool - the HSL values show you which way.
Platinum - lightest32 shades sorted light to darkdarkest - Gunmetal
Download all 32 shades of gray
Photoshop, Illustrator, InDesign, AffinityA Tailwind-style scale built from Gray (#808080), evenly spaced in OKLCH lightness. Paste any other gray to build its own scale, or click a swatch for its codes and contrast.
Something went wrong. Please try again.
Still having trouble? Please contact us and we'll be happy to help!
Hmm, that doesn't look like a color yet. Try #3399cc, rgb(51, 153, 204), hsl(200, 60%, 50%) or a name like Cobalt.
#808080rgb(128, 128, 128)hsl(0, 0%, 50%)cmyk(0%, 0%, 0%, 50%)Tints mixed with white
Shades mixed with black
Tones mixed with gray
Click any swatch to see its codes and contrast. Tints, shades and tones are simple RGB mixes, the classic way painters and print designers make them.
:root {
--brand-50: #f7f7f7;
--brand-100: #e8e8e8;
--brand-200: #d5d5d5;
--brand-300: #bababa;
--brand-400: #9a9a9a;
--brand-500: #808080;
--brand-600: #6b6b6b;
--brand-700: #595959;
--brand-800: #484848;
--brand-900: #3b3b3b;
--brand-950: #262626;
}Next: blend 50 into 950 in the Gradient Generator, test every pair in the Accessible Color Palette, check 900 on 100 with the Contrast Checker or find matching colors on the Color Wheel.
Gray has no hue of its own, so color wheel rules don't apply - it goes with almost everything. These partners are classics:
Gray is neutral, balanced and calm. It rarely draws attention, which makes it perfect for supporting colors: text, dividers, disabled states and the space between things.
A true gray has equal red, green and blue. Slight tints change the mood: Slate Gray and Cadet Gray lean blue and feel cool, while Taupe Gray and Timberwolf lean warm.
CSS has a famous quirk: darkgray (#A9A9A9) is actually lighter than gray (#808080). The names came from two different color lists that were merged. Both spellings, gray and grey, work in CSS.
See gray in complete, ready-made palettes - each one with codes and downloads.
Want a palette built around one exact gray? Start from it in the AI Color Palette Generator or pull colors from a photo with the Image Color Picker.
Gray is #808080, which is rgb(128, 128, 128) and hsl(0, 0%, 50%). For print it is about 0% cyan, 0% magenta, 0% yellow and 50% black. It is also a CSS color keyword, so you can simply write gray in your stylesheet.
There is no fixed number - any gray can be made lighter, darker or more muted. This page lists 32 named shades, from Platinum (#E5E4E2) to Gunmetal (#2A3439). The generator on this page makes a full 50-950 scale and unlimited tints, shades and tones from any gray.
Gray (#808080) has a contrast ratio of 3.94:1 on white and 5.31:1 on black, so it reads best on dark backgrounds or with dark text on top of it. For gray text on white, pick a deeper shade such as Sonic Silver (#757575), which reaches 4.60:1. Test any pair with the Contrast Checker.
Both are correct. Gray is the usual American spelling and grey the British one. CSS accepts both - gray and grey, darkgray and darkgrey, and so on.
Gray (#808080) comes from the original HTML colors, while darkgray (#A9A9A9) comes from the X11 color list, where gray was much lighter (#BEBEBE). When the lists were merged, darkgray ended up lighter than gray.
Charcoal (#36454F) is a very dark gray with a cool blue tint. It is a popular alternative to black for text and dark backgrounds. Even darker tones are on shades of black.