Degradado naranja: 25 códigos cálidos, del melocotón al quemado

Un degradado naranja mezcla dos o más naranjas, a menudo con un amarillo, un rojo o un rosa vecinos, y pocas mezclas resultan más cálidas. Las versiones claras de melocotón y albaricoque son suaves y acogedoras, la mandarina viva es llamativa y desenfadada, y el naranja quemado o el óxido son terrosos y maduros. Abajo tienes 25 códigos agrupados por esos ambientes, seguidos de con qué combinarlos y cómo poner texto encima sin perder tus palabras.

Degradados naranjas suaves: melocotón y albaricoque

Los naranjas pálidos son la forma más amable de entrar en este color. Están cerca de la piel, del pan y de la luz de última hora de la tarde, por eso los usan tanto panaderías, cosmética y marcas infantiles. Haz que la parada más clara sea casi crema, para que la mezcla tenga un sitio tranquilo donde descansar. Para un artículo entero sobre el extremo más pálido, mira los degradados melocotón.

Degradados naranjas vivos: mandarina y cítricos

El naranja saturado es pura energía. Encaja con rebajas, comida a domicilio, deporte, festivales y todo lo que tenga que verse al tamaño de una miniatura. El riesgo es que el naranja vivo se aplane en un único bloque estridente, así que dale una parada más clara hacia el amarillo o una más profunda hacia el rojo. Ese pequeño cambio es lo que hace que parezca luz y no pintura.

Degradados naranjas de atardecer y ámbar

Llevar el naranja en vertical, del dorado arriba al rojo o ciruela abajo, te da un atardecer, probablemente el degradado más conocido que existe. Las mezclas ámbar son su prima más discreta: tonos miel, mermelada y whisky que resultan ricos sin gritar. Si quieres el cielo completo, los degradados de atardecer van más allá.

Degradados naranja quemado y óxido

Lleva el naranja hacia el marrón y se convierte en terracota, óxido y cobre: colores de macetas de barro, hojas de otoño y cuero viejo. Resultan artesanales y meditados, así que encajan con interiorismo, café, cerámica, marcas outdoor y todo lo que tenga una historia hecha a mano. Además, sostienen el texto blanco mucho mejor que el naranja vivo.

Luz naranja sobre fondo oscuro

La forma más premium de usar el naranja es con moderación. Parte de un casi negro, un marrón profundo o un azul marino, y deja que un único naranja brille desde una esquina como una brasa o una farola. Es el tratamiento para eventos nocturnos, restaurantes, música y todo lo que deba resultar cálido de noche. Las mezclas oscuras forman bandas con facilidad, así que lee fondos degradados oscuros antes de exportar.

Colores que combinan con un degradado naranja

El naranja tiene dos tipos de buena pareja. Los vecinos, como el amarillo, el rosa y el rojo, se funden directamente con él. Los opuestos, como el azul profundo y el verde azulado, lo hacen vibrar, pero deben ir junto al naranja como acento, no dentro de la misma mezcla, porque el punto medio entre ellos se vuelve gris. Degradados turbios explica por qué, y colores complementarios muestra cómo aprovechar esa tensión sin riesgo.

Texto sobre degradados naranjas

Aquí es donde fallan la mayoría de los diseños en naranja. El blanco sobre mandarina viva parece rotundo, pero tiene una relación de contraste de unos 2,8 a 1, muy por debajo del 4,5 a 1 que pide WCAG para el texto de cuerpo. El casi negro sobre el mismo naranja supera el 6 a 1. La regla es sencilla: texto oscuro sobre naranjas claros y vivos, texto blanco solo del naranja quemado hacia abajo. El método completo está en contraste de color y accesibilidad.

Gradiently se encarga de esta parte por ti. Un Mark sabe dónde están las palabras: coloca su zona más tranquila detrás de ellas y la Tinta automática elige texto claro u oscuro línea a línea a partir de la propia paleta del Mark, así que un diseño naranja sigue siendo legible a cualquier tamaño sin cajas ni sombras.

Degradado naranja en CSS

Cada código de arriba es un único valor CSS que puedes pegar en background. Para una sección que necesite calidez y profundidad a la vez, superpón una luz radial a una base lineal y define siempre un color sólido de reserva. Lee degradados lineales en CSS para la sintaxis completa.

.hero {
  background-color: #9a3412; /* fallback */
  background-image:
    radial-gradient(circle at 78% 22%, #fdba74 0%, transparent 40%),
    linear-gradient(160deg, #f97316 0%, #c2410c 55%, #7c2d12 100%);
  color: #ffffff; /* safe here: the words sit on the darker lower half */
}

Si quieres un estilo naranja que nadie más esté publicando, explora el Mercado en busca de Marks cálidos: busca palabras como «naranja quemado» o «albaricoque», diseña gratis con cualquiera sin reservar y resérvalo si se convierte en tu marca.