# Degradados de atardecer: paletas naranja, coral y crepúsculo

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

La mayoría de los degradados de atardecer fallan en el mismo sitio: el centro, donde el azul se encuentra con el naranja y se vuelve gris. Un cielo real nunca hace eso. Este es el orden que sigue la naturaleza, y diez paletas basadas en él.

## The short version

- Un degradado de atardecer mezcla colores cálidos como el oro, el naranja y el coral con el rosa, el violeta y un azul profundo de anochecer.
- En un atardecer real, el cielo va del amarillo y el naranja en el horizonte al rojo y el rosa, y luego al violeta y al azul sobre nuestras cabezas.
- Mezclar el azul directamente con el naranja se salta los rosas y violetas intermedios y se vuelve gris en el centro.
- Fundir el naranja directamente con el negro lo vuelve marrón, así que los degradados de crepúsculo quedan mejor oscureciéndose a través del ciruela o del índigo.
- Pon el texto en la parte superior, más oscura, de un degradado de atardecer, donde el contraste con la letra blanca es mayor.

Un **degradado de atardecer** mezcla colores cálidos, oro, naranja y coral, con el rosa, el violeta y un azul profundo de anochecer. Es uno de los degradados más queridos del diseño porque todo el mundo lo reconoce y a casi todo el mundo le gusta. También es uno de los más fáciles de estropear. El secreto es seguir el orden que usa de verdad el cielo: cálido y luminoso en el horizonte, enfriándose a través del rosa y el violeta a medida que miras hacia arriba. Sáltate esos colores intermedios y el degradado se vuelve gris.

## El orden natural de los colores del atardecer

Cuando el sol está bajo, su luz atraviesa mucha más atmósfera para llegar hasta ti. Por el camino, el aire dispersa la luz azul fuera del haz directo, así que la luz cercana al sol llega amarilla, naranja y roja. Más arriba en el cielo, lejos del sol, queda más azul. El resultado es una franja de colores apilados desde el horizonte hacia arriba.

El orden completo del atardecer: `linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%)`

Del azul profundo en lo alto, a través del violeta, el rosa y el naranja, hasta el oro en el horizonte. Cada paso es vecino del siguiente, así que nada se vuelve gris.

| Altura en el cielo | Color | Código de ejemplo |
| --- | --- | --- |
| En lo alto | Del azul profundo al índigo | `#1e3a8a` |
| Cielo alto | Del violeta al malva | `#6d28d9` |
| Cielo medio | Del rosa al magenta | `#db2777` |
| Cielo bajo | Del naranja al coral | `#f97316` |
| Horizonte | Del oro al amarillo pálido | `#fcd34d` |

Las franjas de un atardecer despejado. Los cielos reales cambian con las nubes, la bruma y la estación, pero el orden se mantiene.

## Paletas de degradados de atardecer, con códigos

Estas diez paletas siguen el orden del cielo, de arriba abajo. Algunas usan toda la gama; otras solo el extremo cálido o solo el crepúsculo.

- Crepúsculo coral: `linear-gradient(180deg, #2e2a5a 0%, #8e4a7e 40%, #f07167 75%, #fed9b7 100%)`
- Tarde en el desierto: `linear-gradient(180deg, #5b3a6e 0%, #c0587e 35%, #f28c5b 70%, #f9d29d 100%)`
- Hora azul: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 45%, #6b5b95 75%, #f4a28c 100%)`
- Resplandor: `linear-gradient(180deg, #111827 0%, #3b1f4a 40%, #b1455f 75%, #f29e6d 100%)`
- Tropical, solo cálido: `linear-gradient(180deg, #ff6f61 0%, #ff9966 55%, #ffd194 100%)`
- Bruma de melocotón: `linear-gradient(180deg, #fbc2c2 0%, #fcd5b5 55%, #fef3c7 100%)`
- Mediterráneo: `linear-gradient(180deg, #4a6fa5 0%, #c38fb8 45%, #f6a57f 75%, #ffe0a3 100%)`
- Synthwave: `linear-gradient(180deg, #2b1055 0%, #d53a9d 55%, #ffb86c 100%)`
- Sol en el horizonte: `radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%)`
- Brasa: `linear-gradient(180deg, #7c2d12 0%, #c2410c 40%, #f59e0b 80%, #fde68a 100%)`

Diez degradados de atardecer. El radial coloca el propio sol en el borde inferior del encuadre.

El synthwave es el primo estilizado y neón del atardecer real; [los colores vaporwave](https://gradiently.design/es/guide/vaporwave-colors) y [los degradados retro](https://gradiently.design/es/guide/retro-gradients) llevan esa dirección más lejos.

## Por qué se enturbian los degradados de atardecer y cómo arreglarlo

Hay dos errores clásicos. El primero es unir el azul y el naranja directamente. Son casi opuestos en la rueda de color, y una mezcla directa entre ellos da un promedio gris en el centro. El cielo nunca hace esto porque pasa por el violeta y el rosa. El segundo es fundir el naranja con el negro para lograr un ambiente más oscuro. El naranja oscuro es marrón, así que el degradado se lee como óxido o barro y no como anochecer.

- Azul directo a naranja: centro gris: `linear-gradient(180deg, #1d4ed8 0%, #f97316 100%)`
- A través del violeta y el rosa: limpio: `linear-gradient(180deg, #1d4ed8 0%, #7c3aed 30%, #db2777 60%, #f97316 100%)`
- De negro a naranja: marrón: `linear-gradient(180deg, #0a0a0a 0%, #f97316 100%)`
- Índigo a través del ciruela: crepúsculo: `linear-gradient(180deg, #1b1b3a 0%, #6d2e6b 45%, #f97316 100%)`

Dos atardeceres turbios y sus arreglos. Ambos arreglos añaden los colores por los que pasa el propio cielo.

Si quieres menos paradas, mezclar en OKLCH ayuda: mantiene los colores saturados en el centro de la mezcla. Mira [degradados OKLCH en CSS](https://gradiently.design/es/guide/css-gradient-oklch) y, para la teoría, [degradados turbios](https://gradiently.design/es/guide/muddy-gradients).

## Dónde funcionan los degradados de atardecer

Los atardeceres transmiten una sensación clara: el final del día, calidez, algo de nostalgia. Eso los hace naturales para algunos trabajos y raros para otros. Un atardecer vivo y de gama completa va bien con eventos de verano, viajes, música y hostelería. Una versión crepuscular, sobre todo violeta, va bien con lanzamientos nocturnos, podcasts y todo lo que invite a reflexionar. Una versión solo cálida, del oro al coral, va bien con comida, bebida y rebajas.

- **Carteles e invitaciones para eventos:** los colores dicen noche antes que la fecha.
- **Viajes y hostelería:** la hora dorada es la luz más fotografiada que existe, y la gente la reconoce.
- **Portadas de música y playlists:** las paletas de crepúsculo resultan cinematográficas y algo melancólicas.
- **Campañas de temporada:** un atardecer que se enfría a lo largo del otoño marca la estación sin crear piezas nuevas.

Donde encajan peor: finanzas serias, salud y todo lo que deba sentirse neutro. La calidez se lee como ocio. Los colores del atardecer también están claramente en el lado cálido de la rueda; [colores cálidos y fríos](https://gradiently.design/es/guide/warm-and-cool-colors) explica cómo la temperatura cambia el ambiente de un diseño.

## Cómo crear tu propio degradado de atardecer

1. **Elige cuánto cielo quieres** Toda la gama para el dramatismo, solo el extremo cálido para la energía o solo el crepúsculo para la calma.
2. **Pon lo cálido abajo** El oro y el naranja van cerca del horizonte. Los atardeceres del revés pueden funcionar, pero se leen como estilizados.
3. **No te saltes ningún vecino** Entre el azul y el naranja, incluye violeta y rosa. Entre el naranja y el oscuro, incluye ciruela o índigo.
4. **Da menos espacio a la franja cálida** En los cielos reales, los colores más luminosos se pegan al horizonte. Limitarlos al cuarto inferior hace que el degradado se sienta natural.
5. **Añade grano** Los cielos largos y suaves forman bandas con facilidad. Una capa fina de ruido mantiene suave la mezcla tras la compresión.

## Texto sobre un degradado de atardecer

La parte superior de un degradado de atardecer es oscura y fría, perfecta para el texto blanco. La parte inferior es luminosa y cálida, perfecta para texto oscuro o para nada. El centro, donde el rosa se encuentra con el naranja, es el sitio más difícil para cualquiera de los dos. Pon los titulares arriba y los detalles abajo, o mantén las palabras en una sola franja tranquila.

Un cartel vertical de evento con un titular cerca de la parte superior de un degradado cálido de anochecer

El titular arriba, en el cielo más oscuro; los detalles, más abajo.

Una story vertical de rebajas con un titular sobre un resplandor cálido en la parte inferior

Una story en la que el resplandor cálido queda bajo las palabras.

```css
.hero {
  background-color: #1b1b3a;
  background-image: radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%);
  color: #ffffff;
}
.hero h1 {
  /* keep the headline in the dark upper half */
  margin-top: 12vh;
}
```

La paleta Sol en el horizonte como cabecera de página, con el titular en el cielo oscuro sobre el resplandor.

Para más paletas de cielos y paisajes, mira [paletas de colores de la naturaleza](https://gradiently.design/es/guide/nature-color-palettes), y para versiones en las que manda el rosa, [degradados rosas](https://gradiently.design/es/guide/pink-gradient).

## FAQ

### ¿Qué colores tiene un degradado de atardecer?

Normalmente oro y naranja en el horizonte, luego coral, rosa y magenta, y después violeta y un azul profundo en lo alto.

### ¿Por qué mi degradado de atardecer se ve turbio?

Normalmente porque mezcla el azul directamente con el naranja, o el naranja directamente con el negro. Añade violeta y rosa entre el azul y el naranja, y oscurece a través del ciruela o del índigo en lugar del negro.

### ¿Cuál es el código CSS de un degradado de atardecer?

Para un atardecer completo prueba linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%). Todas las paletas de esta página se pueden copiar como CSS.

### ¿Dónde va el texto en un degradado de atardecer?

En la parte superior, más oscura y fría, para el texto blanco, o en la franja cálida y pálida para el texto oscuro. Evita el centro, donde el rosa se encuentra con el naranja.