# Degradados de dos colores: 30 combinaciones que siempre funcionan [Canonical HTML page](https://gradiently.design/es/guide/two-color-gradients) Dos colores, una dirección, nada que pueda salir mal. Casi. Aquí tienes las dos reglas que deciden si una pareja funciona, y treinta parejas que cumplen ambas, listas para copiar. ## The short version - 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. 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 | Cuanto mayor es la distancia, más probable es que el punto medio pierda color. La explicación completa está en [degradados turbios](https://gradiently.design/es/guide/muddy-gradients). Las distancias de la primera fila son [colores análogos](https://gradiently.design/es/guide/analogous-colors). Las de la última fila son [colores complementarios](https://gradiently.design/es/guide/complementary-colors), 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. - Arándano: `linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)` - Flamenco: `linear-gradient(135deg, #f472b6 0%, #fb923c 100%)` - Laguna: `linear-gradient(135deg, #06b6d4 0%, #10b981 100%)` - Caléndula: `linear-gradient(135deg, #fbbf24 0%, #f97316 100%)` - Orquídea: `linear-gradient(135deg, #d946ef 0%, #6366f1 100%)` - Recién cortado: `linear-gradient(135deg, #84cc16 0%, #10b981 100%)` - Palo de rosa: `linear-gradient(135deg, #e11d48 0%, #db2777 100%)` - Marea: `linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%)` - Clementina: `linear-gradient(135deg, #fb923c 0%, #facc15 100%)` - Musgo y verde azulado: `linear-gradient(135deg, #65a30d 0%, #0f766e 100%)` Parejas de tonos cercanos: vecinos en la rueda, así que el centro siempre es un color limpio. ## 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](https://gradiently.design/es/guide/monochromatic-color-scheme) para la teoría. - Denim: `linear-gradient(180deg, #bfdbfe 0%, #1e3a8a 100%)` - Ciruela: `linear-gradient(180deg, #f5d0fe 0%, #701a75 100%)` - Bosque: `linear-gradient(180deg, #bbf7d0 0%, #14532d 100%)` - Óxido: `linear-gradient(180deg, #fed7aa 0%, #9a3412 100%)` - Carbón: `linear-gradient(180deg, #e5e5e5 0%, #262626 100%)` - Vino: `linear-gradient(180deg, #fecdd3 0%, #881337 100%)` - Verde azulado profundo: `linear-gradient(180deg, #99f6e4 0%, #134e4a 100%)` - Índigo: `linear-gradient(180deg, #c7d2fe 0%, #312e81 100%)` - Cacao: `linear-gradient(180deg, #e7d3c1 0%, #4a2c1d 100%)` - Ámbar: `linear-gradient(180deg, #fef3c7 0%, #92400e 100%)` Parejas de claro a oscuro: una familia de tono, un gran cambio de luminosidad. Tinta oscura arriba, texto blanco abajo. ## 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. - Coral e índigo: `linear-gradient(135deg, #fb7185 0%, #4338ca 100%)` - Melocotón y violeta: `linear-gradient(135deg, #fdba74 0%, #7c3aed 100%)` - Lima y azul: `linear-gradient(135deg, #a3e635 0%, #2563eb 100%)` - Rosa y cielo: `linear-gradient(135deg, #f472b6 0%, #38bdf8 100%)` - Amarillo y rosa: `linear-gradient(135deg, #fde047 0%, #ec4899 100%)` - Cian y magenta: `linear-gradient(135deg, #22d3ee 0%, #d946ef 100%)` - Rojo y violeta: `linear-gradient(135deg, #ef4444 0%, #6d28d9 100%)` - Menta y violeta: `linear-gradient(135deg, #34d399 0%, #8b5cf6 100%)` - Naranja y magenta: `linear-gradient(135deg, #f97316 0%, #c026d3 100%)` - Verde y oro: `linear-gradient(135deg, #16a34a 0%, #facc15 100%)` Parejas de contraste: más distancia de tono, pero un centro luminoso. Comprueba el contraste del texto en ambos extremos. ## 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. ```css /* 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); } ``` Una pista de color mueve el punto medio sin añadir un color. Es una de las formas más rápidas de que una pareja común parezca menos predeterminada. ## 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](https://gradiently.design/es/guide/text-on-gradient) cubre las comprobaciones en detalle. Una publicación vertical con un titular corto colocado en el extremo más tranquilo de un fondo degradado 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](https://gradiently.design/es/guide/gradient-angle)), 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](https://gradiently.design/es/guide/gradient-color-combinations) 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. ## FAQ ### ¿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.