CSS Color: Gray
Named CSS color Gray — #808080 in HEX, rgb(128, 128, 128) in RGB, hsl(0, 0%, 50%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | Gray | color: Gray; |
| HEX | #808080 | color: #808080; |
| RGB | rgb(128, 128, 128) | color: rgb(128, 128, 128); |
| HSL | hsl(0, 0%, 50%) | color: hsl(0, 0%, 50%); |
About Gray
Gray is the perfect neutral, sitting at exactly 50% lightness with zero saturation. At hex `#808080`, all three RGB channels are equal at 128. In HSL, the hue is irrelevant (0 degrees by convention) because there is no saturation.
In web design, Gray is the most versatile color. It is used for borders, dividers, placeholder text, disabled states, secondary text, backgrounds, and icons. Every design system relies heavily on a gray scale, making CSS Gray a fundamental building block.
For accessibility, Gray against white achieves approximately 3.9:1 contrast, passing WCAG AA for large text but not for normal text. For body text, consider DimGray or SlateGray which are darker and provide better contrast. Gray against black achieves about 5.3:1.
Gray pairs with everything — it is the ultimate neutral. It is especially effective alongside a single strong accent color, creating clean, modern designs. In Tailwind CSS, `gray-500` or `zinc-500` are very close matches depending on the temperature preference.
FAQ
What is the hex code for Gray?
The CSS named color Gray has the hex code #808080. You can use it in CSS as color: #808080; or simply color: Gray;.
What is Gray in RGB?
In RGB notation, Gray is rgb(128, 128, 128). Use it in CSS as color: rgb(128, 128, 128);.
What is Gray in HSL?
In HSL notation, Gray is hsl(0, 0%, 50%). Use it in CSS as color: hsl(0, 0%, 50%);.
What color category is Gray?
Gray belongs to the Gray color family in the CSS named colors specification.
Can I use the name "Gray" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: Gray; or background-color: Gray; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert Gray to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →