# Rød og sort gradient: dramatiske koder uden banding

[Canonical HTML page](https://gradiently.design/da/guide/red-black-gradient)

Rød mod sort er den mest dramatiske farvekombination, der findes. Den kan føles som en biograffoyer, en titelkamp eller en gyserplakat. Disse koder giver dig dramaet og bevarer kontrollen.

## The short version

- En rød og sort gradient toner en rød som #dc2626 eller #b91c1c over i næsten sort, som regel gennem en dyb blodrød som #450a0a.
- At tone rød gennem mørk karmin i stedet for direkte til sort holder overgangen fyldig og undgår et brunt eller gråt bånd.
- Røde og sorte gradienter får kraftig banding i komprimerede billeder og video, så tilføj korn, og undgå store, glatte områder med lav kontrast.
- Hvid tekst kan læses godt på dyb rød og sort, mens mættede mellemrøde toner kræver stor, fed tekst, for at hvid virker.
- Kombinationen passer til film, sport, gaming, mode, natteliv og halloween og virker bedst med én stærk lyskilde frem for rød fordelt jævnt.

En **rød og sort gradient** toner en klar rød som `#dc2626` eller en dybere karmin som `#b91c1c` over i næsten sort, helst gennem en blodrød som `#450a0a`, så overgangen forbliver fyldig. Få kombinationer er så dramatiske: rød fanger opmærksomheden, og sort giver den intet at konkurrere med. Her er røde og sorte koder til fem slags drama, hvordan du undgår banding, og de tekstfarver, der virker.

## Sådan toner du rød over i sort uden brunt

Den almindelige fejl er at blande ren rød direkte over i ren sort med to stop. Midten af den blanding er en grumset brunrød, der ser beskidt ud frem for mørk. Gå i stedet gennem mørkere røde toner, og brug en sort med et strejf af rødt, så skyggen hører til samme familie som lyset.

- Benhvid: #fef2f2
- Lys signalrød: #f87171
- Skarlagen: #ef4444
- Rød: #dc2626
- Karmin: #b91c1c
- Oxid: #7f1d1d
- Blod: #450a0a
- Sort: #0a0a0a

En skala fra rød til sort med en benhvid til tekst. Brug tre eller fire nabofelter i én gradient.

- To stop: grumset midte: `linear-gradient(180deg, #dc2626 0%, #000000 100%)`
- Trinvis: fyldig hele vejen: `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`

Samme rød og samme mørke. Den trinvise version går gennem karmin og blodrød i stedet for brun.

## Koder til rød og sort gradient til fem slags drama

### Film og thriller

Mest sort, hvor rødt kommer ind som ét lys fra siden, som et nødudgangsskilt i et mørkt rum. Stille og anspændt.

- Sidelys: `radial-gradient(circle at 90% 50%, #b91c1c 0%, #450a0a 25%, #0a0505 60%)`
- Rød kant: `linear-gradient(90deg, #000000 0%, #0a0505 55%, #7f1d1d 85%, #dc2626 100%)`

### Sport og kampaften

Varm rød, der stiger op nedefra, som om arenaens gulv er oplyst. Højlydt, fysisk og presserende.

- Arenagulv: `radial-gradient(ellipse at 50% 110%, #ef4444 0%, #991b1b 30%, #1c0505 65%, #000000 90%)`
- Stigende varme: `linear-gradient(0deg, #dc2626 0%, #7f1d1d 30%, #0a0a0a 75%)`

### Gaming

Skarpe diagonaler og hårde stop, tættere på grafik end på glød. De opleves som hurtige og aggressive.

- Skarp deling: `linear-gradient(120deg, #0a0a0a 0%, #0a0a0a 55%, #dc2626 55%, #7f1d1d 100%)`
- Scanlinjemønster: `repeating-linear-gradient(180deg, #0a0a0a 0px, #0a0a0a 14px, #450a0a 14px, #450a0a 16px)`

### Mode og luksus

Dyb karmin og lakeret sort, næsten uden klar rød. Tænk på en lakeret æske eller et rødt silkefor: poleret, dyrt og kontrolleret.

- Lak: `linear-gradient(160deg, #0a0a0a 0%, #2a0606 50%, #7f1d1d 100%)`
- Karminfløjl: `radial-gradient(circle at 30% 20%, #991b1b 0%, #3b0707 35%, #0a0a0a 75%)`

### Halloween og gys

Rød, der samler sig i bunden af billedet eller siver ind fra hjørnerne. Brugt sparsomt er det virkelig foruroligende; overdriv det, og det ligner en udklædningsbutik.

- Pøl: `radial-gradient(ellipse at 50% 100%, #7f1d1d 0%, #2a0505 40%, #050202 80%)`
- Rød vignet: `radial-gradient(circle at 50% 50%, #0a0a0a 40%, #450a0a 75%, #991b1b 100%)`

Ti koder fordelt på fem stemninger. I hver af dem fylder rød ét område, og sort holder resten. [Halloweengrafik](https://gradiently.design/da/guide/halloween-graphics) har flere sæsonidéer.

## Hvorfor røde og sorte gradienter får banding, og hvordan du undgår det

Mørke, glatte gradienter har meget få forskellige nuancer at arbejde med, så de brydes op i synlige trin, især når en app komprimerer dem igen. Mættet rød gør det værre i video, fordi de fleste videoformater gemmer farve i lavere opløsning end lysstyrke, og røde kanter smitter. [Gradient-banding](https://gradiently.design/da/guide/gradient-banding) forklarer mekanikken.

1. **Tilføj fint korn** Et let støjlag bryder trinene op. [Gradienter med korn](https://gradiently.design/da/guide/grainy-gradients) har en opskrift, der er klar til brug.
2. **Eksportér i fuld størrelse** Upload i platformens egen størrelse, som 1080×1350 til et Instagram-opslag, så billedet ikke skaleres og komprimeres to gange.
3. **Foretræk PNG til stillbilleder** PNG undgår de blokagtige artefakter, JPEG skaber i mørke, glatte områder.
4. **Bevar lidt tekstur i video** En helt glat rød overgang er det sværeste for en videoencoder. Lidt bevægelse eller korn overlever langt bedre.

## Hvor meget rød du skal bruge med sort

Rød bærer stærke associationer: fare, varme, lidenskab, hast og mange steder held og fest. Ved siden af sort bliver de betydninger højere, så proportionen afgør, om et design føles dramatisk eller alarmerende. [Rød farves betydning](https://gradiently.design/da/guide/red-color-meaning) går mere i dybden med associationerne.

### Alarmerende

- Rød fordelt jævnt over hele billedet
- Klar rød bag lille hvid tekst
- Rød, sort og en tredje højlydt farve
- Rød glød på hvert ord

### Dramatisk

- Sort fylder det meste af billedet, rød i ét område
- Dyb karmin bag teksten, klar rød holdt væk
- Rød, sort og en stille benhvid
- Enkel tekst, hvor lyset gør arbejdet

## Tekstfarver på rød og sort

I den sorte ende kan næsten alt lyst læses. I den røde ende afhænger det af, hvor dyb den røde er. Klar skarlagen er lysere, end folk tror, så hvid tekst dér skal være stor og fed. Forholdene bruger WCAG-formlen, hvor 4,5:1 er målet for lille tekst.

| Baggrund | Tekst | Kontrast | Vurdering |
| --- | --- | --- | --- |
| Sort `#0a0a0a` | Benhvid `#fef2f2` | 18,1:1 | Fremragende |
| Sort `#0a0a0a` | Skarlagen `#ef4444` | 5,3:1 | God til overskrifter i rød |
| Skarlagen `#ef4444` | Hvid | 3,8:1 | Kun stor, fed tekst |
| Rød `#dc2626` | Hvid | 4,8:1 | God |
| Karmin `#b91c1c` | Hvid | 6,5:1 | God |
| Oxid `#7f1d1d` | Hvid | 10,0:1 | Fremragende |

Rød tekst på sort er læselig, men gem den til overskrifter; lange afsnit i mættet rød er trættende at læse.

En stående plakat til en kampaften med hvide bogstaver over sort og rødt lys, der stiger op fra bunden af billedet

Et opslag fra en bokseklub med rød, der stiger op fra gulvet, og benhvid tekst ovenover.

En lodret biograf-Story med blege bogstaver på sort, oplyst fra den ene side af en dyb rød glød

En biograf-Story oplyst af ét rødt sidelys.

## CSS til rød og sort gradient

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

En mørk sektion oplyst med rød nedefra og en skarp diagonal deling. To stop på samme position giver en skarp kant.

For flere dybe røde toner, se [røde gradienter](https://gradiently.design/da/guide/red-gradient) og [bordeaux gradienter](https://gradiently.design/da/guide/maroon-gradient). Er rød og sort centralt for dit brand, så sikr dig en Mark i Gradiently, så ingen andre kan eksportere den. Den gengives i alle størrelser fra en Story til et streambanner og flytter automatisk sit roligste mørke område bag dine ord.

## FAQ

### Hvad er en god kode til en rød og sort gradient?

En fyldig en er `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`. Den går gennem karmin og blodrød i stedet for at blive brun.

### Hvorfor ser min gradient fra rød til sort brun ud?

En blanding med to stop fra ren rød til ren sort går gennem en grumset brunrød. Tilføj stop i karmin og blodrød, og brug en sort med et strejf af rødt.

### Hvilken tekstfarve passer på en rød og sort gradient?

Hvid eller en varm benhvid kan læses godt på sort og på dybe røde toner. På klar skarlagen skal du kun bruge hvid i stor, fed tekst.

### Hvordan laver jeg en skarpt delt rød og sort baggrund i CSS?

Sæt to stop på samme position: `linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%)` giver en skarp diagonal kant.

### Hvordan undgår jeg banding i en mørkerød gradient?

Tilføj fint korn, eksportér i platformens egen størrelse, og brug PNG til stillbilleder. Mørke, glatte røde overgange får mere banding end næsten nogen anden gradient.