Gradienti rosso e nero: codici drammatici senza banding

Un gradiente rosso e nero sfuma un rosso vivo come #dc2626 o un cremisi più profondo come #b91c1c in un nero quasi puro, idealmente passando per un rosso sangue come #450a0a così la transizione resta ricca. Poche accoppiate sono così drammatiche: il rosso cattura l’attenzione e il nero non gli lascia nulla con cui competere. Ecco codici rosso e nero per cinque tipi di dramma, come evitare il banding e i colori di testo che funzionano.

Come sfumare il rosso nel nero senza ottenere marrone

L’errore comune è fondere il rosso puro direttamente nel nero puro in due soli punti. Il centro di quella fusione è un rosso marrone torbido che sembra sporco e non scuro. Passa invece per rossi più scuri e usa un nero con una traccia di rosso, così l’ombra appartiene alla stessa famiglia della luce.

Codici di gradienti rosso e nero per cinque tipi di dramma

Cinema e thriller

Per lo più nero, con il rosso che arriva come un’unica luce laterale, come un’insegna d’uscita in una stanza buia. Silenzioso e teso.

Sport e serata di incontri

Un rosso caldo che sale dal basso, come se il pavimento dell’arena fosse illuminato. Forte, fisico e urgente.

Gaming

Diagonali nette e stacchi netti, più vicini a una grafica che a un bagliore. Si leggono come veloci e aggressivi.

Moda e lusso

Cremisi profondo e nero laccato, con quasi nessun rosso acceso. Pensa a una scatola laccata o alla fodera di seta rossa: lucido, costoso e controllato.

Halloween e horror

Un rosso che si raccoglie in fondo all’inquadratura o filtra dagli angoli. Usalo con parsimonia e inquieta davvero; esagera e sembra un negozio di costumi.

Perché i gradienti rosso e nero mostrano banding e come evitarlo

I gradienti scuri e morbidi hanno pochissime sfumature distinte con cui lavorare, quindi si spezzano in gradini visibili, soprattutto dopo che un’app li ricomprime. Il rosso saturo peggiora le cose nei video, perché la maggior parte dei formati video memorizza il colore a una risoluzione inferiore alla luminosità, e i bordi rossi sbavano. Banding nei gradienti spiega i meccanismi.

1. 1

   Aggiungi grana fine

   Un leggero livello di rumore rompe i gradini. Gradienti con grana ha una ricetta pronta all’uso.

2. 2

   Esporta alla misura piena

   Carica alla misura propria della piattaforma, come 1080×1350 per un post di Instagram, così non viene scalato e compresso due volte.

3. 3

   Preferisci il PNG per le immagini fisse

   Il PNG evita gli artefatti a blocchi che il JPEG crea nelle aree scure e morbide.

4. 4

   Mantieni un po’ di texture nel video

   Una dissolvenza rossa perfettamente morbida è la cosa più difficile per un encoder video. Un po’ di movimento o di grana sopravvive molto meglio.

Quanto rosso usare con il nero

Il rosso porta con sé forti associazioni: pericolo, calore, passione, urgenza e, in molti posti, fortuna e festa. Accanto al nero quei significati si alzano di volume, quindi è la proporzione a decidere se un design sembra drammatico o allarmante. Significato del colore rosso tratta le associazioni più a fondo.

Colori del testo su rosso e nero

Sul lato nero si legge quasi qualsiasi cosa chiara. Sul lato rosso dipende da quanto è profondo il rosso. Lo scarlatto acceso è più chiaro di quanto si pensi, quindi lì il testo bianco deve essere grande e in grassetto. I rapporti usano la formula WCAG, in cui 4,5:1 è l’obiettivo per il testo piccolo.

CSS per gradienti rosso e nero

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

Per altri rossi profondi, vedi gradienti rossi e gradienti bordeaux. Se rosso e nero sono centrali per il tuo brand, riserva un Mark di Gradiently e nessun altro potrà esportarlo. Si rende a ogni misura, da una storia a un banner per streaming, e sposta da solo la sua zona scura più calma dietro le tue parole.