# ¿Degradado o color plano? Cuándo gana cada uno [Canonical HTML page](https://gradiently.design/es/guide/gradient-vs-flat-color) El color plano es claro, barato y exacto. Los degradados están vivos, son distintivos y cuesta más controlarlos. Casi todas las buenas marcas usan ambos. Así se decide cuál necesita cada superficie. ## The short version - 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 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. - Violeta plano: `linear-gradient(135deg, #6d28d9 0%, #6d28d9 100%)` - Degradado violeta: `linear-gradient(135deg, #2e1065 0%, #6d28d9 55%, #c084fc 100%)` El mismo violeta como relleno plano y como degradado construido a su alrededor. Uno es un color; el otro, una superficie con luz. ## 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](https://gradiently.design/es/guide/animated-gradient-background) ## 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 | El color plano es la opción por defecto más segura para la función. Los degradados son la elección más fuerte para la expresión. ## 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](https://gradiently.design/es/guide/text-on-gradient) y en el [contraste de color y la accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility). Un post vertical donde un titular cruza las partes clara y oscura de un degradado Un degradado que atraviesa las palabras: el contraste cambia letra a letra. El mismo post con una zona más calma y uniforme del degradado detrás del titular 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](https://gradiently.design/es/guide/history-of-gradients). 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](https://gradiently.design/es/guide/gradient-branding) lo explica paso a paso. - Profundo: texto e iconos: #2e1065 - Principal: botones, reserva: #6d28d9 - Claro: luces: #c084fc - Tinte: superficies tranquilas: #f5f3ff Colores planos tomados del degradado violeta de arriba. Cada uno tiene una tarea y, juntos, siempre combinan con el degradado. 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. ## FAQ ### ¿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.