# Røde gradienter: energi uten alarm

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

Rødt fanger oppmerksomhet raskere enn noen annen farge, og det er nettopp derfor det går galt. Slik bygger du røde gradienter som føles levende, varme og selvsikre i stedet for høylytte.

## The short version

- En rød gradient er en overgang bygget rundt røde toner som karmosin, skarlagen, okseblod eller korall, brukt til design som trenger varme og tempo.
- Røde gradienter ser best ut når bare ett stopp er fullt mettet og de andre beveger seg mot dypere vinrødt eller varmere oransje og rosa.
- Ren #ff0000 med hvit tekst har et kontrastforhold på 4:1, som er under minimum på 4,5:1 for vanlig brødtekst.
- Å holde rødt ved siden av de varme naboene sine, i stedet for mettet blått, unngår flimringen og alarmen som får røde design til å føles harde.
- Dype rødtoner som okseblod og vinrød leses som eksklusive og rolige, mens klar skarlagen og korall leses som energiske og lekne.

En **rød gradient** er en overgang bygget rundt rødt, fra klar skarlagen og karmosin til dyp okseblod og myk korall, og det er den mest energiske gradienten du kan sette på en skjerm. Trikset for å bruke den godt er tilbakeholdenhet: la ett stopp bære full metning, flytt resten mot dypere vinrødt eller varmere oransje og rosa, og hold rødt unna stedene der folk venter seg advarsler. Gjort slik leses rødt som varme og appetitt, ikke som en feilmelding.

Under finner du tre røde paletter, ni røde gradientkoder du kan kopiere, kontrasttallene for tekst på rødt, og hvor rødt fungerer best. For hvordan farger bærer mening i utgangspunktet, se [fargepsykologi](https://gradiently.design/nb/guide/color-psychology).

## Hvorfor rødt er vanskeligere å designe med enn det ser ut

Rødt er høylytt av flere grunner på en gang. Skjermrødt når svært høy metning, så det dominerer alt ved siden av. Grensesnitt har lært folk å lese det som fare: feiltilstander, sletteknapper, lavt batteri og merker for ulest er nesten alltid røde. Og klar rød plassert rett ved siden av mettet blå kan se ut til å skimre eller ligge i en annen dybde, en effekt som kalles kromostereopsi, og som gjør tekst i den kombinasjonen slitsom å lese.

### Leses som alarm

- Flat `#ff0000` som fyller hele lerretet
- Rød tekst eller røde kanter på en hvit side uten noen annen varm farge
- Rødt plassert rett mot mettet blått
- Rødt brukt både til merkevaren og til feilmeldingene

### Leses som energi

- Ett klart rødt stopp som faller ned i dyp vinrød eller okseblod
- Rødt blandet med de varme naboene sine, oransje og rosa
- Rødt på en mørk, varm grunn med en myk offwhite til tekst
- En egen, tydelig annerledes farge forbeholdt feil

## Tre røde paletter: karmosin, okseblod og korall

De fleste vellykkede røde gradienter kommer fra én av tre familier. Karmosin heller litt mot blått og føles dristig og klassisk. Okseblod og vinrød er dype, mørke rødtoner som føles som lær, fløyel og rødvin. Korall er rødt løftet mot oransje og rosa, mykere og vennligere. Velg en familie før du velger en gradient, for å blande alle tre i én overgang ser som regel grumsete ut.

- Karmosin: #e11d48
- Dyp karmosin: #b91c1c
- Okseblod: #7f1d1d
- Vinrød: #4a0e0e
- Korall: #ff6f61
- Rødme: #fecaca

Karmosin øverst, okseblod og vinrød for dybde, korall og rødme for letthet. Hver familie bygger sin egen type rød gradient.

## Røde gradientkoder du kan kopiere

Alle disse gradientene har rødt som hovedtone, men de skiller seg i temperatur og dybde. De mørkere fungerer som hele bakgrunner, og de klarere passer bedre til knapper, merker, kort og korte glimt av oppmerksomhet.

- Karmosinild: `linear-gradient(135deg, #7f1d1d 0%, #dc2626 55%, #f97316 100%)`
- Okseblod: `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`
- Korall til karmosin: `linear-gradient(135deg, #ff6f61 0%, #e11d48 100%)`
- Kirsebærglød: `radial-gradient(80% 80% at 30% 20%, #ef4444 0%, #991b1b 55%, #3b0a0a 100%)`
- Rød til rosa: `linear-gradient(135deg, #dc2626 0%, #ec4899 100%)`
- Skarlagen til vinrød: `linear-gradient(90deg, #ff3b30 0%, #b91c1c 50%, #5b0f1f 100%)`
- Terrakotta: `linear-gradient(180deg, #c2410c 0%, #9a3412 50%, #6b1f0e 100%)`
- Myk rødme: `linear-gradient(135deg, #fee2e2 0%, #fca5a5 50%, #f87171 100%)`
- Rød til svart: `linear-gradient(180deg, #b91c1c 0%, #450a0a 70%, #120404 100%)`

Ni røde gradienter fra klar til dyp. Hver av dem blander bare gjennom varme naboer eller dypere rødtoner, aldri gjennom grått.

Legg merke til hva kodene har til felles. Det klare stoppet ligger i den ene enden eller i ett punkt, aldri over hele feltet. De mørke stoppene er mørke *rødtoner*, ikke svart eller grått, så overgangen beholder fargen mens den faller. Hvis en rød gradient blir brun i midten, har du sannsynligvis blandet den mot grønt eller grått. Guiden vår om [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) forklarer hvorfor.

## Slik styrer du intensiteten i rødt

1. **Velg ett klart stopp** Bestem hvor den mest mettede røde skal bo, som regel nær en overskrift eller blikkfanget. Alt annet trapper ned fra den i lyshet eller metning.
2. **Gi det mørke naboer** Dype rødtoner som `#7f1d1d` og `#4a0e0e` får det klare stoppet til å gløde gjennom kontrast, slik en enkelt glo lyser i et mørkt bål.
3. **Bland mot varme farger** Oransje, korall og rosa ligger ved siden av rødt på fargehjulet, så de blander seg rent. Se [analoge farger](https://gradiently.design/nb/guide/analogous-colors) for hvorfor naboer alltid oppfører seg pent.
4. **Hold rødt til en andel av designet** Rødt er en aksentfarge av natur. Selv i et design ledet av rødt hjelper et stort rolig område, og [60-30-10-regelen](https://gradiently.design/nb/guide/60-30-10-rule) er et godt utgangspunkt for forholdet.
5. **La feil ha en annen farge** Hvis merkevaren din er rød, gir du feilmeldinger en tydelig annerledes behandling, for eksempel et ikon pluss en mørkere eller mer oransje rød, så en advarsel aldri ser ut som markedsføring.

## Tekst på en rød gradient

Rødt ligger i en vanskelig mellomposisjon for tekst. Ren skjermrød er for mørk til at svart tekst er behagelig, og for lys til at hvit tekst når minimum for brødtekst. Løsningen er å gjøre bakgrunnen mørkere når du vil ha hvit skrift, eller lysere når du vil ha mørk skrift, og å sjekke det lyseste punktet i gradienten som ligger bak ordene dine.

| Bakgrunn | Tekst | Kontrast | Dom |
| --- | --- | --- | --- |
| `#ff0000` ren rød | Hvit | 4.0:1 | Bare stor tekst |
| `#dc2626` rød | Hvit | 4.8:1 | Godkjent for brødtekst |
| `#b91c1c` dyp karmosin | Hvit | 6.5:1 | Behagelig |
| `#7f1d1d` okseblod | `#fff1f0` offwhite | 9.1:1 | Utmerket |
| `#ff6f61` korall | Hvit | 2.7:1 | Stryker |
| `#ff6f61` korall | `#1a0505` nesten svart | 7.2:1 | Utmerket |

Forholdstall beregnet med WCAG-formelen. 4,5:1 er minimum for vanlig tekst og 3:1 for stor tekst. Detaljer i [fargekontrast](https://gradiently.design/nb/guide/color-contrast-accessibility).

Et stående salgsinnlegg med ordet Vintersalg i hvitt over en dyp karmosinrød gradient

Overskriften satt over den dypeste delen av det røde, der hvit skrift er behagelig.

En stående story som kunngjør sene åpningstider på en varm rød gradient med en klar glød nær toppen

Den samme røde på en story, med det klare stoppet holdt unna ordene.

## Hvor røde gradienter fungerer best

Rødt hører hjemme der energi og appetitt er poenget. Det er vanlig i mat og drikke, sport, underholdning og salg, og i festdesign. I kinesisk tradisjon er rødt sterkt forbundet med lykke og feiring, og derfor leder det an i design til kinesisk nyttår. Betydninger varierer mellom kulturer, så sjekk din i [fargers betydning rundt om i verden](https://gradiently.design/nb/guide/color-meanings-around-the-world).

- **Mat, kafeer og restauranter:** gradienter i korall og terrakotta føles varme og appetittvekkende
- **Sport og trening:** karmosinild og skarlagen til vinrød bærer fart og innsats
- **Mote og skjønnhet:** okseblod, vinrød og rødme føles gjennomtenkt og eksklusivt
- **Salg og lanseringer:** ett klart stopp på et dypt rødt felt trekker blikket uten å rope
- **Musikk og uteliv:** rød til svart og kirsebærglød passer til mørke, opplyste rom

Hvis du vil ha rødt uten å bygge det på nytt for hvert format, lar Markedet i Gradiently deg søke etter Marks med ord som «deep red» eller «coral». Hver Mark flytter sitt roligste område bak ordene dine, noe som løser problemet med tekst på rødt for deg.

## FAQ

### Hvilke farger passer til rødt i en gradient?

De varme naboene blander seg renest: oransje, korall, rosa og dyp vinrød. Å blande rødt mot grønt eller grått gjør gjerne midten brun.

### Kan man sette hvit tekst på en rød bakgrunn?

Ja, hvis det røde er dypt nok. Hvit på `#dc2626` gir 4,8:1 og er godkjent for brødtekst, men hvit på ren `#ff0000` gir bare 4:1, så bruk det kun til stor tekst.

### Hva er hex-koden for en mørk rød gradient?

Prøv `linear-gradient(160deg, #2a0708 0%, #4a0e0e 50%, #7f1d1d 100%)`, en overgang i okseblod som forblir rød fra ende til ende.

### Hvorfor ser den røde gradienten min aggressiv ut?

Som regel fordi hele feltet er fullt mettet rødt. Behold ett klart stopp, la resten falle ned i dypere rødtoner, og unngå å plassere rødt rett mot mettet blått.