La versión corta
- Las mejores combinaciones de colores para degradados usan tonos vecinos, que se mezclan con limpieza, o unen tonos lejanos con un color intermedio elegido.
- Los degradados calmos mantienen cerca el tono y la luminosidad; los atrevidos fuerzan la saturación y la distancia entre tonos.
- Los degradados oscuros funcionan mejor como un fondo casi negro con un solo color iluminado, y los pastel, como tonos claros vecinos con una tinta oscura para el texto.
- Elegir un degradado primero por el ambiente y después por el tono da resultados más coherentes que escoger colores que te gustan uno a uno.
- Cualquier combinación de aquí puede volverse más distintiva con un tercer color, otro ángulo o una capa de grano.
En esta página
Las mejores combinaciones de colores para degradados siguen una de dos reglas: usan tonos que están uno junto al otro en el círculo cromático, para que la mezcla quede limpia, o unen tonos lejanos con un color intermedio elegido, para que nunca se vuelva gris. Abajo hay 60 combinaciones que siguen esas reglas, agrupadas por ambiente: calmas, atrevidas, cálidas, frías, oscuras y pastel. Copia cualquier muestra como CSS y lee la nota de cada grupo para ver por qué funcionan y poder crear las tuyas.
Todo lo de aquí es CSS sencillo con colores hexadecimales, así que funciona en cualquier navegador, y los mismos códigos se pueden escribir en cualquier herramienta de diseño. Si algún término te suena nuevo, qué es un degradado explica las paradas y los ángulos.
Combinaciones de degradados calmas
Los degradados calmos mantienen sus colores cerca en tono y en luminosidad. Nada salta, así que la vista descansa. Sirven de fondo para leer, para marcas de bienestar, portafolios y todo lo que deba sentirse tranquilo. Salvia y piedra, por ejemplo, recorre solo una distancia corta del círculo y pierde algo de luminosidad por el camino, lo que se lee como sombra en una pared y no como un efecto de color.
Combinaciones de degradados atrevidas
Los degradados atrevidos usan colores saturados y más distancia en el círculo. Captan la atención en un feed saturado, un banner de rebajas o una página de lanzamiento. El truco está en elegir parejas cuya mezcla directa siga siendo brillante. De magenta a ámbar se pasa por el coral; de cobalto a coral, por el púrpura. Ninguna se acerca al gris, y por eso se ven vivas de un extremo al otro.
Combinaciones de degradados cálidas
Los degradados cálidos viven entre el rojo y el amarillo y se sienten soleados, apetecibles y humanos. Van bien con comida, hostelería, estilo de vida y todo lo personal. La mayoría añade un extremo más oscuro y rojizo para que la mezcla tenga peso: Hora dorada va de una miel pálida a un ámbar quemado, como la luz del final de la tarde al bajar por una pared. Para la psicología de la temperatura, mira los colores cálidos y fríos.
Combinaciones de degradados frías
Los degradados fríos están entre el verde y el violeta y se sienten limpios, calmos y precisos. Son el hogar natural de la tecnología, la salud, las finanzas y el agua. El azul es el ancla de casi todos, por eso transmiten confianza, y por eso un degradado frío necesita un detalle distintivo, como un extremo violeta o un giro hacia el verde azulado, para no parecerse al de todos los bancos. Hay más azules reunidos en los degradados azules.
Combinaciones de degradados oscuras
Los degradados oscuros son fondos casi negros de los que emerge un color iluminado. Se sienten premium, nocturnos y de cine, y hacen que la tipografía blanca se vea nítida. Deja el extremo oscuro con un poco de color en vez de negro puro, para que la mezcla tenga por dónde viajar. Las rampas oscuras forman bandas con facilidad, así que añade grano antes de publicar; mira los fondos de degradado oscuros.
Combinaciones de degradados pastel
Los pasteles son colores pálidos, de luminosidad alta y algo de saturación. Se sienten frescos, suaves y amables, y encajan con belleza, bebés, papelería y campañas de primavera. Como todos son tan claros, incluso tonos pastel lejanos pueden mezclarse en un gris blanquecino, así que los dos últimos pasan por un lila pálido. Pon el texto sobre pasteles en tinta oscura y no en blanco. Hay más en los degradados pastel.
Cómo usar estos códigos de degradado
Cada código es un valor background de CSS completo. Pégalo en cualquier elemento, o pasa los colores hexadecimales y las posiciones de las paradas a una herramienta de diseño. En la web, define primero un color sólido de reserva, tomado de la parada más oscura o más importante.
.card {
background-color: #3b1d6e; /* fallback */
background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
color: #ffffff;
}Cómo crear tu propia combinación
- 1
Elige primero el ambiente
Decide si será calmo o atrevido, cálido o frío, oscuro o claro antes de elegir ningún color. Eso reduce las opciones a uno de los grupos de arriba.
- 2
Escoge un color ancla
Normalmente, el color de tu marca o el de lo que vendes. Mira cómo elegir los colores de una marca.
- 3
Añade un vecino
Desplázate de 30 a 60 grados por el círculo cromático para obtener un segundo color limpio. Cambia también un poco la luminosidad, para dar profundidad.
- 4
Une lo que esté lejos
Si quieres un tono lejano, pon un color intermedio brillante entre ambos para que la mezcla no se vuelva gris. Mira los degradados turbios.
- 5
Hazla tuya
Cambia el ángulo, mueve una parada fuera del 50 %, añade un tercer color o una capa de grano. Los cambios pequeños evitan que una combinación parezca un preajuste.
Un código popular es un buen comienzo, pero miles de diseños más empiezan ahí. Si quieres una identidad de degradado que nadie más tenga, puedes hacer coincidir una imagen que te encante con su paleta y los Marks más cercanos, o crear otros nuevos como ella.
Preguntas frecuentes
¿Qué colores combinan bien en un degradado?
Los colores vecinos en el círculo cromático, como azul y violeta o naranja y rosa, siempre se mezclan con limpieza. Los colores lejanos funcionan cuando un color intermedio brillante los une.
¿Cuál es la combinación de degradado más popular?
De violeta a rosa y de azul a cian están entre las más usadas. Esa popularidad es también la razón de que rara vez resulten distintivas.
¿Cuántos colores debe tener un degradado?
Dos es lo más sencillo, tres da profundidad y control sobre el punto medio, y con más de cinco cuesta mantenerlo limpio.
¿Qué color de texto funciona sobre un degradado?
Blanco o casi blanco sobre los degradados oscuros y atrevidos, y tinta oscura sobre los pastel y los calmos. Comprueba el contraste en el punto más claro detrás del texto.
¿Puedo usar estos códigos de degradado en Figma o Canva?
Sí. Copia los colores hexadecimales y la posición de sus paradas en el relleno de degradado de la herramienta e iguala el ángulo.
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
