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

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.

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.

El synthwave es el primo estilizado y neón del atardecer real; los colores vaporwave y los degradados retro 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.

Si quieres menos paradas, mezclar en OKLCH ayuda: mantiene los colores saturados en el centro de la mezcla. Mira degradados OKLCH en CSS y, para la teoría, degradados turbios.

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 explica cómo la temperatura cambia el ambiente de un diseño.

Cómo crear tu propio degradado de atardecer

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

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

Para más paletas de cielos y paisajes, mira paletas de colores de la naturaleza, y para versiones en las que manda el rosa, degradados rosas.