# Röd gradient: energi utan larmkänsla

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

Rött får uppmärksamhet snabbare än någon annan färg, och det är just därför det går fel. Så bygger du röda gradienter som känns levande, varma och trygga i stället för högljudda.

## The short version

- En röd gradient är en blandning byggd kring röda toner som karmosin, scharlakan, oxblod eller korall, för design som behöver värme och brådska.
- Röda gradienter ser bäst ut när bara ett stopp är fullt mättat och de andra rör sig mot djupare vinrött eller varmare orange och rosa.
- Rent #ff0000 med vit text har kontrastförhållandet 4:1, vilket ligger under miniminivån 4,5:1 för vanlig brödtext.
- Håller du rött nära sina varma grannar, i stället för mättat blått, undviker du det flimmer och den larmkänsla som gör röd design hård.
- Djupa röda toner som oxblod och vinrött läses som exklusiva och lugna, medan klar scharlakan och korall läses som energiska och lekfulla.

En **röd gradient** är en blandning byggd kring rött, från klar scharlakan och karmosin till djupt oxblod och mjuk korall, och den är den mest energiska gradient du kan lägga på en skärm. Konsten att använda en väl är återhållsamhet: låt ett stopp bära full mättnad, för resten mot djupare vinrött eller varmare orange och rosa, och håll rött borta från de platser där folk väntar sig varningar. Då läses rött som värme och aptit i stället för ett felmeddelande.

Nedan hittar du tre röda paletter, nio röda gradientkoder att kopiera, kontrasttalen för text på rött och var rött fungerar bäst. För hur färger bär mening överhuvudtaget, se [färgpsykologi](https://gradiently.design/sv/guide/color-psychology).

## Därför är rött svårare att designa med än det ser ut

Rött låter högt av flera skäl på en gång. Skärmrött når mycket hög mättnad, så det dominerar allt bredvid. Gränssnitt har lärt folk att läsa det som fara: felmeddelanden, raderaknappar, låg batterinivå och olästa märken är nästan alltid röda. Och klart rött precis intill mättat blått kan verka skimra eller ligga på ett annat djup, en effekt som kallas kromastereopsi och som gör text i den kombinationen tröttsam att läsa.

### Läses som larm

- Platt `#ff0000` som fyller hela ytan
- Röd text eller ram på en vit sida utan någon annan varm färg
- Rött placerat rakt mot mättat blått
- Rött som används både för varumärket och för felmeddelandena

### Läses som energi

- Ett klarrött stopp som faller mot djupt vinrött eller oxblod
- Rött blandat med sina varma grannar, orange och rosa
- Rött på en mörk, varm botten med en mjuk off-white för texten
- En egen, tydligt annorlunda färg för fel

## Tre röda paletter: karmosin, oxblod och korall

De flesta lyckade röda gradienter kommer från en av tre familjer. Karmosin lutar lite åt blått och känns djärvt och klassiskt. Oxblod och vinrött är djupa, mörka röda toner som känns som läder, sammet och rödvin. Korall är rött lyft mot orange och rosa, mjukare och vänligare. Välj familj innan du väljer gradient, eftersom en blandning av alla tre i samma övergång oftast blir smutsig.

- Karmosin: #e11d48
- Djup karmosin: #b91c1c
- Oxblod: #7f1d1d
- Vinrött: #4a0e0e
- Korall: #ff6f61
- Blekrosa: #fecaca

Karmosin överst, oxblod och vinrött för djup, korall och blekrosa för lätthet. Varje familj bygger sin egen sorts röda gradient.

## Röda gradientkoder att kopiera

Alla de här gradienterna behåller rött som huvudton men skiljer sig i temperatur och djup. De mörkare fungerar som hela bakgrunder, de klarare passar bättre för knappar, märken, kort och korta skott av uppmärksamhet.

- Karmosineld: `linear-gradient(135deg, #7f1d1d 0%, #dc2626 55%, #f97316 100%)`
- Oxblod: `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`
- Korall till karmosin: `linear-gradient(135deg, #ff6f61 0%, #e11d48 100%)`
- Körsbärsglöd: `radial-gradient(80% 80% at 30% 20%, #ef4444 0%, #991b1b 55%, #3b0a0a 100%)`
- Rött till rosa: `linear-gradient(135deg, #dc2626 0%, #ec4899 100%)`
- Scharlakan till vinrött: `linear-gradient(90deg, #ff3b30 0%, #b91c1c 50%, #5b0f1f 100%)`
- Terrakotta: `linear-gradient(180deg, #c2410c 0%, #9a3412 50%, #6b1f0e 100%)`
- Mjuk blekrosa: `linear-gradient(135deg, #fee2e2 0%, #fca5a5 50%, #f87171 100%)`
- Rött till svart: `linear-gradient(180deg, #b91c1c 0%, #450a0a 70%, #120404 100%)`

Nio röda gradienter från klara till djupa. Var och en blandar bara genom varma grannar eller djupare röda toner, aldrig genom grått.

Lägg märke till vad koderna har gemensamt. Det klara stoppet sitter i ena änden eller i en punkt, aldrig över hela ytan. De mörka stoppen är mörkröda *toner*, inte svart eller grått, så övergången behåller sin färg när den faller. Blir en röd gradient brun i mitten har du troligen blandat den mot grönt eller grått. Vår guide om [smutsiga gradienter](https://gradiently.design/sv/guide/muddy-gradients) förklarar varför.

## Så hanterar du rödens intensitet

1. **Välj ett klart stopp** Bestäm var det mest mättade röda ska bo, oftast nära en rubrik eller blickfånget. Allt annat trappas ner från det i ljushet eller mättnad.
2. **Ge det mörka grannar** Djupa röda toner som `#7f1d1d` och `#4a0e0e` får det klara stoppet att glöda genom kontrast, som ett enda glödande kol i en mörk eld.
3. **Blanda mot varma färger** Orange, korall och rosa ligger intill rött på färgcirkeln, så de blandas rent. Se [analoga färger](https://gradiently.design/sv/guide/analogous-colors) för varför grannar alltid beter sig.
4. **Låt rött vara en del av designen** Rött är till sin natur en accentfärg. Även i en rödledd design hjälper en stor lugn yta. [60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule) är ett bra förhållande att börja med.
5. **Ha en annan färg för fel** Är ditt varumärke rött, ge felmeddelanden en tydligt annan behandling, som en ikon plus ett mörkare eller orangetonat rött, så att en varning aldrig ser ut som marknadsföring.

## Text på en röd gradient

Rött hamnar i en besvärlig mitt för text. Rent skärmrött är för mörkt för att svart text ska kännas bekväm och för ljust för att vit text ska klara minimikravet för brödtext. Lösningen är att göra bakgrunden mörkare när du vill ha vit text, eller ljusare när du vill ha mörk text, och att kontrollera den ljusaste punkten i gradienten bakom orden.

| Bakgrund | Text | Kontrast | Bedömning |
| --- | --- | --- | --- |
| `#ff0000` rent rött | Vit | 4,0:1 | Bara stor text |
| `#dc2626` rött | Vit | 4,8:1 | Godkänt för brödtext |
| `#b91c1c` djup karmosin | Vit | 6,5:1 | Bekvämt |
| `#7f1d1d` oxblod | `#fff1f0` off-white | 9,1:1 | Utmärkt |
| `#ff6f61` korall | Vit | 2,7:1 | Underkänt |
| `#ff6f61` korall | `#1a0505` nästan svart | 7,2:1 | Utmärkt |

Förhållandena är beräknade med WCAG-formeln. 4,5:1 är miniminivån för vanlig text och 3:1 för stor text. Mer i [färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility).

Ett stående reainlägg med orden Vinterrea i vitt över en djup karmosinröd gradient

Rubriken ligger över det djupaste röda, där vit text är bekväm.

En stående story som tillkännager sena öppettider på en varm röd gradient med en klar glöd högst upp

Samma röda på en story, med det klara stoppet på avstånd från orden.

## Där röda gradienter fungerar bäst

Rött hör hemma där energi och aptit är poängen. Det är vanligt inom mat och dryck, sport, underhållning och försäljning samt i festlig design. I kinesisk tradition förknippas rött starkt med lycka och firande, vilket är därför det leder designen kring kinesiska nyår. Betydelser skiljer sig mellan kulturer, så kontrollera din egen i [färgers betydelse i världen](https://gradiently.design/sv/guide/color-meanings-around-the-world).

- **Mat, caféer och restauranger:** korall och terrakotta ger en varm och aptitlig känsla
- **Sport och träning:** karmosineld och scharlakan till vinrött bär fart och ansträngning
- **Mode och skönhet:** oxblod, vinrött och blekrosa känns genomtänkta och exklusiva
- **Rea och lanseringar:** ett klart stopp på en djupröd yta drar blicken utan att skrika
- **Musik och nattliv:** rött till svart och körsbärsglöd passar mörka, upplysta rum

Vill du ha rött utan att bygga om det för varje format kan du i Marknaden i Gradiently söka bland Marks med ord som ”djupröd” eller ”korall”. Varje Mark flyttar sin lugnaste yta bakom dina ord, vilket löser problemet med text på rött åt dig.

## FAQ

### Vilka färger passar ihop med rött i en gradient?

Rödens varma grannar blandas renast: orange, korall, rosa och djupt vinrött. Blandar du rött mot grönt eller grått blir mitten oftast brun.

### Kan man ha vit text på röd bakgrund?

Ja, om det röda är tillräckligt djupt. Vitt på `#dc2626` ger 4,8:1 och klarar brödtext, men vitt på rent `#ff0000` ger bara 4:1, så använd det bara för stor text.

### Vilken kod har en mörkröd gradient?

Prova `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`, en oxblodsblandning som förblir röd från ände till ände.

### Varför ser min röda gradient aggressiv ut?

Oftast för att hela ytan är fullt mättat rött. Behåll ett klart stopp, låt resten falla mot djupare röda toner och undvik att placera rött rakt mot mättat blått.