# Rød og svart gradient: dramatiske koder uten striper

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

Rødt mot svart er fargenes mest dramatiske par. Det kan føles som kinofoajé, tittelkamp eller skrekkplakat. Disse kodene gir drama med kontroll.

## The short version

- En rød og svart gradient toner rødt som #dc2626 eller #b91c1c inn i nesten svart, vanligvis via dyp blodrød som #450a0a.
- Rødt som går via mørk karmosin fremfor direkte til svart beholder en fyldig overgang og unngår et brunt eller grått bånd.
- Røde og svarte gradienter får lett striper i komprimerte bilder og video. Legg til korn og unngå store, glatte områder med lav kontrast.
- Hvit tekst er lesbar på dyp rødt og svart, mens mettede mellomrøde toner trenger stor, fet skrift for at hvitt skal fungere.
- Paret passer film, sport, spill, mote, uteliv og Halloween og fungerer best med én sterk lyskilde fremfor jevnt fordelt rødt.

En **rød og svart gradient** toner sterk rødt som `#dc2626` eller dypere karmosin som `#b91c1c` inn i nesten svart, helst via blodrødt som `#450a0a` så overgangen forblir fyldig. Få par er like dramatiske: rødt griper oppmerksomheten, og svart lar det stå alene. Her er koder til fem typer drama, løsninger på striper og tekstfarger som fungerer.

## Tone rødt til svart uten brunt

Den vanlige feilen er å blande rent rødt rett til rent svart med to stopp. Midten blir en grumsete brunrød som ser skitten ut fremfor mørk. Gå via mørkere rødfarger og bruk svart med litt rødt, så skyggen tilhører samme familie som lyset.

- Benhvit: #fef2f2
- Lys signalrød: #f87171
- Skarlagen: #ef4444
- Rød: #dc2626
- Karmosin: #b91c1c
- Oksid: #7f1d1d
- Blod: #450a0a
- Svart: #0a0a0a

En rød-svart skala med benhvit til tekst. Bruk tre eller fire naboprøver i én gradient.

- To stopp: grumsete midtparti: `linear-gradient(180deg, #dc2626 0%, #000000 100%)`
- Trinnvis: fyldig hele veien: `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`

Samme rødt og samme mørke. Den trinnvise går via karmosin og blodrødt fremfor brunt.

## Røde og svarte gradientkoder for fem typer drama

### Kino og thriller

Mest svart, med rødt som ett sidelys, som et utgangsskilt i et mørkt rom. Rolig og spent.

- 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 kampkveld

Hett rødt som stiger nedenfra, som en opplyst arenabunn. Høylytt, 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%)`

### Spill

Skarpe diagonaler og harde stopp, nærmere grafikk enn glød. De virker raske og aggressive.

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

### Mote og luksus

Dyp karmosin og lakksvart, med nesten ingen sterk rødt. Tenk en lakkert boks eller rødt silkefôr: polert, dyrt og kontrollert.

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

### Halloween og skrekk

Rødt som samler seg nederst i rammen eller siver inn fra hjørnene. Sparsomt brukt virker det urovekkende. For mye ligner en kostymebutikk.

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

Ti koder i fem stemninger. Rødt har ett område og svart holder resten. [Halloween-grafikk](https://gradiently.design/nb/guide/halloween-graphics) har flere sesongideer.

## Hvorfor røde og svarte gradienter får striper

Mørke, glatte gradienter har få ulike nyanser å bruke og deles derfor i synlige trinn, særlig etter ny komprimering i en app. Mettet rødt gjør video verre, fordi de fleste videoformater lagrer farge i lavere oppløsning enn lysstyrke og røde kanter flyter ut. [Striper i gradienter](https://gradiently.design/nb/guide/gradient-banding) forklarer mekanikken.

1. **Legg til fint korn** Et lett støylag bryter opp trinnene. [Kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) har en ferdig oppskrift.
2. **Eksporter i full størrelse** Last opp i plattformens størrelse, som 1080×1350 til Instagram, så bildet ikke skaleres og komprimeres to ganger.
3. **Velg PNG til stillbilder** PNG unngår de firkantede feilene JPEG lager i mørke, glatte områder.
4. **Behold litt tekstur i video** En helt glatt rød overgang er vanskeligst for videokoding. Litt bevegelse eller korn holder langt bedre.

## Hvor mye rødt bør brukes med svart?

Rødt har sterke forbindelser: fare, varme, lidenskap, hastverk og mange steder hell og feiring. Ved svart blir betydningene sterkere, så mengdeforholdet avgjør om designet virker dramatisk eller alarmerende. [Rødfargens betydning](https://gradiently.design/nb/guide/red-color-meaning) går dypere.

### Alarmerende

- Rødt jevnt over hele rammen
- Sterk rødt bak liten hvit tekst
- Rødt, svart og en tredje sterk farge
- Rød glød på hvert ord

### Dramatisk

- Svart i det meste av rammen, rødt i ett område
- Dyp karmosin bak tekst, sterk rødt holdt unna
- Rødt, svart og rolig benhvit
- Enkel skrift med lyset som virkemiddel

## Tekstfarger på rødt og svart

På den svarte enden kan nesten alt lyst leses. På den røde avhenger det av dybden. Klar skarlagen er lysere enn mange tror, så hvit tekst der bør være stor og fet. Forholdene følger WCAG-formelen med 4,5:1 som mål for liten tekst.

| Bakgrunn | Tekst | Kontrast | Vurdering |
| --- | --- | --- | --- |
| Svart `#0a0a0a` | Benhvit `#fef2f2` | 18,1:1 | Svært god |
| Svart `#0a0a0a` | Skarlagen `#ef4444` | 5,3:1 | Bra til røde overskrifter |
| Skarlagen `#ef4444` | Hvit | 3,8:1 | Bare stor, fet skrift |
| Rød `#dc2626` | Hvit | 4,8:1 | God |
| Karmosin `#b91c1c` | Hvit | 6,5:1 | God |
| Oksid `#7f1d1d` | Hvit | 10,0:1 | Svært god |

Rød tekst på svart er lesbar, men spar den til overskrifter. Lange avsnitt i mettet rødt er slitsomme.

En stående kampplakat med hvit skrift på svart og rødt lys stigende fra underkanten

Et bokseklubbinnlegg med rødt stigende fra gulvet og benhvit tekst over.

En vertikal kinostory med lys skrift på svart og dyp rød glød fra én side

En kinostory opplyst av ett rødt sidelys.

## CSS til rød og svart 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 seksjon opplyst nedenfra med rødt og et skarpt diagonalt skille. To stopp på samme posisjon gir en skarp kant.

For flere dype rødfarger, se [røde gradienter](https://gradiently.design/nb/guide/red-gradient) og [burgundergradienter](https://gradiently.design/nb/guide/maroon-gradient). Er rødt og svart sentralt i merkevaren, sikre deg en Mark fra Gradiently, så ingen andre kan eksportere med den. Den gjengis i alle størrelser fra story til strømmebanner og flytter automatisk sitt roligste mørke område bak ordene.

## FAQ

### Hva er en god kode til rød og svart gradient?

En fyldig variant er `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`. Den går via karmosin og blodrødt fremfor brunt.

### Hvorfor ser gradienten min fra rødt til svart brun ut?

En blanding med to stopp fra rent rødt til rent svart går via grumsete brunrødt. Legg til karmosin- og blodrøde stopp og bruk svart med litt rødt.

### Hvilken tekstfarge passer på rød og svart gradient?

Hvitt eller varm benhvit er lesbart på svart og dyp rødt. På klar skarlagen brukes hvitt bare i stor, fet skrift.

### Hvordan lager jeg en rød og svart bakgrunn med skarpt skille i CSS?

Sett to stopp på samme posisjon: `linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%)` gir en skarp diagonal kant.

### Hvordan unngår jeg striper i en mørk rød gradient?

Legg til fint korn, eksporter i plattformens egen størrelse og bruk PNG til stillbilder. Mørke, glatte røde overganger får mer striper enn nesten alle andre gradienter.