Degradados rojo y negro: códigos dramáticos sin banding

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.

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.

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.

Videojuegos

Diagonales nítidas y cortes secos, más cerca de un gráfico que de un resplandor. Se sienten rápidos y agresivos.

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.

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.

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 explica la mecánica.

1. 1

   Añade grano fino

   Una capa de ruido ligera rompe los escalones. Degradados con grano tiene una receta lista para usar.

2. 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. 3

   Prefiere PNG para imágenes fijas

   El PNG evita los artefactos en bloques que crea el JPEG en zonas oscuras y lisas.

4. 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 cubre las asociaciones con más profundidad.

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.

CSS del degradado rojo y negro

.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%);
}

Para más rojos profundos, mira degradados rojos y degradados burdeos. 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.