The gray swatch is a commonly used color in web design and graphic design. It represents a neutral mid-tone gray. The specific hex code or RGB code for this gray depends on the color system being used. In HTML and CSS, there are a few different ways to specify this medium gray color.
Hex Code
The hex code is a 6-digit code representing the RGB values of a color. It is prefixed with a # symbol. The hexadecimal code for the main gray swatch is #808080. This code represents a medium gray with equal parts red, green and blue (RGB values of 128, 128, 128).
Here is an example of using the hex code in HTML:
This hex code can be used in HTML, CSS, graphic design applications like Photoshop and Illustrator, and many other places that accept hex color input. The advantage of the hex code is that it is very specific – there is only one possible color for that code. The downside is that hex codes can be difficult to remember or visualize.
RGB Code
The RGB code represents the amounts of red, green and blue light that make up a color. The RGB code for medium gray is rgb(128, 128, 128). This means 128 parts of red, 128 parts of green, and 128 parts of blue light.
Here is an example of using the RGB code in CSS:
“`css
.box {
background-color: rgb(128, 128, 128);
}
“`
RGB codes are useful in CSS, programming, and anywhere that accepts RGB color input. The values range from 0 to 255. RGB codes can be a bit easier to read and visualize than hex codes, but they are less precise.
Color Names
In HTML and CSS, you can also refer to colors by their names. The main gray swatch color is called “gray” or “grey”.
Here is an example in CSS:
“`css
div {
background-color: gray;
}
“`
This will produce the same medium gray color as the hex and RGB values above. Color names are the easiest to remember, but they are not as precise. There are many shades of “gray” and the exact tone may vary slightly across browsers and programs.
HSL Code
The HSL (hue, saturation, lightness) code is another way to define colors. For the medium gray, the HSL code is:
hsl(0, 0%, 50%)
This means:
– Hue: 0 (degrees around color wheel)
– Saturation: 0% (neutral gray has no saturation)
– Lightness: 50% (mid-tone between white and black)
Here is an example in CSS:
“`css
div {
background-color: hsl(0, 0%, 50%);
}
“`
The HSL code allows you to adjust the shade of gray easily by changing the lightness value. It is useful when you need to modify the lightness of a color.
Web-Safe Gray
For web design, there is a concept of “web-safe” colors. These are 216 specific colors that will not dither or deteriorate on low-color displays. The web-safe gray has a hex code of #808080. This is the same medium gray discussed above.
Web-safe colors are less important these days with high color support on modern screens. But #808080 is still considered the default web medium gray.
Material Design Gray
Google’s Material Design system defines a palette of colors for UI design. The medium gray in Material Design has a hex code of #9E9E9E.
Here is an example in CSS:
“`css
div {
background-color: #9E9E9E; /* Material medium gray */
}
“`
This is slightly lighter than the traditional medium gray #808080. It has RGB values (158, 158, 158). Material Design grays go from #FFFFFF (white) to #000000 (black) in steps of 10% darkness.
Gray Swatch in Design Systems
Many design systems like Bootstrap, Tailwind CSS, and Basekit use the middle gray #808080 as the default swatch. Here are some examples:
**Bootstrap gray class:**
“`html
“`
This applies a background of #808080.
**Tailwind CSS gray class:**
“`html
“`
This applies a background of #808080 also.
So in summary, the standard web and UI medium gray is #808080. This hex code should be used for the primary gray swatch in most cases. Material Design uses a slightly lighter shade of #9E9E9E. Color names like “gray” or “grey” can also be used in HTML and CSS.
Additional Gray Shades
The medium gray #808080 sits in the middle of the full gray spectrum. Here are some other common shades of gray used in web and graphic design:
| Shade | Hex Code |
|---|---|
| Lightest Gray | #F2F2F2 |
| Light Gray | #E0E0E0 |
| Medium Gray | #808080 |
| Dark Gray | #A9A9A9 |
| Darkest Gray | #696969 |
There are infinite shades of gray between white and black. The medium gray #808080 sits at 50% brightness. Lighter grays are often used for backgrounds, borders, and secondary UI elements. Darker grays are used for text and dividing lines.
Gray Color Psychology
Gray has a neutral but balanced psychological effect. It represents composure and maturity. Light grays can suggest refinement and elegance. Dark grays are more formal and conservative. Medium grays like #808080 strike the perfect balance as they are not too light or heavy. This makes medium gray a very versatile and usable color in design and branding.
Conclusion
The standard medium gray swatch has an hex code of #808080. This represents an even mix of red, blue and green light to produce a neutral mid-tone gray. This color can be specified in HTML, CSS, design apps, and anywhere colors are defined in code. Other shades of gray range from light #F2F2F2 to dark #696969. Medium gray strikes the perfect neutral balance and is widely used in UI design, web design, and graphic design. So if you need a clean, professional and versatile gray, use the medium gray swatch #808080.