# Degradado coral: códigos vivos entre rosa y naranja [Canonical HTML page](https://gradiently.design/es/guide/coral-gradient) El coral vive justo donde el rosa se vuelve naranja, con la calidez de uno y el encanto del otro. Es vivo, simpático y sorprendentemente difícil para poner texto. Aquí tienes códigos y soluciones. ## The short version - Un degradado coral mezcla naranjas rosados y cálidos, normalmente inclinados hacia el rosa en un extremo y hacia el mandarina o el melocotón en el otro. - El color CSS coral es #ff7f50, un coral brillante que tira a naranja. - El coral y el verde azulado son casi opuestos, así que una mezcla directa entre ellos se vuelve gris; usa el verde azulado como zona aparte o como acento. - El texto blanco falla sobre coral brillante; usa un vino o marrón profundo como #3b0d0c, o lleva el texto blanco a un coral rojo profundo. - El coral va bien con campañas de verano, comida y bebida, belleza, fitness y apps de consumo amables. 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. | Color | Hex típico | Carácter | | --- | --- | --- | | Coral | `#ff7f50` | Brillante y cálido, tira a naranja | | Coral vivo | `#ff6f61` | Coral más rosado y suave | | Salmón | `#fa8072` | Más pálido y rosado, algo empolvado | | Melocotón | `#ffcba4` | Mucho más claro, más naranja, delicado | | Sandía | `#fb7185` | Más rosado y frío, juguetón | El coral es el más brillante de estos. Sus vecinos son paradas útiles en un degradado coral. ## 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. - Coral clásico: `linear-gradient(135deg, #ffb199 0%, #ff7f50 100%)` - Coral vivo: `linear-gradient(135deg, #ff9a8b 0%, #ff6f61 100%)` - Ponche tropical: `linear-gradient(120deg, #fb7185 0%, #ff7f50 50%, #fbbf24 100%)` - Flor de coral: `radial-gradient(circle at 30% 30%, #ffe4d6 0%, #ff9a7a 40%, #f2545b 100%)` - Atardecer coral: `linear-gradient(180deg, #fdba74 0%, #ff7f50 50%, #e11d48 100%)` Cinco mezclas coral brillantes. Cada color compañero es un vecino cercano, así que las mezclas siguen saturadas. 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](https://gradiently.design/es/guide/pink-gradient). - Coral rosado: `linear-gradient(135deg, #fecdd3 0%, #ff8a7a 100%)` - Salmón rubor: `linear-gradient(135deg, #fce7f3 0%, #fa8072 100%)` - Coral sandía: `linear-gradient(160deg, #fda4af 0%, #f87171 100%)` Los corales que tiran al rosa se sienten más suaves y van bien con belleza y estilo de vida. ### 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](https://gradiently.design/es/guide/orange-pink-gradient) cubren todo el espacio entre los dos. - Coral albaricoque: `linear-gradient(135deg, #fed7aa 0%, #ff7f50 100%)` - De coral a mandarina: `linear-gradient(135deg, #ff7f50 0%, #fb923c 100%)` - Chiringuito: `linear-gradient(180deg, #fef3c7 0%, #ffa07a 50%, #ff6f61 100%)` Los corales que tiran al naranja son más soleados, más enérgicos y están hechos para el verano. ## 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](https://gradiently.design/es/guide/muddy-gradients) explican por qué el centro se vuelve gris. - Evita: gris en el centro: `linear-gradient(90deg, #ff7f50 0%, #14b8a6 100%)` - Sol coral sobre verde azulado: `radial-gradient(circle at 80% 20%, #ff7f50 0%, #ff7f50 8%, transparent 30%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)` - Por blanco concha: `linear-gradient(135deg, #ffd6c9 0%, #fff7f2 50%, #ccfbf1 100%)` La primera mezcla se vuelve gris en el centro. Las otras dos mantienen coral y verde azulado como colores separados, o los unen por un tinte pálido. 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](https://gradiently.design/es/guide/teal-gradient). ## 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. - Coral sobre vino: `radial-gradient(circle at 75% 25%, #ff7f50 0%, #9f1239 35%, #1a0710 80%)` - Atardecer sobre la bahía: `radial-gradient(ellipse at 50% 110%, #ff6f61 0%, #4c1d95 40%, #0f0a1f 85%)` - Carbón y coral: `linear-gradient(200deg, #ff7f50 0%, #3b0d0c 45%, #0c0606 100%)` Una luz coral, mucho oscuro. El coral se lee más brillante que sobre blanco. ## 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](https://gradiently.design/es/guide/color-contrast-accessibility). Una publicación de rebajas de un estudio de pilates con texto pálido sobre la parte más brillante de un degradado coral Las palabras claras directamente sobre coral brillante se ven atrevidas, pero cuestan de leer en un móvil a la luz del día. La misma publicación de pilates con texto claro sobre una zona más tranquila y profunda del degradado coral La misma publicación con una zona más tranquila y un color de texto que le va bien. 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](https://gradiently.design/es/guide/css-gradient-button) tienen más patrones. ```css .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%; } ``` Una píldora coral con texto vino profundo. El degradado se desliza al pasar el cursor en lugar de cambiar de color. ## FAQ ### ¿Cuál es el código hex del coral? El color CSS `coral` es `#ff7f50`. El Living Coral de Pantone suele aproximarse como `#ff6f61`. ### ¿Qué colores combinan con un degradado coral? Melocotón, rosa, mandarina y dorado se mezclan con él. El verde azulado profundo, el azul marino y el ciruela son compañeros potentes si se mantienen como zonas separadas. ### ¿Por qué mi degradado coral y verde azulado se ve gris? Coral y verde azulado están casi opuestos en el círculo cromático, así que los colores intermedios pierden saturación. Mantenlos separados, o únelos por un tinte pálido. ### ¿Puedo usar texto blanco sobre coral? No sobre coral brillante, donde el blanco no supera el contraste. Usa un vino o marrón profundo, o profundiza el coral hasta un rojo antes de usar blanco. ### ¿Qué diferencia hay entre coral y salmón? El salmón es más pálido, más rosado y algo más empolvado. El coral es más brillante, más saturado y tira más al naranja.