La versión corta
- Una paleta de degradados es una familia pequeña y con nombre de degradados creados a partir de una paleta de color base y unas pocas reglas comunes.
- La mayoría de las marcas necesitan de cuatro a seis degradados: uno principal, una versión profunda, una versión clara y tranquila, un resplandor radial, uno de acento y uno sereno para el texto.
- Los degradados se leen como una familia cuando comparten color de fondo, dirección, posiciones de parada coherentes y los mismos saltos de luminosidad.
- Guardar los degradados como propiedades personalizadas de CSS con nombre los mantiene idénticos en una web, una app y los archivos de diseño.
- Una paleta de degradados debe probarse en formatos reales con textos reales antes de incluirla en el manual de marca.
En esta página
Una paleta de degradados es una familia pequeña y con nombre de degradados creada a partir de una paleta de color y unas cuantas reglas comunes, para que todos los degradados que usa una marca parezcan emparentados. Empieza con cinco o seis colores base, da a cada degradado una función (principal, profundo, tranquilo, resplandor, acento, texto) y fija lo que los hace hermanos: el mismo color de fondo, el mismo ángulo, posiciones de parada iguales y saltos de luminosidad uniformes. Anótalos como tokens y pruébalos en diseños reales antes de que nadie más los use.
Por qué una marca necesita más de un degradado
Un único degradado acaba estirándose para trabajos que no puede hacer. La mezcla brillante que queda genial en un post de lanzamiento es demasiado ruidosa detrás de un párrafo, demasiado oscura para una sección web clara y demasiado recargada para una diapositiva llena de cifras. Entonces el equipo improvisa, alguien elige un azul parecido y en un año la marca tiene quince degradados que casi coinciden. Una paleta lo evita decidiendo las variaciones de antemano.
Un montón de degradados
- Cada uno hecho por separado, para un diseño
- Ángulos distintos en cada página
- Colores que casi coinciden con la marca
- Sin nombre, así que nadie puede pedirlos
- Copiados a ojo de archivos antiguos
Una paleta de degradados
- Creada a partir de una paleta base
- Una dirección, usada en todas partes
- Códigos hex y posiciones de parada exactos
- Con nombre según su función: principal, profundo, tranquilo
- Guardada como tokens en el código y los archivos
Empieza por una paleta de color base
Todos los degradados de la familia deben hacerse solo con estos colores, o con sus tintes y sombras. Si los colores de tu marca aún no están decididos, resuélvelo primero con cómo elegir los colores de marca. Una base útil tiene un fondo oscuro, dos o tres pasos del tono principal, un casi blanco y un acento de otra parte de la rueda.
Da una función a cada degradado
Nombra los degradados por lo que hacen, no por su aspecto. «Principal» sobrevive a un cambio de colores; «atardecer morado», no. Seis funciones cubren casi cualquier marca.
Para qué sirve
En qué se diferencia
En qué se diferencia
Para qué sirve
En qué se diferencia
Para qué sirve
En qué se diferencia
En qué se diferencia
En qué se diferencia
Las reglas que convierten los degradados en una familia
- Un solo fondo. Todos los degradados oscuros terminan en la misma tinta y todos los claros en la misma concha. El fondo es lo que el ojo usa para agruparlos.
- Una sola dirección. Elige un ángulo, 135 o 160 grados, y mantenlo. Los ángulos mezclados hacen que una página parezca accidental. Ángulo del degradado explica la elección.
- Paradas iguales. Reutiliza las mismas posiciones (0, 45, 75 y 100 por ciento, por ejemplo) para que las transiciones tengan el mismo ritmo. Paradas de un degradado trata el espaciado.
- Saltos de luminosidad uniformes. Cada color de una mezcla debe ser un paso claro más luminoso u oscuro que su vecino. Los saltos desiguales producen una franja brillante en el centro.
- Un acento, racionado. El color de acento aparece en un solo degradado. Repartido por todos, deja de ser un acento.
- Una interpolación fija en el código. Si tu web mezcla en oklch, todos los degradados deberían hacerlo, o los mismos códigos se verán distintos de una sección a otra.
Convierte la paleta de degradados en tokens
Una paleta que solo vive en un PDF acaba reescribiéndose y desviándose. Guarda cada degradado una vez como propiedad personalizada con nombre y haz referencia a ella en todas partes. Los diseñadores pueden pegar los mismos valores en sus archivos, y una futura renovación cambia una línea por degradado. Design tokens trata la práctica más amplia.
:root {
--ink: #14112b;
--plum: #4c1d95;
--violet: #7c3aed;
--orchid: #c084fc;
--shell: #faf5ff;
--ember: #f97316;
--gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
--gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
--gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
--gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
--gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
--gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}
.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }Pruébala en formatos reales
Las muestras engañan. Un degradado que parece equilibrado en un cuadrado pequeño puede poner su banda más brillante justo detrás de un titular cuando llena una story de 1080×1920. Antes de publicar la paleta, haz tres diseños reales con textos reales: un post vertical, una story y un hero web. Comprueba que el degradado de texto mantiene legibles los párrafos, con las pruebas de contraste de color y accesibilidad, y que el principal y el profundo parecen emparentados cuando van uno al lado del otro.
La función principal en un post vertical de 1080×1350.
La misma familia en una story de 1080×1920. Comprueba que la banda más brillante sigue sin tocar el titular en el encuadre más alto.
Con Gradiently Pro, el kit de marca guarda tus paletas de color junto a tu logotipo y tus tipografías, y el Designer las aplica cuando compone diseños nuevos. Si tu degradado principal debe ser lo que la gente reconozca, degradados de marca explica cómo convertir un degradado en una firma.
Preguntas frecuentes
¿Qué es una paleta de degradados?
Un conjunto pequeño y con nombre de degradados creados a partir de una paleta de color con reglas comunes, para que parezcan una familia allí donde aparezcan.
¿Cuántos degradados debería tener una marca?
De cuatro a seis cubren casi todo: uno principal, una versión profunda y otra tranquila, un resplandor radial, uno de acento y uno lo bastante sereno para el texto. Las marcas pequeñas pueden empezar con tres.
¿Cómo hago que los degradados parezcan de la misma familia?
Usa el mismo color de fondo, el mismo ángulo, las mismas posiciones de parada y saltos de luminosidad uniformes en todos los degradados.
¿Cómo debo guardar los degradados de marca para una web?
Define los colores y cada degradado una sola vez como propiedades personalizadas de CSS y usa esos nombres en todos los componentes.
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