Farger

Røde gradienter: energi uten alarm

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.

GradientlyVerifisert Gradiently-konto··6 min lesetid
Omslag: Sleeping Reef · GR·B86W·WH

Kortversjonen

  • 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.
På denne siden

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.

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 ø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.

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 forklarer hvorfor.

Slik styrer du intensiteten i rødt

  1. 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. 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. 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 for hvorfor naboer alltid oppfører seg pent.

  4. 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 er et godt utgangspunkt for forholdet.

  5. 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.

BakgrunnTekstKontrastDom
#ff0000 ren rødHvit4.0:1Bare stor tekst
#dc2626 rødHvit4.8:1Godkjent for brødtekst
#b91c1c dyp karmosinHvit6.5:1Behagelig
#7f1d1d okseblod#fff1f0 offwhite9.1:1Utmerket
#ff6f61 korallHvit2.7:1Stryker
#ff6f61 korall#1a0505 nesten svart7.2:1Utmerket
Forholdstall beregnet med WCAG-formelen. 4,5:1 er minimum for vanlig tekst og 3:1 for stor tekst. Detaljer i fargekontrast.

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

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.

  • 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.

Spørsmål folk stiller

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.

Del denne guiden

Skrevet av GradientlyVerifisert Gradiently-konto

Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.

Se profilen vår