Color Gris: código #808080

Gris

#808080

Códigos del color

  • HEX#808080
  • RGBrgb(128, 128, 128)
  • HSLhsl(0, 0%, 50%)
  • HSVhsv(0, 0%, 50%)
  • CMYKcmyk(0%, 0%, 0%, 50%)
  • LABlab(53.6% 0 0)
  • OKLCHoklch(60% 0 0)

Sobre el color Gris

Gris tiene el código HEX #808080, que corresponde a rgb(128, 128, 128) en el modelo RGB. En el círculo cromático, su tono está en 0°, con 0% de saturación y 50% de luminosidad (hsl(0, 0%, 50%)).

Con una saturación muy baja (o una luminosidad extrema) funciona como color neutro, fácil de combinar con casi cualquier otro.

Como fondo pide texto oscuro: el negro alcanza un contraste de 5,31:1 sobre él, frente a 3,94:1 del blanco.

Para impresión, la conversión aproximada es cmyk(0%, 0%, 0%, 50%). Confírmala siempre con el perfil de color de la imprenta, porque el resultado depende del papel y la tinta.

Tonos más claros

Tonos más oscuros

Combinaciones con Gris

Complementaria

#808080 · #808080

Análoga

#808080 · #808080 · #808080

Tríada

#808080 · #808080 · #808080

Tetrádica

#808080 · #808080 · #808080 · #808080

Complementaria dividida

#808080 · #808080 · #808080

Monocromática

#404040 · #666666 · #808080 · #A6A6A6 · #CCCCCC

Gris con texto blanco y negro

Texto blanco Aa Bb Cc 123
3,94:1 · solo texto grande
Texto negro Aa Bb Cc 123
5,31:1 · AA

Prueba otras combinaciones en el verificador de contraste

Cómo se percibe el gris

#808080 está justo a mitad de camino entre el negro y el blanco en valores RGB (128, 128, 128). Al no tener matiz, el gris se percibe como neutro, discreto y equilibrado, aunque según lo que lo rodee también puede resultar frío, serio o corporativo. En decoración, el cemento pulido y el hormigón visto le han dado un aire urbano y actual; en moda, es la base de la sastrería y de las sudaderas. Como siempre, estos significados son culturales: el mismo gris puede verse elegante en un traje y apagado en un día nublado.

Gris y accesibilidad: el error más común

El gris medio engaña. El texto #808080 sobre blanco tiene un contraste de unos 3,9:1: cumple el umbral de 3:1 de WCAG para texto grande, pero no alcanza el mínimo de 4,5:1 para texto normal. Es el problema clásico de los placeholders, pies de foto y textos “secundarios” que lucen bien en el mockup y se vuelven ilegibles en el móvil bajo el sol. Sobre negro, el mismo gris llega a unos 5,3:1. Si necesitas un gris para texto sobre blanco, oscurécelo hasta cerca de #767676, el gris más claro que todavía llega a 4,5:1. Pruébalo siempre en el verificador de contraste y consulta la guía de contraste y accesibilidad.

¿Gris cálido o gris frío?

Grises fríos

Tienen un ligero toque azul, como el gris marengo (#36454F). Van bien con interfaces, tecnología y espacios minimalistas.

Grises cálidos

Tiran hacia el beige o el marrón y hacen los espacios más acogedores, sobre todo junto a madera y tejidos naturales. Al ser totalmente neutro, #808080 se inclina hacia uno u otro lado según los colores vecinos.

Cómo combinarlo

El gris es el fondo ideal para un color de acento. Algunas parejas seguras:

Cómo usarlo en CSS

:root {
  --color-gray: #808080;
  --color-gray-rgb: 128, 128, 128;
}

.elemento {
  background-color: var(--color-gray);
  color: #000000;
}

Colores parecidos

Usa Gris en nuestras herramientas