# Degradados rojos: energía sin sensación de alarma [Canonical HTML page](https://gradiently.design/es/guide/red-gradient) El rojo capta la atención más rápido que ningún otro color, y justo por eso sale mal. Cómo crear degradados rojos que se sientan vivos, cálidos y seguros en lugar de estridentes. ## The short version - Un degradado rojo es una mezcla construida en torno a tonos rojos como el carmesí, el escarlata, el sangre de buey o el coral, pensada para diseños que necesitan calidez y urgencia. - Los degradados rojos se ven mejor cuando solo una parada está totalmente saturada y las demás van hacia un vino más profundo o hacia un naranja o un rosa más cálidos. - El #ff0000 puro con texto blanco tiene una relación de contraste de 4:1, por debajo del mínimo de 4,5:1 para el texto de cuerpo normal. - Mantener el rojo junto a sus vecinos cálidos, y no junto a un azul saturado, evita el parpadeo y la alarma que hacen que los diseños rojos resulten agresivos. - Los rojos profundos como el sangre de buey y el vino se leen como premium y serenos, mientras que el escarlata brillante y el coral se leen como enérgicos y divertidos. Un **degradado rojo** es una mezcla construida en torno al rojo, del escarlata brillante y el carmesí al sangre de buey profundo y el coral suave, y es el degradado más enérgico que puedes poner en una pantalla. El truco para usarlo bien es la contención: deja que una parada lleve toda la saturación, lleva el resto hacia un vino más profundo o hacia un naranja o un rosa más cálidos, y mantén el rojo lejos de los lugares donde la gente espera avisos. Así, el rojo se lee como calor y apetito, no como un mensaje de error. A continuación encontrarás tres paletas rojas, nueve códigos de degradados rojos para copiar, los números de contraste para el texto sobre rojo y dónde funciona mejor el rojo. Para entender cómo transmiten significado los colores, mira [la psicología del color](https://gradiently.design/es/guide/color-psychology). ## Por qué es más difícil diseñar con rojo de lo que parece El rojo es estridente por varias razones a la vez. El rojo de pantalla alcanza una saturación muy alta, así que domina todo lo que tiene al lado. Las interfaces han enseñado a la gente a leerlo como peligro: los estados de error, los botones de borrar, la batería baja y los avisos sin leer son casi siempre rojos. Y un rojo brillante justo al lado de un azul saturado puede parecer que vibra o que está a otra profundidad, un efecto llamado cromoestereopsis, que hace que el texto con esa combinación canse al leerlo. ### Se lee como alarma - Un `#ff0000` plano llenando todo el lienzo - Texto o bordes rojos en una página blanca sin ningún otro color cálido - Rojo colocado directamente contra un azul saturado - Rojo usado a la vez para la marca y para los mensajes de error ### Se lee como energía - Una parada roja brillante que cae hacia un vino o un sangre de buey profundos - Rojo mezclado con sus vecinos cálidos, el naranja y el rosa - Rojo sobre un fondo oscuro y cálido con un blanco roto suave para el texto - Un color aparte y claramente distinto reservado para los errores ## Tres paletas rojas: carmesí, sangre de buey y coral La mayoría de los degradados rojos que funcionan salen de una de tres familias. El carmesí tira un poco hacia el azul y se siente atrevido y clásico. El sangre de buey y el vino son rojos profundos y oscuros que recuerdan al cuero, el terciopelo y el vino tinto. El coral es un rojo elevado hacia el naranja y el rosa, más suave y cercano. Elige una familia antes de elegir un degradado, porque mezclar las tres en una misma mezcla suele quedar turbio. - Carmesí: #e11d48 - Carmesí profundo: #b91c1c - Sangre de buey: #7f1d1d - Vino: #4a0e0e - Coral: #ff6f61 - Rubor: #fecaca El carmesí arriba, el sangre de buey y el vino para la profundidad, el coral y el rubor para la luz. Cada familia construye su propio tipo de degradado rojo. ## Códigos de degradados rojos para copiar Todos estos degradados mantienen el rojo como nota principal, pero difieren en temperatura y profundidad. Los más oscuros funcionan como fondos completos; los más brillantes van mejor en botones, insignias, tarjetas y ráfagas cortas de atención. - Fuego carmesí: `linear-gradient(135deg, #7f1d1d 0%, #dc2626 55%, #f97316 100%)` - Sangre de buey: `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)` - De coral a carmesí: `linear-gradient(135deg, #ff6f61 0%, #e11d48 100%)` - Brillo cereza: `radial-gradient(80% 80% at 30% 20%, #ef4444 0%, #991b1b 55%, #3b0a0a 100%)` - De rojo a rosa: `linear-gradient(135deg, #dc2626 0%, #ec4899 100%)` - De escarlata a vino: `linear-gradient(90deg, #ff3b30 0%, #b91c1c 50%, #5b0f1f 100%)` - Terracota: `linear-gradient(180deg, #c2410c 0%, #9a3412 50%, #6b1f0e 100%)` - Rubor suave: `linear-gradient(135deg, #fee2e2 0%, #fca5a5 50%, #f87171 100%)` - De rojo a negro: `linear-gradient(180deg, #b91c1c 0%, #450a0a 70%, #120404 100%)` Nueve degradados rojos, de brillantes a profundos. Cada uno se mezcla solo a través de vecinos cálidos o de rojos más profundos, nunca a través del gris. Fíjate en lo que tienen en común los códigos. La parada brillante está en un extremo o en un punto, nunca en todo el campo. Las paradas oscuras son *rojos* oscuros, no negro ni gris, así que la mezcla conserva su color al caer. Si un degradado rojo se vuelve marrón en el medio, probablemente lo has mezclado hacia un verde o un gris; nuestra guía sobre [degradados turbios](https://gradiently.design/es/guide/muddy-gradients) explica por qué. ## Cómo controlar la intensidad del rojo 1. **Elige una sola parada brillante** Decide dónde va el rojo más saturado, normalmente cerca de un titular o del punto focal. Todo lo demás baja a partir de él en luminosidad o saturación. 2. **Dale vecinos oscuros** Los rojos profundos como `#7f1d1d` y `#4a0e0e` hacen que la parada brillante resplandezca por contraste, como una sola brasa en un fuego oscuro. 3. **Mezcla hacia colores cálidos** El naranja, el coral y el rosa están junto al rojo en la rueda de color, así que se mezclan limpiamente. Mira [colores análogos](https://gradiently.design/es/guide/analogous-colors) para entender por qué los vecinos siempre se portan bien. 4. **Limita el rojo a una parte del diseño** El rojo es por naturaleza un color de acento. Incluso en un diseño dominado por el rojo, una zona amplia y tranquila ayuda; la [regla 60 30 10](https://gradiently.design/es/guide/60-30-10-rule) es una buena proporción de partida. 5. **Usa otro color para los errores** Si tu marca es roja, da a los mensajes de error un tratamiento claramente distinto, como un icono y un rojo más oscuro o más anaranjado, para que un aviso nunca parezca publicidad. ## Texto sobre un degradado rojo El rojo queda en un punto intermedio incómodo para el texto. El rojo puro de pantalla es demasiado oscuro para que el texto negro resulte cómodo y demasiado claro para que el texto blanco alcance el mínimo del texto de cuerpo. La solución es oscurecer el fondo cuando quieras texto blanco, o aclararlo cuando quieras texto oscuro, y comprobar el punto más claro del degradado que queda detrás de tus palabras. | Fondo | Texto | Contraste | Veredicto | | --- | --- | --- | --- | | `#ff0000` rojo puro | Blanco | 4,0:1 | Solo texto grande | | `#dc2626` rojo | Blanco | 4,8:1 | Válido para texto de cuerpo | | `#b91c1c` carmesí profundo | Blanco | 6,5:1 | Cómodo | | `#7f1d1d` sangre de buey | `#fff1f0` blanco roto | 9,1:1 | Excelente | | `#ff6f61` coral | Blanco | 2,7:1 | No pasa | | `#ff6f61` coral | `#1a0505` casi negro | 7,2:1 | Excelente | Relaciones calculadas con la fórmula WCAG. El mínimo es 4,5:1 para el texto normal y 3:1 para el texto grande. Más detalles en [contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility). Un post vertical de rebajas con las palabras Rebajas de invierno en blanco sobre un degradado carmesí profundo El titular va sobre la parte más profunda del rojo, donde el texto blanco resulta cómodo. Una historia vertical que anuncia un horario de cierre más tardío sobre un degradado rojo cálido con un brillo cerca de la parte superior El mismo rojo en una historia, con la parada brillante lejos de las palabras. ## Dónde funcionan mejor los degradados rojos El rojo encaja donde la energía y el apetito son lo importante. Es habitual en comida y bebida, deporte, entretenimiento y rebajas, y en el diseño festivo; en la tradición china, el rojo se asocia fuertemente con la suerte y la celebración, y por eso protagoniza el diseño del Año Nuevo Lunar. Los significados cambian entre culturas, así que comprueba el tuyo en [el significado de los colores en el mundo](https://gradiently.design/es/guide/color-meanings-around-the-world). - **Comida, cafeterías y restaurantes:** los degradados coral y terracota se sienten cálidos y apetecibles - **Deporte y fitness:** el fuego carmesí y el de escarlata a vino transmiten velocidad y esfuerzo - **Moda y belleza:** el sangre de buey, el vino y el rubor se sienten cuidados y premium - **Rebajas y lanzamientos:** una parada brillante sobre un campo rojo profundo atrae la mirada sin gritar - **Música y vida nocturna:** el de rojo a negro y el brillo cereza van bien con espacios oscuros e iluminados Si quieres rojo sin tener que rehacerlo para cada formato, el Mercado de Gradiently te permite buscar Marks con palabras como «rojo profundo» o «coral». Cada Mark desplaza su zona más tranquila detrás de tus palabras, lo que resuelve por ti el problema del texto sobre rojo. ## FAQ ### ¿Qué colores combinan bien con el rojo en un degradado? Sus vecinos cálidos son los que mejor se mezclan: naranja, coral, rosa y vino profundo. Mezclar el rojo hacia el verde o el gris suele volver marrón el centro. ### ¿Se puede poner texto blanco sobre un fondo rojo? Sí, si el rojo es lo bastante profundo. El blanco sobre `#dc2626` da 4,8:1 y vale para texto de cuerpo, pero el blanco sobre `#ff0000` puro solo da 4:1, así que úsalo solo para texto grande. ### ¿Cuál es el código hex de un degradado rojo oscuro? Prueba `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`, una mezcla sangre de buey que sigue siendo roja de un extremo a otro. ### ¿Por qué mi degradado rojo parece agresivo? Normalmente porque todo el campo es rojo totalmente saturado. Mantén una sola parada brillante, deja que el resto caiga hacia rojos más profundos y evita poner el rojo directamente contra un azul saturado.