# Degradados rojo y negro: códigos dramáticos sin banding [Canonical HTML page](https://gradiently.design/es/guide/red-black-gradient) El rojo contra el negro es la pareja más dramática del color. Puede sentirse como un vestíbulo de cine, un combate de título o un cartel de terror. Estos códigos te dan el drama y te dejan el control. ## The short version - Un degradado rojo y negro funde un rojo como #dc2626 o #b91c1c en casi negro, normalmente a través de un rojo sangre profundo como #450a0a. - Fundir el rojo pasando por un carmesí oscuro y no directamente al negro mantiene la transición rica y evita una banda marrón o gris. - Los degradados rojo y negro muestran mucho banding en imágenes y vídeo comprimidos, así que añade grano y evita zonas grandes, lisas y de bajo contraste. - El texto blanco se lee bien sobre rojo profundo y negro, mientras que los rojos medios saturados necesitan texto grande y en negrita para que el blanco funcione. - La pareja va bien con cine, deporte, videojuegos, moda, vida nocturna y Halloween, y funciona mejor con una fuente de luz potente que con el rojo repartido por igual. Un **degradado rojo y negro** funde un rojo vivo como `#dc2626` o un carmesí más profundo como `#b91c1c` en casi negro, idealmente a través de un rojo sangre como `#450a0a` para que la transición siga siendo rica. Pocas parejas son tan dramáticas: el rojo atrae la atención y el negro no le deja nada con lo que competir. Aquí tienes códigos rojo y negro para cinco tipos de drama, cómo evitar el banding y los colores de texto que funcionan. ## Cómo fundir el rojo en negro sin que salga marrón El error común es mezclar rojo puro directamente con negro puro en dos paradas. El centro de esa mezcla es un rojo marrón turbio que parece sucio y no oscuro. Pasa en cambio por rojos cada vez más oscuros y usa un negro con un rastro de rojo, para que la sombra pertenezca a la misma familia que la luz. - Blanco hueso: #fef2f2 - Luz roja de señal: #f87171 - Escarlata: #ef4444 - Rojo: #dc2626 - Carmesí: #b91c1c - Óxido: #7f1d1d - Sangre: #450a0a - Negro: #0a0a0a Una rampa de rojo a negro, con un blanco hueso para el texto. Usa tres o cuatro muestras contiguas en cada degradado. - Dos paradas: centro turbio: `linear-gradient(180deg, #dc2626 0%, #000000 100%)` - Escalonado: rico hasta el final: `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)` El mismo rojo y la misma oscuridad. La versión escalonada pasa por carmesí y rojo sangre en lugar de marrón. ## Códigos de degradado rojo y negro para cinco tipos de drama ### Cine y thriller Casi todo negro, con el rojo llegando como una sola luz lateral, como un cartel de salida en una habitación oscura. Callado y tenso. - Luz lateral: `radial-gradient(circle at 90% 50%, #b91c1c 0%, #450a0a 25%, #0a0505 60%)` - Borde rojo: `linear-gradient(90deg, #000000 0%, #0a0505 55%, #7f1d1d 85%, #dc2626 100%)` ### Deporte y noche de combate Rojo ardiente que sube desde abajo, como si el suelo de la arena estuviera iluminado. Fuerte, físico y urgente. - Suelo de arena: `radial-gradient(ellipse at 50% 110%, #ef4444 0%, #991b1b 30%, #1c0505 65%, #000000 90%)` - Calor ascendente: `linear-gradient(0deg, #dc2626 0%, #7f1d1d 30%, #0a0a0a 75%)` ### Videojuegos Diagonales nítidas y cortes secos, más cerca de un gráfico que de un resplandor. Se sienten rápidos y agresivos. - Corte seco: `linear-gradient(120deg, #0a0a0a 0%, #0a0a0a 55%, #dc2626 55%, #7f1d1d 100%)` - Patrón de líneas de barrido: `repeating-linear-gradient(180deg, #0a0a0a 0px, #0a0a0a 14px, #450a0a 14px, #450a0a 16px)` ### Moda y lujo Carmesí profundo y negro laca, con casi nada de rojo vivo. Piensa en una caja lacada o en un forro de seda roja: pulido, caro y controlado. - Laca: `linear-gradient(160deg, #0a0a0a 0%, #2a0606 50%, #7f1d1d 100%)` - Terciopelo carmesí: `radial-gradient(circle at 30% 20%, #991b1b 0%, #3b0707 35%, #0a0a0a 75%)` ### Halloween y terror Rojo que se acumula en la parte baja del encuadre o se filtra desde las esquinas. Con moderación inquieta de verdad; si te pasas, parece una tienda de disfraces. - Charco: `radial-gradient(ellipse at 50% 100%, #7f1d1d 0%, #2a0505 40%, #050202 80%)` - Viñeta roja: `radial-gradient(circle at 50% 50%, #0a0a0a 40%, #450a0a 75%, #991b1b 100%)` Diez códigos en cinco ambientes. En cada uno, el rojo ocupa una región y el negro se queda con el resto. [Gráficos de Halloween](https://gradiently.design/es/guide/halloween-graphics) tiene más ideas de temporada. ## Por qué los degradados rojo y negro muestran banding y cómo evitarlo Los degradados oscuros y lisos tienen muy pocos tonos distintos con los que trabajar, así que se rompen en escalones visibles, sobre todo después de que una app los vuelva a comprimir. El rojo saturado lo empeora en vídeo, porque la mayoría de los formatos de vídeo guardan el color con menos resolución que el brillo, y los bordes rojos se emborronan. [Banding en degradados](https://gradiently.design/es/guide/gradient-banding) explica la mecánica. 1. **Añade grano fino** Una capa de ruido ligera rompe los escalones. [Degradados con grano](https://gradiently.design/es/guide/grainy-gradients) tiene una receta lista para usar. 2. **Exporta a tamaño completo** Sube al tamaño propio de la plataforma, como 1080×1350 para una publicación de Instagram, para que no se escale ni se comprima dos veces. 3. **Prefiere PNG para imágenes fijas** El PNG evita los artefactos en bloques que crea el JPEG en zonas oscuras y lisas. 4. **Mantén algo de textura en vídeo** Un fundido rojo perfectamente liso es lo más difícil para un codificador de vídeo. Un poco de movimiento o de grano sobrevive mucho mejor. ## Cuánto rojo usar con el negro El rojo carga con asociaciones fuertes: peligro, calor, pasión, urgencia y, en muchos lugares, suerte y celebración. Junto al negro esos significados suenan más fuerte, así que la proporción decide si un diseño resulta dramático o alarmante. [Significado del color rojo](https://gradiently.design/es/guide/red-color-meaning) cubre las asociaciones con más profundidad. ### Alarmante - Rojo repartido por igual en todo el encuadre - Rojo vivo detrás de texto blanco pequeño - Rojo, negro y un tercer color estridente - Resplandor rojo en cada palabra ### Dramático - El negro ocupa casi todo el encuadre, el rojo en una región - Carmesí profundo detrás del texto, el rojo vivo lejos - Rojo, negro y un blanco hueso discreto - Tipografía sencilla, con la luz haciendo el trabajo ## Colores de texto sobre rojo y negro En el extremo negro se lee casi cualquier cosa clara. En el extremo rojo depende de lo profundo que sea el rojo. El escarlata vivo es más claro de lo que la gente cree, así que el texto blanco ahí debe ser grande y en negrita. Los ratios usan la fórmula WCAG, donde 4,5:1 es el objetivo para texto pequeño. | Fondo | Texto | Contraste | Veredicto | | --- | --- | --- | --- | | Negro `#0a0a0a` | Blanco hueso `#fef2f2` | 18,1:1 | Excelente | | Negro `#0a0a0a` | Escarlata `#ef4444` | 5,3:1 | Bien para titulares en rojo | | Escarlata `#ef4444` | Blanco | 3,8:1 | Solo texto grande y en negrita | | Rojo `#dc2626` | Blanco | 4,8:1 | Bien | | Carmesí `#b91c1c` | Blanco | 6,5:1 | Bien | | Óxido `#7f1d1d` | Blanco | 10,0:1 | Excelente | El texto rojo sobre negro es legible, pero resérvalo para titulares; los pasajes largos en rojo saturado cansan al leer. Un cartel vertical de noche de combate con letras blancas sobre negro, con luz roja que sube desde la parte baja del encuadre Una publicación de gimnasio de boxeo con el rojo subiendo desde el suelo y texto blanco hueso encima. Una historia vertical de cine con letras pálidas sobre negro, iluminada desde un lado por un resplandor rojo profundo Una historia de cine iluminada por una sola luz lateral roja. ## CSS del degradado rojo y negro ```css .drama { background-color: #0a0505; background-image: radial-gradient(ellipse at 50% 110%, #dc2626 0%, transparent 45%), linear-gradient(180deg, #0a0a0a 0%, #2a0606 70%, #450a0a 100%); color: #fef2f2; } .split { background: linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%); } ``` Una sección oscura iluminada de rojo desde abajo y un corte diagonal seco. Dos paradas en la misma posición crean un borde nítido. Para más rojos profundos, mira [degradados rojos](https://gradiently.design/es/guide/red-gradient) y [degradados burdeos](https://gradiently.design/es/guide/maroon-gradient). Si el rojo y el negro son centrales en tu marca, reserva un Mark de Gradiently y nadie más podrá exportarlo. Se renderiza en todos los tamaños, de una historia a un banner de stream, y coloca por sí solo su zona oscura más calmada detrás de tus palabras. ## FAQ ### ¿Cuál es un buen código de degradado rojo y negro? Uno rico es `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`. Pasa por carmesí y rojo sangre en lugar de volverse marrón. ### ¿Por qué mi degradado de rojo a negro se ve marrón? Una mezcla de dos paradas de rojo puro a negro puro pasa por un rojo marrón turbio. Añade paradas de carmesí y rojo sangre, y usa un negro con un rastro de rojo. ### ¿Qué color de texto va sobre un degradado rojo y negro? El blanco o un blanco hueso cálido se lee bien sobre negro y sobre rojos profundos. Sobre escarlata vivo, usa blanco solo en texto grande y en negrita. ### ¿Cómo hago un fondo rojo y negro con corte seco en CSS? Pon dos paradas en la misma posición: `linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%)` crea un borde diagonal nítido. ### ¿Cómo evito el banding en un degradado rojo oscuro? Añade grano fino, exporta al tamaño propio de la plataforma y usa PNG para imágenes fijas. Los fundidos rojos oscuros y lisos muestran más banding que casi cualquier otro degradado.