Gray

HEX: #808080 | Modern Palette

On White
3.95:1
FAIL
On Black
5.32:1
PASS

Color Specifications

HEX
#808080
RGB
128, 128, 128
HSL
0°, 0% ,50%
CMYK
0, 0, 0, 49.8

About Gray

Gray (#808080) is a color with RGB(128, 128, 128) and HSL(0°, 0%, 50.2%). It is commonly associated with Minimal moods. In design, it fits Monochrome, Muted styles and is suitable for Text, Background, Border. Its complementary color is Gray (#808080), which creates strong contrast. Its triadic palette includes Gray (#808080) and Gray (#808080). The name comes from *grēwaz (Proto-Germanic).

  • HEX: #808080
  • RGB: 128, 128, 128
  • HSL: 0°, 0%, 50.2%
  • Mood: Minimal
  • Style: Monochrome, Muted
  • Use case: Text, Background, Border
  • Complementary color: Gray (#808080)
  • Triadic colors: Gray (#808080), Gray (#808080)
  • The name comes from *grēwaz (Proto-Germanic).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #808080 from deepest shade to lightest tint.

Color Characteristics

Accessibility Simulation

Deuteranopia #808080
Protanopia #808080
Tritanopia #808080
Achromatopsia #808080

Frequently Asked Questions

Gray (#808080) is a color with RGB(128, 128, 128) and HSL(0°, 0%, 50.2%).

#808080 pairs strongly with Gray (#808080) as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#808080 is suitable for Text, Background, Border and works well with Monochrome, Muted styles.

#808080 is commonly associated with Minimal.

The name Gray is linked to *grēwaz from Proto-Germanic, meaning gray.

Name, History & Etymology

Origin Word *grēwaz
Meaning gray
Language Proto-Germanic
First Recorded Use Old English

History

The word 'gray' has deep roots in Germanic languages. It evolved from the Proto-Germanic '*grēwaz', which also gave rise to similar words in Old High German ('grāo'), Old Norse ('grár'), and Dutch ('grauw'). In Old English, it appeared as 'grǣġ'. The meaning has consistently referred to the achromatic color between black and white, often associated with old age, dullness, or neutrality. Its spelling has remained relatively stable in English, with 'gray' being the predominant American spelling and 'grey' being more common in British English, though both are widely understood.

First Recorded Use

Before 12th Century

Cultural Associations

Gray is often associated with maturity, wisdom, and dignity due to its connection with the graying of hair in older individuals. It can also symbolize neutrality, compromise, and balance, as it sits between two extremes (black and white). In some contexts, gray can evoke feelings of melancholy, dullness, or industrialism. It is a common color in professional attire, suggesting sophistication and conservatism. In art and photography, gray tones are crucial for creating depth, mood, and realism.

Similar Named Colors

Battleship Grey #848482 ΔE 1.87
Sonic Silver #757575 ΔE 4.32
Taupe Gray #8B8589 ΔE 4.91
Rocket Metallic #8A7F80 ΔE 5.78

Code Snippets

/* Background */
.element {
    background-color: #808080;
}

/* Text */
.element {
    color: #808080;
}

/* Border */
.element {
    border: 1px solid #808080;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #808080,
        #808080
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #808080,
        #808080
    );
}

// SCSS variable
$gray: #808080;

// With RGB channels (useful for rgba() usage)
$gray-r: 128;
$gray-g: 128;
$gray-b: 128;

// Usage
.element {
    background-color: $gray;
    color: rgba($gray-r, $gray-g, $gray-b, 0.8);
}