La versión corta
- Un degradado gris se ve cuidado cuando sus grises llevan un ligero matiz, frío hacia el azul o cálido hacia el marrón.
- Mezclar grises cálidos y fríos en un degradado lo hace parecer sucio, así que elige una temperatura y mantenla.
- Los grises metálicos salen de una banda nítida y brillante entre paradas más oscuras, que imita la luz al rozar una superficie.
- Los degradados grises forman bandas más visibles que los de colores, y una capa de grano fino es el arreglo habitual.
- Un solo color de acento saturado contra un degradado gris hace que todo el diseño parezca intencionado.
En esta página
Un degradado gris deja de ser aburrido en cuanto sus grises tienen matiz. Los grises neutros puros, con el mismo rojo, verde y azul, resultan planos y digitales. Empújalos un poco hacia el frío, hacia el azul, y obtienes niebla, pizarra y acero; empújalos hacia el cálido, hacia el marrón, y obtienes piedra, hormigón y peltre. Añade una luz que venga de algún sitio y un color de acento, y el gris se vuelve sereno, moderno y discretamente seguro. A continuación, los códigos para cada uno.
Gris cálido o gris frío: elige uno
Los grises fríos son técnicos, limpios y precisos. Los grises cálidos son arquitectónicos, naturales y suaves. Ambos funcionan de maravilla solos. Juntos en un degradado pelean, y el resultado parece una mancha. Mira las muestras de abajo por pares: la fila superior tira al azul, la inferior al marrón, y la diferencia es pequeña pero evidente una vez que la has visto.
Códigos de degradado gris frío y cálido
Niebla y pizarra son la pareja fría: niebla para composiciones claras y aireadas y pizarra para las oscuras y serias. Tormenta añade una nube iluminada, que da profundidad real a un gris oscuro. Piedra y hormigón son la pareja cálida, más cercana a los materiales de construcción, y el grafito es el casi negro que puedes usar en lugar del negro liso.
Si vas aún más oscuro, los códigos de degradados negros continúan desde el grafito. Para diseños construidos con un solo tono en muchos niveles de luminosidad, consulta el degradado monocromo.
Plata, acero y otros degradados de gris metálico
El metal no es un color, es un reflejo. Un degradado plateado funciona gracias a una banda nítida y brillante apretada entre paradas más oscuras, como la luz al rozar una superficie curva. El metal oscuro usa el mismo truco a un nivel más oscuro, y el acero cepillado añade finas líneas paralelas. Son atrevidos, así que úsalos para una insignia, una placa de título o un solo panel y no para toda la página.
El acero cepillado queda mejor cuando las líneas se apoyan sobre un degradado suave e iluminado y no solas. Dos capas lo consiguen:
.steel {
background-color: #b9bec4;
background-image:
repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
linear-gradient(135deg, #9ea4ab 0%, #e8eaed 45%, #b9bec4 55%, #7f868e 100%);
}Gris más un color
Pocos fondos resaltan un único color fuerte tan bien como el gris. El acento se ve más brillante contra el neutro que contra otros colores, así que con poco basta: una palabra, un botón, una línea. Elige el acento según el sector y el ambiente.
Hex
#3b82f6Se lee como
Bueno para
Hex
#f97316Se lee como
Bueno para
#a3e635Se lee como
Bueno para
#f2c6c2Se lee como
Bueno para
#c9a24aSe lee como
Bueno para
Hay esquemas completos construidos así en las paletas de colores tech y las paletas de colores neutros.
Un gris que parece intencionado
Parece sin terminar
- Grises neutros puros sin matiz
- Grises cálidos y fríos en una misma mezcla
- Bandas visibles sobre una superficie lisa
- Tres o cuatro colores de acento
- Texto gris medio sobre fondo gris medio
Parece intencionado
- Un ligero matiz azul o marrón en todo el degradado
- Una temperatura de principio a fin
- Un grano fino sobre todo el degradado
- Un acento, usado con moderación
- Texto casi blanco o casi negro, nunca gris medio
El banding merece su propio aviso. Los grises no tienen tono que distraiga al ojo, así que cada escalón de un degradado suave se ve, sobre todo en pantallas grandes y tras la compresión. Una capa de ruido ligera lo oculta; la textura de ruido en CSS tiene un fragmento, y el banding en degradados explica por qué ocurre.
Degradados grises en webs y en modo oscuro
En la web, los degradados grises hacen su mejor trabajo en silencio. Un degradado niebla detrás de una sección de funciones la separa de una página blanca sin un borde duro. En modo oscuro, un degradado grafito que se aclara ligeramente hacia la parte superior de una tarjeta le da profundidad, donde un gris plano parecería un agujero. Mantén pequeño el cambio entre paradas, unos pocos puntos de luminosidad, para que el degradado se lea como luz y no como decoración. El diseño en modo oscuro cubre las reglas más amplias para interfaces oscuras, de los colores de superficie al contraste.
Fondos de degradado gris en la práctica
Arquitectos, estudios de ingeniería y empresas de software usan el gris porque deja hablar al trabajo. Un degradado pizarra con texto blanco y un acento azul hace que el anuncio de un proyecto parezca preciso; un degradado piedra cálido con texto grafito hace que la portada de un porfolio resulte táctil. El branding para estudios de arquitectura muestra hasta dónde llega una paleta contenida.
Una imagen de enlace de LinkedIn sobre un Mark pizarra. Texto blanco en el lado más oscuro; la zona iluminada queda lejos de las palabras.
Los fondos sutiles son donde un sistema de diseño da sus frutos. En Gradiently, un Mark gris lleva su propio grano, que mantiene a raya el banding, y la tinta automática elige texto claro u oscuro línea a línea a medida que el gris cambia por el encuadre.
Preguntas frecuentes
¿Cómo hago que un degradado gris resulte menos aburrido?
Da a los grises un ligero matiz frío o cálido, ilumina el degradado desde un lado, añade grano fino y usa un color de acento saturado.
¿Cuál es el CSS de un degradado plateado?
Usa una banda brillante entre paradas más oscuras, por ejemplo linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%).
¿Se dice gray gradient o grey gradient?
Las dos formas son correctas. Gray es la grafía estadounidense y grey la británica; significan exactamente el mismo color.
¿Qué color combina mejor con un degradado gris?
Un acento fuerte: azul eléctrico o lima con grises fríos; naranja señal, rubor o latón con grises cálidos.
¿Por qué mi degradado gris tiene rayas?
Las mezclas de gris suaves muestran cada escalón de color, sobre todo tras la compresión. Añade una capa de ruido ligera y exporta como PNG.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil