# 60 combinaciones de colores para degradados que funcionan, con códigos

[Canonical HTML page](https://gradiently.design/es/guide/gradient-color-combinations)

Sesenta degradados, ordenados por la sensación que buscas y no por el tono. Cada uno es un código CSS real que puedes copiar, y cada grupo explica la regla que hace que sus mezclas funcionen.

## The short version

- 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.

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](https://gradiently.design/es/guide/what-is-a-gradient) 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.

- Vidrio marino: `linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%)`
- Niebla matinal: `linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%)`
- Salvia y piedra: `linear-gradient(135deg, #e7e5d8 0%, #b5c4a8 50%, #7d9275 100%)`
- Crepúsculo de lavanda: `linear-gradient(160deg, #ede9fe 0%, #c4b5fd 55%, #a78bfa 100%)`
- Agua en calma: `linear-gradient(180deg, #dbeafe 0%, #93c5fd 60%, #60a5fa 100%)`
- Banco de arena: `linear-gradient(135deg, #fdf6e3 0%, #f3e1c1 50%, #d9b99b 100%)`
- Eucalipto: `linear-gradient(135deg, #d8e8e0 0%, #9fc2b0 50%, #5f8f7b 100%)`
- Azul pizarra: `linear-gradient(160deg, #cbd5e1 0%, #94a3b8 55%, #64748b 100%)`
- Leche de avena: `linear-gradient(180deg, #faf7f2 0%, #eee4d4 100%)`
- Piedra de luna: `linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #c7d2fe 100%)`

Calmo: una sola familia de tono, con pasos pequeños de luminosidad. Admiten texto oscuro con facilidad.

## 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.

- Violeta eléctrico: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%)`
- Cítrico intenso: `linear-gradient(135deg, #f97316 0%, #facc15 100%)`
- Ponche tropical: `linear-gradient(135deg, #ec4899 0%, #f97316 100%)`
- Señal: `linear-gradient(90deg, #dc2626 0%, #f97316 50%, #facc15 100%)`
- Destello ultramar: `linear-gradient(135deg, #1d4ed8 0%, #06b6d4 100%)`
- De magenta a ámbar: `linear-gradient(135deg, #c026d3 0%, #f59e0b 100%)`
- Selva: `linear-gradient(135deg, #15803d 0%, #84cc16 100%)`
- Cobalto y coral: `linear-gradient(135deg, #2563eb 0%, #f43f5e 100%)`
- Refresco de uva: `linear-gradient(135deg, #7e22ce 0%, #e879f9 100%)`
- Lima y verde azulado: `linear-gradient(135deg, #0d9488 0%, #a3e635 100%)`

Atrevido: saturación alta y parejas elegidas para que el punto medio siga brillante. Usa texto blanco sobre el extremo más oscuro.

## 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](https://gradiently.design/es/guide/warm-and-cool-colors).

- Hora dorada: `linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%)`
- Terracota: `linear-gradient(135deg, #fed7aa 0%, #ea580c 60%, #9a3412 100%)`
- Sorbete de melocotón: `linear-gradient(135deg, #ffedd5 0%, #fdba74 50%, #fb7185 100%)`
- Brasa: `linear-gradient(180deg, #fbbf24 0%, #dc2626 55%, #450a0a 100%)`
- Rosa del desierto: `linear-gradient(135deg, #f5d0c5 0%, #d4938b 50%, #a15c5c 100%)`
- Miel: `linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #d97706 100%)`
- Canela: `linear-gradient(135deg, #f5d0a9 0%, #c2703d 55%, #7c3a1d 100%)`
- Franja de atardecer: `linear-gradient(180deg, #fde047 0%, #fb923c 35%, #e11d48 70%, #7e22ce 100%)`
- Albaricoque y ciruela: `linear-gradient(135deg, #fdba74 0%, #9d174d 100%)`
- Ladrillo y oro: `linear-gradient(135deg, #991b1b 0%, #f59e0b 100%)`

Cálido: vecinos rojos, naranjas y amarillos, casi siempre con un extremo más oscuro para dar profundidad. Para más, mira los [degradados de atardecer](https://gradiently.design/es/guide/sunset-gradient).

## 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](https://gradiently.design/es/guide/blue-gradient).

- Glaciar: `linear-gradient(180deg, #ecfeff 0%, #a5f3fc 50%, #22d3ee 100%)`
- Laguna profunda: `linear-gradient(135deg, #06b6d4 0%, #0e7490 55%, #164e63 100%)`
- Nórdico: `linear-gradient(135deg, #e2e8f0 0%, #93c5fd 50%, #3b82f6 100%)`
- Noche índigo: `linear-gradient(180deg, #6366f1 0%, #312e81 100%)`
- De menta a cielo: `linear-gradient(135deg, #6ee7b7 0%, #38bdf8 100%)`
- Vinca: `linear-gradient(135deg, #c7d2fe 0%, #818cf8 100%)`
- Verde azulado ártico: `linear-gradient(135deg, #99f6e4 0%, #14b8a6 50%, #115e59 100%)`
- Hora azul: `linear-gradient(180deg, #1e3a8a 0%, #6366f1 55%, #c4b5fd 100%)`
- Violeta hielo: `linear-gradient(135deg, #e0e7ff 0%, #a78bfa 100%)`
- Fondo del océano: `linear-gradient(180deg, #22d3ee 0%, #1d4ed8 55%, #172554 100%)`

Frío: vecinos verdes, verdes azulados, azules y violetas. Un ligero cambio de tono los hace sentirse menos corporativos.

## 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](https://gradiently.design/es/guide/dark-gradient-backgrounds).

- Violeta medianoche: `linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%)`
- Mar profundo: `linear-gradient(180deg, #020617 0%, #0c4a6e 60%, #0e7490 100%)`
- Suelo del bosque: `linear-gradient(160deg, #052e16 0%, #14532d 55%, #3f6212 100%)`
- Sangre de toro: `linear-gradient(135deg, #1c0508 0%, #7f1d1d 60%, #b91c1c 100%)`
- Grafito: `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #404040 100%)`
- Tinta y brasa: `linear-gradient(160deg, #0c0a09 0%, #292524 60%, #c2410c 100%)`
- Azul petróleo: `linear-gradient(135deg, #021a1f 0%, #0f4c5c 55%, #2a9d8f 100%)`
- Berenjena: `linear-gradient(135deg, #1a0b1f 0%, #4a1942 55%, #86198f 100%)`
- Verde azulado nocturno: `linear-gradient(180deg, #031716 0%, #0f3d3e 60%, #14b8a6 100%)`
- Cereza oscura: `linear-gradient(160deg, #0f0306 0%, #4c0519 55%, #be123c 100%)`

Oscuro: un casi negro con matiz, un medio profundo y un color iluminado en el extremo.

## 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](https://gradiently.design/es/guide/pastel-gradients).

- Algodón de azúcar: `linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 50%, #a5f3fc 100%)`
- Melocotón y lila: `linear-gradient(135deg, #fed7aa 0%, #ddd6fe 100%)`
- Pistacho: `linear-gradient(135deg, #ecfccb 0%, #bbf7d0 100%)`
- Azul bebé: `linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%)`
- Limón y rubor: `linear-gradient(135deg, #fef9c3 0%, #fecdd3 100%)`
- Menta y crema: `linear-gradient(135deg, #d1fae5 0%, #fef3c7 100%)`
- Violeta empolvado: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 50%, #c4b5fd 100%)`
- Sorbete: `linear-gradient(90deg, #fecaca 0%, #fed7aa 50%, #fef08a 100%)`
- Espuma de mar y rosa: `linear-gradient(135deg, #ccfbf1 0%, #e9d5ff 50%, #fbcfe8 100%)`
- Cielo del alba: `linear-gradient(180deg, #bae6fd 0%, #e9d5ff 50%, #fde2c4 100%)`

Pastel: vecinos pálidos, o pasteles lejanos unidos por un lila para que el centro conserve el matiz.

## 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.

```css
.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}
```

Violeta medianoche en una tarjeta, con un color de reserva y texto blanco.

## 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](https://gradiently.design/es/guide/how-to-choose-brand-colors).
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](https://gradiently.design/es/guide/muddy-gradients).
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.

## FAQ

### ¿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.