# Degradados naranja y rosa: calidez más allá del atardecer [Canonical HTML page](https://gradiently.design/es/guide/orange-pink-gradient) El naranja y el rosa son vecinos de puerta, lo que los convierte en una de las mezclas más cálidas y fáciles. El reto no es mezclarlos, sino no parecerse a todos los ajustes de atardecer. ## The short version - Un degradado naranja y rosa mezcla tonos cálidos vecinos como la mandarina #f97316, el coral #fb7185 y el rosa #ec4899, así que la transición se mantiene brillante sin color puente. - La pareja está tan asociada a los atardeceres que una diagonal simple de naranja a rosa parece un ajuste predefinido, y cambiar el fondo o la luminosidad lo evita. - El naranja vivo y el rosa intenso son demasiado claros para texto blanco pequeño, mientras que una tinta óxido profundo o marrón quemado se lee bien sobre las versiones más suaves. - Las versiones terrosas con terracota y rosa empolvado resultan calmadas y adultas, y las oscuras con brasa y frambuesa se sienten cálidas y nocturnas. - El naranja y el rosa van bien con comida, bebida, belleza, campañas de verano, viajes y cualquier marca que quiera sentirse cálida y acogedora. Un **degradado naranja y rosa** mezcla dos vecinos cálidos: mandarina como `#f97316` o melocotón como `#fed7aa` en un lado, rosa como `#ec4899` o rubor como `#fda4af` en el otro, normalmente con coral en medio. Como los tonos están uno junto a otro, la mezcla nunca se ensucia. Lo que sí puede volverse es previsible, porque la combinación es sinónimo de atardecer. Los códigos de abajo están agrupados por ambiente, del melocotón suave a la brasa oscura, para que elijas una versión que sea tuya y no un fondo de pantalla de móvil. ## Colores entre el naranja y el rosa Camina del naranja al rosa y pasas por el coral, el salmón y la sandía, todos saturados y cálidos. Aclara el paseo y aparecen el albaricoque, el melocotón y el rubor. Oscurécelo y aparecen el óxido, la terracota y la frambuesa. La mayoría de los buenos degradados naranja y rosa usan tres paradas de la misma banda de luminosidad en lugar de saltar del melocotón pálido al rosa intenso. - Crema: #fff7ed - Melocotón: #fed7aa - Rubor: #fda4af - Albaricoque: #fb923c - Coral: #fb7185 - Mandarina: #f97316 - Rosa intenso: #ec4899 - Óxido: #9a3412 - Sombra quemada: #431407 La gama del naranja al rosa, con un crema y dos marrones oscuros para fondos y texto. ## Degradados suaves de melocotón y rubor El naranja y el rosa pálidos juntos recuerdan a la piel, el lino y la luz de primera hora. Por eso encajan con cuidado de la piel, novias, bienestar y panaderías. También fotografían bien detrás de productos, porque favorecen los tonos cálidos. Compón el texto en un óxido profundo y no en negro; conserva la calidez. - Lino melocotón: `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)` - Rubor de albaricoque: `radial-gradient(circle at 70% 30%, #ffe4e6 0%, #fed7aa 60%, #fdba74 100%)` - Primera luz: `linear-gradient(180deg, #fde68a 0%, #fecaca 55%, #fbcfe8 100%)` Naranja y rosa suaves. La tinta óxido o sombra quemada se lee bien en los tres. [Degradados melocotón](https://gradiently.design/es/guide/peach-gradient) tiene más de esta familia. ## Degradados coral, pomelo y sandía El naranja y el rosa saturados son puro verano: zumo de pomelo, toallas de playa, carteles de festival. Son lo bastante potentes para frenar el scroll y lo bastante amables para no resultar agresivos. Aléjalos del texto muy pequeño y dales una esquina tranquila. - De mandarina a rosa: `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)` - Pomelo: `radial-gradient(circle at 25% 75%, #fdba74 0%, #fb7185 45%, #e11d48 100%)` - Sandía: `linear-gradient(160deg, #fb923c 0%, #f43f5e 70%, #be185d 100%)` - Batido de mango: `linear-gradient(90deg, #fbbf24 0%, #fb923c 35%, #f472b6 100%)` Degradados naranja y rosa vivos. Cada parada es vecina cercana de la siguiente, así que el centro se mantiene vivo. [Degradados coral](https://gradiently.design/es/guide/coral-gradient) profundiza más. ## Terracota terrosa y rosa empolvado Apaga los dos colores y la pareja se vuelve calmada y sólida, la paleta de las macetas de barro, las flores secas y las paredes cocidas por el sol. Es la versión menos usada y a menudo la más elegante. Combina a gusto con oliva, arena y crema, y funciona bien junto a las [paletas de colores tierra](https://gradiently.design/es/guide/earth-tone-colors). - Arcilla y rosa: `linear-gradient(135deg, #f5e6d8 0%, #d9967a 55%, #c27c7c 100%)` - Ocaso de terracota: `radial-gradient(circle at 80% 20%, #e8a598 0%, #b4644a 50%, #6b2f22 100%)` - Pétalos secos: `linear-gradient(180deg, #faf3ec 0%, #e7b9a8 50%, #b97a6f 100%)` Naranja y rosa apagados. Se sienten artesanales y calmados, y van con interiores, cerámica, floristerías y marcas de vida pausada. > **Detrás de fotos de producto** Las mezclas cálidas y apagadas favorecen la piel, la madera, el pan y la cerámica porque se hacen eco de esos colores. Elige una parada del propio producto y construye el degradado hacia fuera a partir de ella. [Fondos para fotos de producto](https://gradiently.design/es/guide/product-photo-backgrounds) muestra cómo. ## Degradados oscuros de brasa y frambuesa Parte de un fondo marrón profundo o ciruela y deja que el naranja y el rosa brillen desde él, y la pareja deja de ser alegre para volverse íntima: luz de velas, brasas, una carta de cócteles. Admiten texto claro con facilidad, lo que los hace prácticos para carteles de eventos y ofertas de noche. - Brasa: `radial-gradient(circle at 75% 80%, #fb923c 0%, #9f1239 35%, #1c0708 80%)` - Del óxido a la frambuesa: `linear-gradient(160deg, #1f0a0a 0%, #7c2d12 45%, #db2777 100%)` - Última luz: `radial-gradient(ellipse at 50% 100%, #fdba74 0%, #be185d 40%, #2a0a14 85%)` Naranja y rosa oscuros. Añade grano, porque las mezclas cálidas oscuras muestran banding con facilidad. ## Cómo evitar el tópico del atardecer El naranja a rosa en una diagonal de 45 grados está en todas partes, de los fondos de móvil a los iconos de apps, así que parece un valor por defecto. Si quieres la calidez sin el ajuste predefinido, cambia al menos una de las cosas de abajo. [Degradados de atardecer](https://gradiently.design/es/guide/sunset-gradient) cubre la versión literal si es lo que buscas. ### Predefinido - Naranja fuerte a rosa fuerte, dos paradas - Diagonal recta de 45 grados - Color repartido por igual en todo el encuadre - Texto blanco sobre la zona más brillante ### Pensado - Primero un fondo: crema, arcilla o brasa - Luz desde una esquina con un degradado radial - Paradas desiguales, con un color al frente - Tinta óxido en las versiones suaves, tinta crema en las oscuras ## Colores de texto sobre naranja y rosa El naranja es uno de los colores saturados más claros, así que el texto blanco sobre mandarina o albaricoque es más débil de lo que parece. El óxido profundo o la sombra quemada son la tinta fiable en las versiones suaves y vivas; el crema va con las oscuras. Los ratios usan la fórmula WCAG, donde 4,5:1 es el mínimo habitual para texto corrido y [el contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility) explica el resto. | Fondo | Texto | Contraste | Veredicto | | --- | --- | --- | --- | | Albaricoque `#fb923c` | Blanco | 2,3:1 | No cumple | | Mandarina `#f97316` | Blanco | 2,8:1 | No cumple para casi todo el texto | | Melocotón `#fed7aa` | Sombra quemada `#431407` | 11,6:1 | Excelente | | Coral `#fb7185` | Sombra quemada `#431407` | 5,8:1 | Bien | | Naranja profundo `#c2410c` | Blanco | 5,2:1 | Bien | | Frambuesa `#be185d` | Blanco | 6,0:1 | Bien | Si el texto blanco es importante en tu diseño, oscurece las paradas que tiene detrás hasta naranja profundo o frambuesa. Una promoción vertical de bar con letras crema sobre un degradado oscuro que brilla en naranja y frambuesa Una promoción de bar de brasa a frambuesa, con letras crema en el lado oscuro. Una publicación cuadrada de cuidado de la piel con letras marrón oscuro sobre un degradado suave de melocotón y rubor Una publicación de cuidado de la piel sobre melocotón y rubor con tinta sombra quemada. ## CSS del degradado naranja y rosa ```css .warm-hero { background-color: #fff7ed; background-image: radial-gradient(circle at 85% 20%, #fb7185 0%, transparent 45%), radial-gradient(circle at 10% 90%, #fdba74 0%, transparent 50%), linear-gradient(160deg, #fff7ed 0%, #fed7aa 100%); color: #431407; } ``` Un fondo crema con una luz coral arriba a la derecha y albaricoque abajo a la izquierda, y texto sombra quemada. Superponer dos luces radiales suaves sobre una base pálida da una calidez mucho más natural que una sola diagonal. Si quieres una calidez que sea inconfundiblemente tuya, el Mercado de Gradiently te deja buscar Marks por palabras de color como «coral» o «melocotón». Cada Mark es único y tiene exactamente un dueño a la vez, y una vez que lo reservas solo tú puedes exportar con él. ## FAQ ### ¿Cuál es un buen código de degradado naranja y rosa? Un clásico vivo es `linear-gradient(135deg, #f97316 0%, #fb7185 50%, #ec4899 100%)`. Para una versión más suave, prueba `linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #fecdd3 100%)`. ### ¿Combinan el naranja y el rosa? Sí. Son vecinos en el círculo cromático con el coral entre ambos, así que se mezclan limpios y se sienten cálidos. ### ¿Qué color de texto va sobre un degradado naranja y rosa? Un óxido profundo o una sombra quemada como `#431407` se lee bien en versiones suaves y vivas. El blanco solo funciona en las paradas más profundas, como `#c2410c` o `#be185d`. ### ¿Cómo hago que un degradado naranja y rosa se parezca menos a un atardecer? Parte de un fondo como crema, arcilla o una brasa oscura, ilumínalo desde una esquina en lugar de en diagonal y deja que un color mande. ### ¿Qué color hay entre el naranja y el rosa? El coral, alrededor de `#fb7185`, con el salmón y la sandía como parientes cercanos.