La versión corta
- Un degradado de dos colores funde un color con otro, y es el degradado más sencillo de diseñar, recolorear y mantener coherente.
- Que una pareja funcione depende sobre todo de la distancia de tono: los tonos vecinos siempre se mezclan limpios, y los opuestos se vuelven grises en el centro.
- Una diferencia de luminosidad entre los dos colores da al degradado dirección y profundidad.
- Dos colores de la misma familia de tono, uno claro y otro oscuro, forman el degradado más versátil porque el texto funciona en uno de los extremos.
- Como los degradados de dos colores son tan habituales, un pequeño cambio, como un ángulo poco común, un punto medio desplazado o una capa de grano, es lo que hace que uno se reconozca.
En esta página
Un degradado de dos colores es una transición de un color a otro, y es el degradado más seguro que puedes hacer: dos colores son fáciles de elegir, fáciles de recolorear y fáciles de mantener coherentes. Que una pareja funcione se reduce a dos cosas: lo lejos que están los tonos en la rueda de color y lo distintos que son en luminosidad. Si aciertas con eso, casi cualquier par de colores forma un buen degradado. Abajo tienes las reglas y después treinta parejas que las cumplen.
Regla 1: vigila la distancia de tono
La distancia de tono es lo separados que están dos colores en la rueda de color, medida en grados. Predice lo que pasa en el centro de la mezcla, que es donde los degradados de dos colores triunfan o fracasan.
| Distancia de tono | Qué pasa en el centro | Veredicto |
|---|---|---|
| De 0 a 60 grados | Un color intermedio limpio, como el violeta entre el azul y el rosa | Siempre seguro |
| De 60 a 120 grados | Normalmente un color nuevo y claro, a veces algo apagado | Seguro; revisa el centro |
| De 120 a 150 grados | A menudo un centro más suave y grisáceo | Prueba con cuidado |
| De 150 a 180 grados | Gris o marrón en el centro con la mezcla por defecto | Necesita un color puente u OKLCH |
Las distancias de la primera fila son colores análogos. Las de la última fila son colores complementarios, que impactan uno junto al otro pero necesitan ayuda al mezclarse.
Regla 2: dale una diferencia de luminosidad
Dos colores con la misma luminosidad forman un degradado que se siente plano, como si no fuera a ninguna parte. Una diferencia clara de luminosidad da dirección a la mezcla, como la luz que entra por un lado. Además crea una ventaja práctica: el texto puede ir en blanco en el extremo más oscuro, o en tinta oscura en el más claro.
Se siente plano
- Dos colores de tono medio con la misma luminosidad
- Dos colores totalmente saturados sin extremo oscuro
- Ningún sitio evidente para el texto
Se siente iluminado
- Un color más claro y otro más oscuro
- Un color saturado junto a un vecino más profundo
- Un extremo claro y otro oscuro para la tipografía
Parejas de tonos cercanos
Estas parejas están a menos de unos 60 grados entre sí. Es imposible que queden turbias y lucen bien en casi todo, desde botones hasta fondos a pantalla completa. Arándano y Marea, por ejemplo, son dos azules que avanzan hacia el violeta, y se leen como un solo color que atrapa la luz.
Parejas de claro a oscuro
Estas parejas mantienen una familia de tono y cambian la luminosidad de pálido a profundo. Son los degradados de dos colores más versátiles: lo bastante tranquilos para una página entera, y con un extremo oscuro listo para texto blanco. También son excelentes degradados de marca, porque amplían un único color de marca en lugar de añadir uno nuevo. Mira esquemas de color monocromáticos para la teoría.
Parejas de contraste que siguen limpias
Estas parejas están más separadas, entre unos 90 y 150 grados, pero todas tienen un punto medio luminoso con la mezcla por defecto. Melocotón y violeta pasan por malva, cian y magenta por lavanda, naranja y magenta por rosa intenso. Tienen más energía que las parejas cercanas y van bien para lanzamientos, música y todo lo que deba destacar.
Mover el punto medio
Por defecto, un degradado de dos colores va mitad y mitad. CSS te permite mover el punto donde los dos colores se mezclan a partes iguales con una pista de color: un porcentaje suelto entre las paradas. Llévalo hacia un extremo y el otro color ocupará más superficie, sin añadir un tercer color.
/* Even blend: the mix point sits at 50% */
.even { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
/* Colour hint at 25%: violet arrives early and fills most of the box */
.violet { background: linear-gradient(135deg, #3b82f6, 25%, #8b5cf6); }
/* Colour hint at 75%: blue holds on for most of the box */
.blue { background: linear-gradient(135deg, #3b82f6, 75%, #8b5cf6); }Dónde poner el texto en un degradado de dos colores
Un degradado de dos colores trae la composición incorporada: un extremo es más claro y el otro más oscuro. Pon las palabras en el extremo que más contrasta con el color de tu texto, y deja que el otro extremo lleve el color. Para texto blanco, es el extremo más oscuro; para tinta oscura, el más claro. Nunca centres texto pequeño sobre el punto medio de una pareja de claro a oscuro, porque el contraste cambia a lo largo de la línea. Texto sobre un degradado cubre las comprobaciones en detalle.
Las palabras en el extremo tranquilo de la mezcla, el color en el otro: la composición más sencilla que ofrece un degradado.
Cómo hacer tuyo un degradado de dos colores
Los degradados de dos colores son populares precisamente porque son seguros, así que las parejas populares están en todas partes. Para que uno se reconozca, cambia algo que la gente note sin pensarlo: un ángulo más pronunciado o poco común (mira ángulo del degradado), un punto medio desplazado, un grano fino o un tercer color usado solo en un borde. Cuando quieras ir más allá de dos, las 60 combinaciones de colores para degradados están agrupadas por ánimo.
Si ya sabes qué dos colores quieres, puedes escribirlos en la búsqueda del Mercado, como «azul y violeta», y diseñar con los Marks construidos a su alrededor.
Preguntas frecuentes
¿Qué dos colores forman el mejor degradado?
Los colores separados por menos de unos 60 grados en la rueda de color, con una diferencia clara de luminosidad, forman los degradados de dos colores más fiables.
¿Por qué mi degradado de dos colores se ve gris en el centro?
Los colores son casi opuestos en la rueda de color. Añade un color puente luminoso en el centro o mezcla en OKLCH.
¿Es mejor un degradado de dos colores que uno de tres?
Dos colores son más sencillos y seguros. Tres dan más profundidad y te dejan controlar el punto medio, pero es más fácil equivocarse.
¿Cómo cambio el punto donde se unen dos colores en un degradado CSS?
Añade una pista de color, un porcentaje suelto entre las dos paradas, como linear-gradient(#3b82f6, 25%, #8b5cf6).
¿Dónde va el texto en un degradado de dos colores?
En el extremo con más contraste para el color de tu texto: blanco sobre el extremo más oscuro, tinta oscura sobre el más claro.
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
