La versión corta
- 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.
En esta página
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.
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
#ff0000plano 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.
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.
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 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
#7f1d1dy#4a0e0ehacen 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 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 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 |
El titular va sobre la parte más profunda del rojo, donde el texto blanco resulta cómodo.
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.
- 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.
Preguntas frecuentes
¿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.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil
