# Rood-zwarte verlopen: dramatische codes zonder banding [Canonical HTML page](https://gradiently.design/nl/guide/red-black-gradient) Rood tegen zwart is de dramatischste combinatie in kleur. Het kan voelen als een bioscoopfoyer, een bokswedstrijd of een horrorposter. Met deze codes krijg je het drama en houd je de controle. ## The short version - Een rood-zwart verloop laat een rood als #dc2626 of #b91c1c overlopen in bijna zwart, meestal via een diep bloedrood als #450a0a. - Rood laten overlopen via donker karmozijn in plaats van rechtstreeks naar zwart houdt de overgang rijk en voorkomt een bruine of grijze band. - Rood-zwarte verlopen vertonen sterke banding in gecomprimeerde beelden en video, dus voeg korrel toe en vermijd grote, gladde vlakken met weinig contrast. - Wit leest goed op diep rood en zwart, terwijl verzadigde middenroden grote, vette letters nodig hebben om wit te laten werken. - De combinatie past bij film, sport, gaming, mode, uitgaan en Halloween en werkt het best met één sterke lichtbron in plaats van gelijkmatig verspreid rood. Een **rood-zwart verloop** laat een helder rood als `#dc2626` of een dieper karmozijn als `#b91c1c` overlopen in bijna zwart, bij voorkeur via een bloedrood als `#450a0a` zodat de overgang rijk blijft. Weinig combinaties zijn zo dramatisch: rood trekt de aandacht en zwart laat er niets tegenover staan. Hier vind je rood-zwarte codes voor vijf soorten drama, hoe je banding voorkomt en welke tekstkleuren werken. ## Zo laat je rood overlopen in zwart zonder bruin De veelgemaakte fout is puur rood in twee stops rechtstreeks mengen met puur zwart. Het midden van die menging is een troebel, bruinig rood dat er vuil uitziet in plaats van donker. Loop liever langs steeds donkerdere roden en gebruik een zwart met een snufje rood erin, zodat de schaduw tot dezelfde familie hoort als het licht. - Beenwit: #fef2f2 - Signaalrood licht: #f87171 - Scharlaken: #ef4444 - Rood: #dc2626 - Karmozijn: #b91c1c - Oxide: #7f1d1d - Bloed: #450a0a - Zwart: #0a0a0a Een rood-naar-zwart reeks, met een beenwit voor tekst. Gebruik in één verloop drie of vier aangrenzende kleuren. - Twee stops: troebel midden: `linear-gradient(180deg, #dc2626 0%, #000000 100%)` - Getrapt: rijk tot het eind: `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)` Hetzelfde rood en dezelfde duisternis. De getrapte versie loopt via karmozijn en bloedrood in plaats van bruin. ## Rood-zwarte verloopcodes voor vijf soorten drama ### Bioscoop en thriller Vooral zwart, met rood als één lichtbron van opzij, als een nooduitgangbordje in een donkere kamer. Stil en gespannen. - Zijlicht: `radial-gradient(circle at 90% 50%, #b91c1c 0%, #450a0a 25%, #0a0505 60%)` - Rode rand: `linear-gradient(90deg, #000000 0%, #0a0505 55%, #7f1d1d 85%, #dc2626 100%)` ### Sport en gevechtsavond Heet rood dat van onderen opstijgt, alsof de arenavloer verlicht is. Luid, fysiek en dringend. - Arenavloer: `radial-gradient(ellipse at 50% 110%, #ef4444 0%, #991b1b 30%, #1c0505 65%, #000000 90%)` - Stijgende hitte: `linear-gradient(0deg, #dc2626 0%, #7f1d1d 30%, #0a0a0a 75%)` ### Gaming Scherpe diagonalen en harde stops, meer een graphic dan een gloed. Die lezen als snel en agressief. - Harde splitsing: `linear-gradient(120deg, #0a0a0a 0%, #0a0a0a 55%, #dc2626 55%, #7f1d1d 100%)` - Scanlinepatroon: `repeating-linear-gradient(180deg, #0a0a0a 0px, #0a0a0a 14px, #450a0a 14px, #450a0a 16px)` ### Mode en luxe Diep karmozijn en lakzwart, met bijna geen helder rood. Denk aan een lakdoos of een rood zijden voering: gepolijst, duur en beheerst. - Lak: `linear-gradient(160deg, #0a0a0a 0%, #2a0606 50%, #7f1d1d 100%)` - Karmozijnen fluweel: `radial-gradient(circle at 30% 20%, #991b1b 0%, #3b0707 35%, #0a0a0a 75%)` ### Halloween en horror Rood dat onderin het beeld samenvloeit of vanuit de hoeken binnensijpelt. Spaarzaam gebruikt is het echt verontrustend; overdrijf je, dan lijkt het een verkleedwinkel. - Een plas: `radial-gradient(ellipse at 50% 100%, #7f1d1d 0%, #2a0505 40%, #050202 80%)` - Rode vignettering: `radial-gradient(circle at 50% 50%, #0a0a0a 40%, #450a0a 75%, #991b1b 100%)` Tien codes voor vijf sferen. In elk neemt rood één zone in en houdt zwart de rest. [Halloween-graphics](https://gradiently.design/nl/guide/halloween-graphics) heeft meer seizoensideeën. ## Waarom rood-zwarte verlopen banding krijgen en hoe je dat voorkomt Donkere, gladde verlopen hebben maar weinig verschillende tinten om mee te werken, dus vallen ze uiteen in zichtbare stappen, vooral nadat een app ze opnieuw comprimeert. Verzadigd rood maakt het in video erger, omdat de meeste videoformaten kleur met een lagere resolutie opslaan dan helderheid, waardoor rode randen uitsmeren. [Gradient banding](https://gradiently.design/nl/guide/gradient-banding) legt de werking uit. 1. **Voeg fijne korrel toe** Een lichte ruislaag breekt de stappen op. [Korrelige verlopen](https://gradiently.design/nl/guide/grainy-gradients) heeft een kant-en-klaar recept. 2. **Exporteer op volledige grootte** Upload op het eigen formaat van het platform, zoals 1080×1350 voor een Instagram-post, zodat het niet twee keer wordt geschaald en gecomprimeerd. 3. **Kies PNG voor stilstaande beelden** PNG voorkomt de blokkerige artefacten die JPEG maakt in donkere, gladde vlakken. 4. **Houd wat textuur in video** Een perfect glad rood verloop is het moeilijkste wat een video-encoder kan krijgen. Een beetje beweging of korrel overleeft veel beter. ## Hoeveel rood je met zwart gebruikt Rood draagt sterke associaties: gevaar, hitte, passie, urgentie en op veel plekken geluk en feest. Naast zwart worden die betekenissen luider, dus de verhouding bepaalt of een ontwerp dramatisch of alarmerend aanvoelt. [De betekenis van rood](https://gradiently.design/nl/guide/red-color-meaning) gaat dieper in op die associaties. ### Alarmerend - Rood gelijkmatig over het hele beeld - Helder rood achter kleine witte tekst - Rood, zwart en een derde schreeuwerige kleur - Een rode gloed op elk woord ### Dramatisch - Zwart houdt het grootste deel van het beeld, rood zit in één zone - Diep karmozijn achter tekst, helder rood op afstand - Rood, zwart en een rustig beenwit - Gewone tekst, waarbij het licht het werk doet ## Tekstkleuren op rood en zwart Aan de zwarte kant is vrijwel alles wat licht is leesbaar. Aan de rode kant hangt het af van hoe diep het rood is. Helder scharlaken is lichter dan mensen denken, dus witte tekst moet daar groot en vet zijn. De verhoudingen volgen de WCAG-formule, waarbij 4,5:1 het doel is voor kleine tekst. | Achtergrond | Tekst | Contrast | Oordeel | | --- | --- | --- | --- | | Zwart `#0a0a0a` | Beenwit `#fef2f2` | 18,1:1 | Uitstekend | | Zwart `#0a0a0a` | Scharlaken `#ef4444` | 5,3:1 | Goed voor koppen in rood | | Scharlaken `#ef4444` | Wit | 3,8:1 | Alleen grote, vette letters | | Rood `#dc2626` | Wit | 4,8:1 | Goed | | Karmozijn `#b91c1c` | Wit | 6,5:1 | Goed | | Oxide `#7f1d1d` | Wit | 10,0:1 | Uitstekend | Rode tekst op zwart is leesbaar, maar bewaar het voor koppen; lange passages in verzadigd rood zijn vermoeiend om te lezen. Een staande poster voor een vechtavond met witte letters op zwart, met rood licht dat onderin het beeld opstijgt Een post van een boksschool met rood dat van de vloer opstijgt en beenwitte letters erboven. Een verticale bioscoopstory met bleke letters op zwart, van één kant verlicht door een diep rode gloed Een bioscoopstory verlicht door één rood zijlicht. ## CSS voor een rood-zwart verloop ```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%); } ``` Een donkere sectie met rood licht van onderen en een harde diagonale splitsing. Twee stops op dezelfde positie maken een scherpe rand. Voor meer diepe roden, zie [rode verlopen](https://gradiently.design/nl/guide/red-gradient) en [bordeauxrode verlopen](https://gradiently.design/nl/guide/maroon-gradient). Als rood-zwart centraal staat in je merk, claim dan een Gradiently Mark en niemand anders kan hem exporteren. Hij rendert op elk formaat, van een story tot een streambanner, en schuift zijn rustigste donkere zone automatisch achter je tekst. ## FAQ ### Wat is een goede code voor een rood-zwart verloop? Een rijke is `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`. Die loopt via karmozijn en bloedrood in plaats van bruin te worden. ### Waarom ziet mijn verloop van rood naar zwart er bruin uit? Een menging met twee stops van puur rood naar puur zwart loopt door een troebel bruinig rood. Voeg stops van karmozijn en bloedrood toe en gebruik een zwart met een snufje rood. ### Welke tekstkleur past bij een rood-zwart verloop? Wit of een warm beenwit leest goed op zwart en op diepe roden. Op helder scharlaken gebruik je wit alleen in grote, vette letters. ### Hoe maak ik in CSS een rood-zwarte achtergrond met een harde splitsing? Zet twee stops op dezelfde positie: `linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%)` maakt een scherpe diagonale rand. ### Hoe voorkom ik banding in een donkerrood verloop? Voeg fijne korrel toe, exporteer op het eigen formaat van het platform en gebruik PNG voor stilstaande beelden. Donkere, gladde rode verlopen krijgen meer banding dan bijna elk ander verloop.