Acerca de Gris
Gris (gray) es un gris medio y apagado con el código hex #808080, o rgb(128, 128, 128). En HSL tiene un tono de 0°, 0 % de saturación y 50 % de luminosidad. CSS también acepta la escritura grey para exactamente el mismo color. Es uno de los 148 colores con nombre que entiende cualquier navegador, así que puedes escribir color: gray; en lugar del valor hex.
Uso del gris para texto y fondos
| Combinación | Relación de contraste | WCAG |
|---|---|---|
| Texto gris sobre blanco | 3.95 : 1 | AA solo texto grande |
| Texto gris sobre negro | 5.32 : 1 | AA |
Sobre un fondo gris, usa texto en negro (5.32 : 1). WCAG exige al menos 4.5 : 1 para texto normal y 3 : 1 para texto grande. Comprueba otras combinaciones con el Verificador de contraste.
CSS
.element {
color: gray; /* or #808080 */
background-color: #808080;
border: 1px solid rgb(128 128 128 / 50%);
}Colores con nombre similares
Gris pizarra (#708090), Gris pizarra claro (#778899), Gris tenue (#696969), Azul cadete (#5f9ea0), Verde mar oscuro (#8fbc8f), Marrón rosado (#bc8f8f).
Buscador de Nombres de Color
Pega un código HEX para obtener su nombre más cercano y legible, además de nombres de token limpios para tu CSS, SCSS, JavaScript o configuración de Tailwind.