La versión corta
- El color plano gana donde importan la claridad, la reproducción exacta y los tamaños pequeños, como iconos, controles de interfaz, fondos de texto y la impresión a un color.
- Los degradados ganan donde una superficie necesita ambiente, profundidad o carácter distintivo, como fondos, portadas, cabeceras, posts sociales y campos de marca.
- El contraste de un degradado cambia a lo largo de su superficie, así que el texto encima debe comprobarse en el peor punto y no en el promedio.
- La mayoría de las identidades visuales sólidas usan un degradado como firma y un color plano tomado de él como reserva de todos los días.
- Las pantallas pasaron de estilos brillantes y con textura al diseño plano a comienzos de la década de 2010 y volvieron después hacia degradados más suaves, así que ninguno es sin más moderno o anticuado.
En esta página
En la cuestión del degradado vs diseño plano, ningún bando gana en todo. El color plano es más claro, se reproduce con exactitud y sobrevive a los tamaños diminutos y a la impresión a un color. Los degradados transmiten ambiente, sugieren luz y profundidad y dan a una marca mucho más margen para ser distintiva. La respuesta práctica para la mayoría de las marcas es usar ambos: un degradado donde la superficie es grande y expresiva, y un color plano, tomado del degradado, donde la tarea es pequeña, funcional o se imprime a una sola tinta.
Dónde gana el color plano
- Tamaños pequeños: los favicons, las insignias de apps y los iconos pierden el detalle de un degradado, mientras que un color plano se mantiene nítido
- Controles de interfaz: los botones, los interruptores y los estados se leen con más claridad cuando cada estado es de un solo color
- Detrás de textos largos: un contraste constante significa que todas las líneas se leen igual de bien
- Impresión a un color: el bordado, la serigrafía, el grabado, los sellos y los trabajos a una tinta no pueden reproducir una mezcla
- Coincidencia exacta: un único color plano puede igualarse entre materiales con mucha más fiabilidad que una mezcla
- Gráficos y datos: los colores planos mantienen las categorías distintas y comparables
Dónde ganan los degradados
- Superficies grandes: fondos, portadas, cabeceras y carteles donde un color plano se siente vacío
- Ambiente y luz: una mezcla sugiere una hora del día, un material o un resplandor que un solo color no puede
- Carácter distintivo: solo hay un número limitado de tonos únicos distinguibles, y la mayoría están ocupados en cualquier categoría
- Feeds sociales: un fondo de degradado bien construido destaca entre un desfile de fotos y plantillas planas
- Profundidad en interfaces: un degradado sutil en una cabecera o una tarjeta principal separa capas sin sombras
- Movimiento: los degradados pueden ir a la deriva y respirar; mira los fondos de degradado animados
Degradado vs plano, factor por factor
| Factor | Color plano | Degradado |
|---|---|---|
| Legibilidad | Contraste constante en todas partes | El contraste varía; comprueba el peor punto |
| Reconocimiento | Fuerte si tienes un tono poco común | Fuerte si la receta se mantiene coherente |
| Carácter distintivo | Limitado por el número de tonos | Un espacio enorme de combinaciones |
| Tamaños pequeños | Excelente | A menudo turbio o perdido |
| Impresión | Exacto, incluso a una tinta | Necesita todo color; puede formar bandas o cambiar |
| Estados de interfaz | Claros y predecibles | Mejor limitado a una o dos zonas de énfasis |
| Ambiente y profundidad | Limitados | Excelentes |
| Tamaño de archivo y esfuerzo | Trivial | Pequeño en CSS, mayor como imágenes y vídeo |
La cuestión de la legibilidad
Sobre un fondo plano, si una palabra pasa el contraste, todas lo pasan. Sobre un degradado, el contraste cambia al cambiar el color, así que un titular puede leerse perfectamente en un extremo y desaparecer en el otro. Mide siempre el contraste en el punto más claro detrás del texto claro, o en el más oscuro detrás del texto oscuro. El método completo está en el texto sobre un degradado y en el contraste de color y la accesibilidad.
Un degradado que atraviesa las palabras: el contraste cambia letra a letra.
El mismo degradado que hace sitio a las palabras: se mantiene la expresión y vuelve la legibilidad.
Una breve historia: plano y luego degradados otra vez
Durante los años 2000, las pantallas eran brillantes: botones biselados, brillos de cristal y texturas que imitaban el cuero y el papel. A comienzos de la década de 2010, los grandes sistemas operativos pasaron al diseño plano, con colores sólidos, iconos sencillos y sin falsa profundidad, y buena parte de la web los siguió. Desde mediados de esa década volvieron los degradados más suaves, ahora como mezclas lisas de dos o tres colores en vez de efectos brillantes, y algunos iconos de marca muy visibles pasaron a degradados. Más en la historia de los degradados.
La lección es que ningún estilo es moderno para siempre. Lo que envejece un diseño es el tratamiento concreto: el brillo excesivo envejece un degradado, y una paleta por defecto envejece un color plano.
Cómo decidir para cada superficie
- 1
Pregunta para qué sirve la superficie
Si ayuda a actuar, leer o comparar, inclínate por lo plano. Si crea un ambiente o presenta la marca, inclínate por el degradado.
- 2
Comprueba el tamaño
Por debajo del tamaño de un icono, usa plano. Los degradados necesitan espacio para mostrar su mezcla.
- 3
Comprueba cómo se reproducirá
Una tinta, un hilo o un grabado significan plano. Las pantallas y la impresión a todo color pueden llevar un degradado.
- 4
Comprueba las palabras
Los textos largos piden un fondo plano o muy calmo. Un titular puede ir sobre un degradado si el contraste aguanta en el peor punto.
- 5
Mantenlos emparentados
Toma tus colores planos de tu degradado para que los dos parezcan siempre una sola marca.
Elige plano para
- Favicons, insignias de apps e iconos pequeños
- Botones, interruptores, pestañas y estados de formularios
- Páginas de texto corrido y tablas de datos
- Bordado, sellos e impresión a una tinta
Elige degradado para
- Portadas, carteles y posts en redes sociales
- Cabeceras web y páginas de lanzamiento
- Campos de marca detrás de logotipos y titulares
- Bucles, fondos de pantalla y aperturas de presentaciones
Usa ambos: un degradado con una reserva plana
Los sistemas más sólidos tratan el degradado como la firma y eligen uno o dos colores planos de su interior para las tareas de todos los días. El tono más profundo se convierte en el color del texto o de los iconos, un tono medio en el color de los botones, y el degradado en sí aparece en portadas, cabeceras y posts. Así consigues expresión y función sin dos paletas sin relación. El degradado como marca lo explica paso a paso.
Cada Mark de Gradiently es un degradado con su propia paleta incluida, así que los colores planos para el texto, los botones y los tamaños pequeños salen de la misma receta que el fondo.
Preguntas frecuentes
¿Es mejor el diseño plano que los degradados?
Ninguno es mejor en todo. El color plano es lo mejor para tamaños pequeños, interfaces e impresión a un color; los degradados, para superficies grandes y expresivas y para ser distintivo.
¿Están pasados de moda los degradados?
No. Los degradados brillantes y cargados se ven anticuados, pero los degradados suaves de dos o tres colores se usan mucho en las identidades de marca e interfaces actuales.
¿Debe mi logotipo ser un degradado o un color plano?
Muchos logotipos usan una versión con degradado para pantallas grandes y una versión plana para tamaños pequeños e impresión a un color. La versión plana la necesitas en cualquier caso.
¿Es más difícil leer texto sobre un degradado?
Puede serlo, porque el contraste cambia a lo largo del degradado. Comprueba el contraste en el peor punto detrás del texto, o deja una zona calma para las palabras.
¿Puedo usar degradados y colores planos juntos?
Sí, y la mayoría de las marcas sólidas lo hacen. Toma los colores planos del interior del degradado para que todo combine.
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
