Degradado coral: códigos vivos entre rosa y naranja

Un degradado coral mezcla naranjas cálidos y rosados, los colores donde el rosa se convierte en naranja. Inclínalo hacia el rosa y resulta encantador y fresco; inclínalo hacia el mandarina y resulta soleado y enérgico. El coral es alegre y muy visible, lo que lo convierte en favorito para el verano, la comida, la belleza y el fitness. Sus dos trampas son una franja gris cuando se encuentra con el verde azulado y el texto que desaparece sobre él. Ambas se evitan fácilmente cuando las conoces.

Coral, salmón, melocotón y sandía

Los naranjas rosados y cálidos comparten muchos nombres. Conviene separarlos, porque la palabra adecuada te ayuda a elegir las paradas correctas y a describir lo que quieres a un diseñador o al Designer de Gradiently.

Degradados coral brillantes

Es el coral en su versión más viva. Mantienen la atención incluso en miniatura, por eso funcionan tan bien en publicaciones de rebajas, lanzamientos, clases de fitness y todo lo que quieras que se note en un feed saturado.

Algunas formas de ponerlos a trabajar: «Coral clásico» detrás de una sola frase como «Abrimos a mediodía» en una story de 1080×1920; «Ponche tropical» como portada de una carta de bebidas de verano; «Atardecer coral» recorriendo un pin de Pinterest de 1000×1500 para una guía de vacaciones. El coral es fuerte, así que deja que llene el encuadre y mantén simple todo lo demás: un titular, un dato, mucho espacio.

Degradados coral del rosa al naranja

Coral que tira al rosa

Empuja el coral hacia el rosa y el rubor y se vuelve más suave y romántico, ideal para belleza, floristerías, bodas y marcas de estilo de vida. Para el lado más rosado de la familia, consulta los degradados rosa.

Coral que tira al naranja

Empújalo hacia el otro lado, hacia el albaricoque y el mandarina, y el coral se vuelve más soleado y llamativo: cartas de verano, bares de batidos, vacaciones. Los degradados naranja y rosa cubren todo el espacio entre los dos.

Coral y verde azulado sin gris en el centro

Coral y verde azulado son una de las grandes parejas: cálido frente a frío, arrecife frente a mar. Pero están casi opuestos en el círculo cromático, así que una mezcla directa entre ellos pasa por un gris apagado en el centro. La solución es mantenerlos separados. Usa el verde azulado como fondo con una luz coral, el coral como fondo con un acento verde azulado, o pasa de uno a otro por tintes muy pálidos. Los degradados turbios explican por qué el centro se vuelve gris.

En una carta o un cartel, prueba un verde azulado muy oscuro como #042f2e con titulares y botones en coral. El coral alcanza ahí unos 5,8 a 1, mucho mejor que el blanco sobre coral, y se ve atrevido y veraniego. El lado verde azulado se trata en los degradados verde azulado.

Coral sobre fondo oscuro

El coral brilla de maravilla sobre ciruela profundo, azul marino o casi negro. Una sola luz coral sobre fondo oscuro parece un neón o un atardecer sobre el mar, y va bien con bares, música, vida nocturna y eventos de noche. Mantén la luz coral lejos de donde van las palabras y ponlas en concha pálido o blanco sobre la zona oscura.

Texto sobre un degradado coral

El coral parece lo bastante intenso para texto blanco, y por eso fallan tantos diseños coral. El blanco sobre #ff7f50 mide unos 2,5 a 1, muy por debajo del 4,5 a 1 que se pide en texto de cuerpo. Un marrón vino profundo como #3b0d0c mide unos 6,7 a 1 sobre el mismo coral y conserva la calidez. Si quieres texto blanco, profundiza el coral hasta un rojo como #e11d48, donde el blanco llega a unos 4,7 a 1. El método está en contraste de color y accesibilidad.

Un Mark de Gradiently hace este ajuste por sí solo: mueve su región más tranquila y de mejor contraste detrás de tus palabras y la tinta automática elige texto claro u oscuro para cada línea a partir de la propia paleta del Mark. Sin cajas ni sombras.

CSS de degradado coral para un botón

El coral hace una llamada a la acción simpática. Mantén el degradado lo bastante claro para que una etiqueta oscura siga siendo legible, y desliza su posición al pasar el cursor en lugar de cambiar de color. Los botones con degradado en CSS tienen más patrones.

.button-coral {
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  color: #3b0d0c;
  font-weight: 600;
  background: linear-gradient(135deg, #ffb199 0%, #ff7f50 100%);
  background-size: 150% 150%;
  background-position: 0% 50%;
  transition: background-position 300ms ease;
}

.button-coral:hover {
  background-position: 100% 50%;
}