# Röd och svart gradient: dramatiska koder utan banding

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

Rött mot svart är det mest dramatiska färgparet som finns. Det kan kännas som en biofoajé, en titelmatch eller en skräckaffisch. De här koderna ger dig dramatiken och låter dig behålla kontrollen.

## The short version

- En röd och svart gradient tonar en röd som #dc2626 eller #b91c1c ner i nästan svart, vanligen via en djup blodröd som #450a0a.
- Att tona rött genom mörk karmosin i stället för rakt till svart håller övergången rik och undviker ett brunt eller grått band.
- Röd och svart gradient får kraftig banding i komprimerade bilder och video, så lägg till korn och undvik stora, släta ytor med låg kontrast.
- Vit text läser bra på djupt rött och svart, medan mättade mellanröda toner kräver stor, fet text för att vitt ska fungera.
- Paret passar film, sport, spel, mode, nattliv och Halloween, och fungerar bäst med en enda stark ljuskälla i stället för rött jämnt utspritt.

En **röd och svart gradient** tonar ett klart rött som `#dc2626` eller en djupare karmosin som `#b91c1c` ner i nästan svart, helst via en blodröd som `#450a0a` så att övergången förblir rik. Få par är så dramatiska: rött tar uppmärksamheten och svart ger den ingenting att konkurrera med. Här är koder för röd och svart för fem sorters dramatik, hur du hindrar dem från att få banding och vilka textfärger som fungerar.

## Så tonar du rött till svart utan att det blir brunt

Det vanliga misstaget är att blanda rent rött rakt in i rent svart i två steg. Mitten av den blandningen är ett grumligt brunrött som ser smutsigt ut snarare än mörkt. Stega i stället genom mörkare röda toner och använd ett svart med ett spår av rött i, så att skuggan hör till samma familj som ljuset.

- Benvit: #fef2f2
- Ljus signalröd: #f87171
- Scharlakansrött: #ef4444
- Rött: #dc2626
- Karmosin: #b91c1c
- Oxid: #7f1d1d
- Blod: #450a0a
- Svart: #0a0a0a

En ramp från rött till svart, med ett benvitt för text. Använd tre eller fyra intilliggande nyanser i en och samma gradient.

- Två steg: grumlig mitt: `linear-gradient(180deg, #dc2626 0%, #000000 100%)`
- Stegad: rik hela vägen: `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`

Samma röda och samma mörker. Den stegade versionen går genom karmosin och blodrött i stället för brunt.

## Koder för röd och svart gradient för fem sorters dramatik

### Film och thriller

Mest svart, med rött som kommer som ett enda ljus från sidan, som en utgångsskylt i ett mörkt rum. Stilla och spänt.

- Sidoljus: `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 och matchkväll

Hett rött som stiger underifrån, som om arenans golv vore upplyst. Högljutt, fysiskt och brådskande.

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

### Spel

Skarpa diagonaler och hårda steg, närmare en grafik än ett sken. De läses som snabba och aggressiva.

- Hård delning: `linear-gradient(120deg, #0a0a0a 0%, #0a0a0a 55%, #dc2626 55%, #7f1d1d 100%)`
- Skanlinjemönster: `repeating-linear-gradient(180deg, #0a0a0a 0px, #0a0a0a 14px, #450a0a 14px, #450a0a 16px)`

### Mode och lyx

Djup karmosin och lacksvart, med nästan inget klart rött. Tänk på en lackad ask eller ett rött sidenfoder: polerat, dyrt och kontrollerat.

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

### Halloween och skräck

Rött som samlas längst ned i bilden eller sipprar in från hörnen. Använd sparsamt så är det genuint obehagligt; överdriv och det ser ut som en maskeradaffär.

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

Tio koder över fem stämningar. I varje tar rött en region och svart håller resten. [Halloweengrafik](https://gradiently.design/sv/guide/halloween-graphics) har fler säsongsidéer.

## Varför röd och svart gradient får banding, och hur du stoppar det

Mörka, släta gradienter har mycket få olika nyanser att arbeta med, så de bryts upp i synliga steg, särskilt när en app komprimerar dem på nytt. Mättat rött gör det värre i video, eftersom de flesta videoformat lagrar färg i lägre upplösning än ljushet, och röda kanter smetas ut. [Banding i gradienter](https://gradiently.design/sv/guide/gradient-banding) förklarar mekaniken.

1. **Lägg till fint korn** Ett lätt brusskikt bryter upp stegen. [Korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) har ett färdigt recept.
2. **Exportera i full storlek** Ladda upp i plattformens egen storlek, som 1080×1350 för ett Instagram-inlägg, så att det inte skalas och komprimeras två gånger.
3. **Föredra PNG för stillbilder** PNG undviker de blockiga artefakter JPEG skapar i mörka, släta ytor.
4. **Behåll lite textur i video** En helt slät röd gradient är det svåraste en videoenkodare kan få. Lite rörelse eller korn överlever mycket bättre.

## Hur mycket rött du ska använda med svart

Rött bär starka associationer: fara, hetta, passion, brådska, och på många håll lycka och firande. Bredvid svart blir de betydelserna högre, så proportionerna avgör om en design känns dramatisk eller alarmerande. [Röd färgs betydelse](https://gradiently.design/sv/guide/red-color-meaning) tar upp associationerna djupare.

### Alarmerande

- Rött jämnt utspritt över hela ytan
- Klarrött bakom liten vit text
- Rött, svart och en tredje högljudd färg
- Rött sken kring varje ord

### Dramatiskt

- Svart håller det mesta av ytan, rött i en region
- Djup karmosin bakom text, klarrött hålls borta
- Rött, svart och ett stilla benvitt
- Enkel text, där ljuset gör jobbet

## Textfärger på rött och svart

I den svarta änden läses nästan allt ljust. I den röda änden beror det på hur djupt rött det är. Klart scharlakansrött är ljusare än folk tror, så vit text där bör vara stor och fet. Kvoterna följer WCAG-formeln, där 4,5:1 är målet för liten text.

| Bakgrund | Text | Kontrast | Omdöme |
| --- | --- | --- | --- |
| Svart `#0a0a0a` | Benvit `#fef2f2` | 18,1:1 | Utmärkt |
| Svart `#0a0a0a` | Scharlakansrött `#ef4444` | 5,3:1 | Bra för rubriker i rött |
| Scharlakansrött `#ef4444` | Vitt | 3,8:1 | Bara stor, fet text |
| Rött `#dc2626` | Vitt | 4,8:1 | Bra |
| Karmosin `#b91c1c` | Vitt | 6,5:1 | Bra |
| Oxid `#7f1d1d` | Vitt | 10,0:1 | Utmärkt |

Röd text på svart går att läsa, men spara den till rubriker; långa stycken i mättat rött är tröttsamma att läsa.

En stående affisch för matchkväll med vita bokstäver över svart, med rött ljus som stiger från nederkanten

Ett inlägg för ett boxningsgym med rött som stiger från golvet och benvit text ovanför.

En stående biostory med blek text på svart, upplyst från ena sidan av ett djupt rött sken

En biostory upplyst av ett enda rött sidoljus.

## CSS för röd och 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 sektion upplyst med rött underifrån, och en hård diagonal delning. Två steg på samma position ger en skarp kant.

För fler djupa röda toner, se [röda gradienter](https://gradiently.design/sv/guide/red-gradient) och [bordeauxgradienter](https://gradiently.design/sv/guide/maroon-gradient). Om rött och svart är centralt för ditt varumärke, säkra ett Gradiently-Mark så kan ingen annan exportera det. Det renderas i varje storlek från en story till en strömbanner och flyttar automatiskt sin lugnaste mörka region bakom dina ord.

## FAQ

### Vilken är en bra kod för röd och svart gradient?

En rik är `linear-gradient(180deg, #dc2626 0%, #7f1d1d 35%, #450a0a 65%, #0a0505 100%)`. Den stegar genom karmosin och blodrött i stället för att bli brun.

### Varför ser min gradient från rött till svart brun ut?

En blandning i två steg från rent rött till rent svart går genom ett grumligt brunrött. Lägg till steg i karmosin och blodrött, och använd ett svart med ett spår av rött.

### Vilken textfärg passar på en röd och svart gradient?

Vitt eller ett varmt benvitt läses bra på svart och på djupa röda toner. På klart scharlakansrött, använd vitt bara i stor, fet text.

### Hur gör jag en röd och svart bakgrund med hård delning i CSS?

Sätt två steg på samma position: `linear-gradient(120deg, #0a0a0a 55%, #b91c1c 55%)` ger en skarp diagonal kant.

### Hur stoppar jag banding i en mörkröd gradient?

Lägg till fint korn, exportera i plattformens egen storlek och använd PNG för stillbilder. Mörka, släta röda gradienter får banding mer än nästan alla andra.