Gray Color Codes
The color code of Gray is Hex #808080, RGB rgb(128, 128, 128), HSL hsl(0, 0%, 50%) and HSB 0°, 0%, 50%. Gray has no hue at all. All three channels sit at 128, and when they match there is nothing for the eye to read as a color. There are more gray shades than any one list can hold. The 11 named below each come with a full code set you can copy for design and color grading work.
The family
Different Shades of Gray
There are 11 named shades of gray here. Each one links to its own page with the full code set. Click any swatch to copy its hex.
What Is the Color Code for Gray?
The Gray color code has four screen formats and one print format. The screen ones are Hex, RGB, HSL and HSB. The print one is CMYK. Because there is no hue here, three of the five barely differ from one another.
What Is the Hex Code for Gray?
The hex code for Gray is #808080. Hex is the format you use in CSS and in most design tools. The first two digits set red, the next two set green and the last two set blue. All three pairs are the same, which is what makes it a neutral rather than a color.
What Is the RGB Code for Gray?
The RGB code for Gray is rgb(128, 128, 128). RGB counts each channel from 0 to 255. All three are equal, so there is no hue for the eye to pick up.
What Is the HSL / HSB Code for Gray?
The HSL code for Gray is hsl(0, 0%, 50%) and the HSB code is 0°, 0%, 50%. Saturation is near zero, so the hue number is along for the ride. Change it and nothing on screen moves. HSL and HSB are easier to adjust by hand than hex. Move the first number and you change the color. Move the others and you keep the color but change how strong or how light it is.
What Is the CMYK Code for Gray?
The CMYK code for Gray is 0%, 0%, 0%, 50%. CMYK is for print rather than screens. A screen adds light to make color. Ink takes light away. Colors in this range survive the move better than the saturated ones, which is worth knowing if the work has to exist on paper as well. Ask a printer for a Pantone reference on anything that has to match exactly.
What Does the Color Gray Mean?
Grey is the working color of interface design. It carries no meaning of its own, which is exactly why borders, backgrounds, disabled states and body text all use it. It takes the mood of whatever sits beside it. Against a saturated accent it reads as restraint. On its own it reads as unfinished. How much of that a shade carries depends on how strong it is. Blue Gray holds the most chroma here at 54. Dark Gray holds the least at 0, and reads as barely tinted by comparison.
Lightest & Darkest Shades of Gray
The lightest shade of gray is Platinum at #E5E4E2. The darkest is Steel Gray at #43464B. Everything else on this page sits between those two. If you need a background, start from the light end. If you need text, start from the dark end.
Which Gray Is Best for Branding & Design?
It depends what the color has to do. A logo can use any shade here, because a logo does not have to pass a contrast test. A button does, and only one of the 11 shades on this page is dark enough to carry white text at AA. That leaves very little room, so most gray work is done with dark text on a light surface rather than the other way round.
Which Gray Looks Most Professional for Designs?
Steel Gray at #43464B is the safest professional pick, with white text on it reaching 9.48:1. Nothing in this family is loud enough to look cheap, so the choice here is about how much contrast you need rather than about restraint.
Which Gray Shade Increases Attention the Most?
Blue Gray at #6699CC draws the most attention. It carries the highest chroma of any shade here at 54, which is the measure of how far a color sits from grey, and that is what makes it hard to ignore. White text on it only reaches 3.00:1, so use it for the thing you want noticed and not for the thing you want read.
Which Gray Should I Use for a Buy / CTA Button?
Use Steel Gray at #43464B. White text on it scores 9.48:1, which passes AA for button labels. The brighter shades fail that test. Blue Gray only reaches 3.00:1 with white on top, so a button in that color has a label people have to squint at. You get the attention and lose the click.
Gray color tools
Convert Gray Color Codes (Hex, RGB, HSL)
Have a gray value in one format and need it in another? Paste #808080 in and you get rgb(128, 128, 128) back, and the result updates as you type. These three cover the jobs that come up most.
#808080→rgb(128, 128, 128)
Hex to RGB
Paste a hex, get the three channels
128, 128, 128→#808080
RGB to Hex
Go the other way for CSS
#808080→hsl(0, 0%, 50%)
Hex to HSL
For adjusting a shade by hand
Find the Gray Hex Code in Any Image
Upload an image and click the part you want. The picker reads that exact pixel, which saves guessing at a gray in a screenshot, where an interface grey is almost never the one you guessed.
#43464B
Image Color Picker
Click any pixel in a photo to read its hex
Steel Gray
Color Name Finder
Give it a value, get the closest named gray
Build a Gray Color Palette
Start from #808080, or from any of the 11 shades above. The palette tool pulls colors out of an image. The gradient tool blends two values into a run, and #E5E4E2 to #43464B covers this family end to end. The shades and tints tool takes one value and gives you a full scale from it.