# Gradienti rosso e nero: codici drammatici senza banding [Canonical HTML page](https://gradiently.design/it/guide/red-black-gradient) Il rosso contro il nero è l’accoppiata più drammatica del colore. Può sembrare il foyer di un cinema, un incontro di pugilato o un poster horror. Questi codici ti danno il dramma e ti lasciano il controllo. ## The short version - Un gradiente rosso e nero sfuma un rosso come #dc2626 o #b91c1c in un nero quasi puro, di solito passando per un rosso sangue profondo come #450a0a. - Sfumare il rosso attraverso un cremisi scuro invece che direttamente al nero mantiene la transizione ricca ed evita una banda marrone o grigia. - I gradienti rosso e nero mostrano molto banding nelle immagini e nei video compressi, quindi aggiungi grana ed evita aree grandi, morbide e a basso contrasto. - Il testo bianco si legge bene su rosso profondo e nero, mentre i rossi saturi a media luminosità richiedono caratteri grandi e in grassetto perché il bianco funzioni. - L’accoppiata si addice a cinema, sport, gaming, moda, vita notturna e Halloween, e funziona meglio con un’unica forte fonte di luce invece di un rosso steso in modo uniforme. 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. - Bianco osso: #fef2f2 - Rosso segnale chiaro: #f87171 - Scarlatto: #ef4444 - Rosso: #dc2626 - Cremisi: #b91c1c - Ossido: #7f1d1d - Sangue: #450a0a - Nero: #0a0a0a Una rampa dal rosso al nero, con un bianco osso per il testo. Usa tre o quattro campioni adiacenti in ogni gradiente. - Due punti: centro torbido: `linear-gradient(180deg, #dc2626 0%, #000000 100%)` - A gradini: ricco fino in fondo: `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)` Lo stesso rosso e la stessa oscurità. La versione a gradini passa per il cremisi e il rosso sangue invece che per il marrone. ## 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. - Luce laterale: `radial-gradient(circle at 90% 50%, #b91c1c 0%, #450a0a 25%, #0a0505 60%)` - Bordo rosso: `linear-gradient(90deg, #000000 0%, #0a0505 55%, #7f1d1d 85%, #dc2626 100%)` ### Sport e serata di incontri Un rosso caldo che sale dal basso, come se il pavimento dell’arena fosse illuminato. Forte, fisico e urgente. - Pavimento dell’arena: `radial-gradient(ellipse at 50% 110%, #ef4444 0%, #991b1b 30%, #1c0505 65%, #000000 90%)` - Calore che sale: `linear-gradient(0deg, #dc2626 0%, #7f1d1d 30%, #0a0a0a 75%)` ### Gaming Diagonali nette e stacchi netti, più vicini a una grafica che a un bagliore. Si leggono come veloci e aggressivi. - Divisione netta: `linear-gradient(120deg, #0a0a0a 0%, #0a0a0a 55%, #dc2626 55%, #7f1d1d 100%)` - Motivo a linee di scansione: `repeating-linear-gradient(180deg, #0a0a0a 0px, #0a0a0a 14px, #450a0a 14px, #450a0a 16px)` ### 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. - Lacca: `linear-gradient(160deg, #0a0a0a 0%, #2a0606 50%, #7f1d1d 100%)` - Velluto cremisi: `radial-gradient(circle at 30% 20%, #991b1b 0%, #3b0707 35%, #0a0a0a 75%)` ### 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. - Pozza: `radial-gradient(ellipse at 50% 100%, #7f1d1d 0%, #2a0505 40%, #050202 80%)` - Vignettatura rossa: `radial-gradient(circle at 50% 50%, #0a0a0a 40%, #450a0a 75%, #991b1b 100%)` Dieci codici su cinque atmosfere. In ciascuno il rosso occupa una zona e il nero tiene il resto. [Grafiche per Halloween](https://gradiently.design/it/guide/halloween-graphics) ha altre idee stagionali. ## 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](https://gradiently.design/it/guide/gradient-banding) spiega i meccanismi. 1. **Aggiungi grana fine** Un leggero livello di rumore rompe i gradini. [Gradienti con grana](https://gradiently.design/it/guide/grainy-gradients) ha una ricetta pronta all’uso. 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. **Preferisci il PNG per le immagini fisse** Il PNG evita gli artefatti a blocchi che il JPEG crea nelle aree scure e morbide. 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](https://gradiently.design/it/guide/red-color-meaning) tratta le associazioni più a fondo. ### Allarmante - Rosso steso in modo uniforme su tutta l’inquadratura - Rosso acceso dietro un piccolo testo bianco - Rosso, nero e un terzo colore sparato - Un bagliore rosso su ogni parola ### Drammatico - Il nero a tenere gran parte dell’inquadratura, il rosso in una zona - Cremisi profondo dietro il testo, il rosso acceso tenuto lontano - Rosso, nero e un bianco osso discreto - Testo semplice, con la luce a fare il lavoro ## 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. | Sfondo | Testo | Contrasto | Verdetto | | --- | --- | --- | --- | | Nero `#0a0a0a` | Bianco osso `#fef2f2` | 18,1:1 | Eccellente | | Nero `#0a0a0a` | Scarlatto `#ef4444` | 5,3:1 | Buono per titoli in rosso | | Scarlatto `#ef4444` | Bianco | 3,8:1 | Solo caratteri grandi e in grassetto | | Rosso `#dc2626` | Bianco | 4,8:1 | Buono | | Cremisi `#b91c1c` | Bianco | 6,5:1 | Buono | | Ossido `#7f1d1d` | Bianco | 10,0:1 | Eccellente | Il testo rosso su nero è leggibile, ma tienilo per i titoli; i passaggi lunghi in rosso saturo stancano la lettura. Un poster verticale per una serata di incontri con lettere bianche su nero, con luce rossa che sale dal basso dell’inquadratura Un post per una palestra di boxe con il rosso che sale dal pavimento e testo bianco osso sopra. Una storia verticale per un cinema con lettere chiare su nero, illuminata da un lato da un bagliore rosso profondo Una storia per un cinema illuminata da un’unica luce rossa laterale. ## CSS per gradienti rosso e nero ```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 sezione scura illuminata di rosso dal basso e una divisione diagonale netta. Due punti nella stessa posizione creano un bordo netto. Per altri rossi profondi, vedi [gradienti rossi](https://gradiently.design/it/guide/red-gradient) e [gradienti bordeaux](https://gradiently.design/it/guide/maroon-gradient). 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. ## FAQ ### Qual è un buon codice per un gradiente rosso e nero? Uno ricco è `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`. Passa per il cremisi e il rosso sangue invece di virare al marrone. ### Perché il mio gradiente da rosso a nero sembra marrone? Una fusione a due punti dal rosso puro al nero puro passa per un rosso marrone torbido. Aggiungi punti di cremisi e rosso sangue e usa un nero con una traccia di rosso. ### Che colore di testo va su un gradiente rosso e nero? Il bianco o un bianco osso caldo si legge bene su nero e su rossi profondi. Sullo scarlatto acceso usa il bianco solo in caratteri grandi e in grassetto. ### Come faccio uno sfondo rosso e nero con divisione netta in CSS? Metti due punti nella stessa posizione: `linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%)` crea un bordo diagonale netto. ### Come evito il banding in un gradiente rosso scuro? Aggiungi grana fine, esporta alla misura propria della piattaforma e usa il PNG per le immagini fisse. Le dissolvenze rosse scure e morbide mostrano banding più di quasi ogni altro gradiente.