The color #808080 is a perfect middle gray shade, often called just “Gray.” It’s a neutral, balanced color that sits halfway between black and white. It’s calm, cool, and very useful in design because it goes well with almost any other color.
Let’s dive into all the details about this versatile gray color.
Basic Info About #808080 (Gray)
- Hex Code:
#808080 - RGB: (128, 128, 128)
- HSL: (0°, 0%, 50%)
- HSV: (0°, 0%, 50%)
- CMYK: (0%, 0%, 0%, 50%)
This color is exactly in the middle between black (0,0,0) and white (255,255,255), so it looks perfectly balanced and neutral.
RGB Breakdown
In RGB values, #808080 means:
- Red = 128
- Green = 128
- Blue = 128
All three colors have the same value, which is why it produces a true gray without any hint of color tone.
HSL and HSV Values
- HSL (Hue, Saturation, Lightness):
- Hue: 0° (meaning no specific color tint)
- Saturation: 0% (no color intensity)
- Lightness: 50% (middle brightness)
- HSV (Hue, Saturation, Value):
- Hue: 0°
- Saturation: 0%
- Value: 50%
Both HSL and HSV confirm this is a neutral gray with medium brightness.
CMYK Values (For Printing)
- Cyan: 0%
- Magenta: 0%
- Yellow: 0%
- Black: 50%
This means it’s 50% black ink with no other colors — great for grayscale printing.
Shades of Gray (#808080)
Here are some darker grays that are close to #808080:
- #666666
- #4D4D4D
- #333333
- #1A1A1A
- #000000 (Black)
These shades create a nice gradient from medium gray down to pure black.
Tints of Gray (#808080)
Here are lighter grays by adding white:
- #999999
- #B3B3B3
- #CCCCCC
- #E6E6E6
- #FFFFFF (White)
These tints are great for soft backgrounds or subtle design elements.
CSS Examples with #808080
You can easily use this gray color in your web designs. Here’s how:
cssCopyEdit/* Background color */
.gray-bg {
background-color: #808080;
}
/* Text color */
.gray-text {
color: #808080;
}
/* Border color */
.gray-border {
border: 2px solid #808080;
}
HTML examples:
htmlCopyEdit<p style="color:#808080">This text is gray (#808080).</p>
<div style="background-color:#808080; padding: 10px;">This div has a gray background.</div>
Where Is #808080 Used?
Gray (#808080) is one of the most versatile colors. You’ll see it used in:
- Web and app design: Neutral backgrounds, text, borders
- Fashion: Classic suits, casual wear, and accessories
- Interior design: Walls, furniture, carpets
- Graphic design: Logos, icons, and branding when a neutral tone is needed
- Print: Grayscale printing and shading
It’s great when you want a neutral color that won’t distract but still looks clean and modern.
Color Combinations With #808080
- Complementary Colors: Since gray is neutral, it goes with almost every color. It pairs beautifully with bright colors like red, yellow, or blue to make them pop.
- Analogous Colors: Other grays and blacks make smooth blends, creating elegant, monochromatic looks.
- Triadic Colors: You can mix gray with colors like navy blue and burgundy for a stylish combination.
Psychological Meaning of Gray
Gray is often linked to:
- Balance
- Neutrality
- Calmness
- Sophistication
- Practicality
Because it doesn’t carry strong emotions, it’s perfect for professional and minimalist designs.
Spruce Up Your Design with #808080
If you want your design to feel modern and sleek without overwhelming colors, use #808080. It gives a calm, balanced look and pairs well with almost anything — from bold reds to soft pastels.
Summary of #808080 (Gray)
- Hex: #808080
- Type: Neutral medium gray
- RGB: Equal amounts of red, green, and blue (128 each)
- CMYK: 50% black ink
- Looks like: A balanced, neutral gray halfway between black and white
- Used in: Web, print, fashion, interiors, branding
- Feels like: Calm, balanced, professional, neutral
