Så påverkar färgval upplevelsen på din hemsida

Så påverkar färgval upplevelsen på din hemsida

Varför är meddelandet “Tack för din beställning” nästan alltid grön, och error-meddelandet “E-postadressen ej giltig” oftast röd? Det finns associationer mellan färger och deras användningsområden på webben, och överallt i världen också.

Färger är något som tolkas väldigt annorlunda beroende på personliga associationer och kulturella aspekter. Så en färg kan se väldigt annorlunda ut beroende på vem man frågar. Och ändå har många digitala tjänster och webbsidor som standard att visa grönt som “något bra”, och rött som “något farligt” som ger oss instinktiva “vibbar” av vilka känslor eller åtgärder vi behöver vidta.

Det här är inte ett inlägg där jag vill utse någon färg till “den bästa färgen” för ett ändamål, utan snarare ge en inblick i att förstå hur färgval påverkar digitala upplevelser, och varför vissa färger är satta för ett visst meddelande, eller i alla fall återkommer gång på gång oavsett bransch eller målgrupp.

För färger har undermedvetet en stor påverkan på vårt beteende, våra handlingar och våra känslor och sinnen.

Varma färger

Varma färger förknippas ofta med styrka, passion, kraft, och kärlek. Liksom eldar, solen, rosor och hjärtan. Dessa färger fångar vår uppmärksamhet, och är därför effektiva om man vill hänvisa en användare till att göra något.

Varma färger

Rött

En stark färg som snabbt fångar uppmärksamhet. En effektiv färg för att varna om något akut, att något är fel eller kräver åtgärd. För övrigt passar färgen också ofta bra för att symbolisera energi, kraft och passion.

Då röd har dessa egenskaper, och drar till sig blickfång naturligt, så används röd nästan alltid på det här viset i digitala medier världen över för att signalera “stopp” eller “varning”. Men den har även några fler associationer kopplade till sig beroende på vilken världskultur man frågar:

  • Europa: Kärlek, passion, fara, varningssignal, styrka
  • Asien: Lycka, fest, bröllop, renhet, framgång
  • Afrika: Livskraft, mod, blod, kamp
  • Sydamerika: Kärlek, värme, glöd, hetta, revolution, fest
  • Nordamerika: Kärlek, begär, fara, energi, varning, ilska

Gul

En optimistisk färg som ofta upplevs som energifylld. En effektiv färg för tillfällen när man vill skapa uppmärksamhet utan att vara för aggressiv. Associeras med glädje, lekfullhet och sommarkänslor, men kan samtidigt förmedla barnslighet, fara och varning.

  • Europa: Försiktighet, varning, glädje, optimism, feghet, avund
  • Asien: Kunglighet, rikedom, makt, renhet, sanning
  • Afrika: Sol, rikedom, visdom, ceremoniell klädsel, skörd
  • Sydamerika: Glädje, energi, fest, guld, livslust
  • Nordamerika: Lycka, vänskap, ungdom, varning

Orange

En exotisk färg som kan användas på många olika sätt, då den tar med sig egenskaper från både röd och gul. Associeras ofta med värme och lekfullhet, men drar samtidigt mycket uppmärksamhet och kan därför samtidigt användas för att förmedla varning eller CTA.

Globalt är orange en färg som används för att väcka uppmärksamhet, och används för ungdomlig, kreativ och informell design.

  • Europa: Energi, värme, kreativitet, individualism, humor
  • Asien: Helighet, andlighet, värme, upplysning, lycka
  • Afrika: Höst, transformation, sol, jord, gemenskap
  • Sydamerika: Passion, tropisk energi, glädje, fest
  • Nordamerika: Energi, entusiasm, ungdom, varning (trafikkon + skyltar)

Rosa

En glad färg som ofta för med sig passion och positivitet. Fungerar väldigt ofta effektivt i kombination med andra element som accentfärg i ljusare layouter. Historiskt förknippas rosa med femininitet och omtänksamhet, men kan också upplevas barnslig och impulsiv.

Rosa är i Europa, Amerika och Asien stereotypiskt förknippad med kvinnlighet, vilket präglat flera generationers färguppfattning (Barbie-effekten). Digitala medier använder ofta detta för att rikta produkter till just kvinnor, genom att sätta rosa som primär färg i skönhetsvarumärken, dejtingappar och bröllopssidor.

Färgen blir alltmer vanlig i andra sammanhang också i modern design, i form av en trend som bryter den uppfattade normen. Sammanfattningsvis används rosa för att signalera en mjuk, trygg ton i UI/UX.

  • Europa: Kärlek, feminism, ungdom, elegans, barnslighet
  • Asien: Körsbärsblom, övergång, skönhet, ungdom, lycka
  • Afrika: Kärlek mellan familjemedlemmar, mode, konst
  • Sydamerika: Kärlek, sensualitet, ungdomlighet
  • Nordamerika: Feminism, känslighet, romantik, skönhet

Kalla färger

Kalla färger förknippas ofta med lugn, trygghet, balans, intelligens och harmoni. De skapar oftast lugn i oss att se kalla ytor, och därför är dessa typer av färger passande om man vill att användaren ska stanna på en sida länge.

Kalla färger

Grönt

En naturlig färg som är behaglig för trötta ögon. En effektiv färg för att symbolisera positivitet, att något är korrekt eller godkänt.

Färgen har många definierade uppfattningar som många kulturer håller med om: den associeras oftast med natur, hälsa, balans, tillväxt och godkännande, men kan också associeras med illamående, avundsjuka och girighet. Nordamerika är dock ensamma med att ofta associera grönt med pengar.

Globalt används färgen i webbdesign för positiva notiser, bekräftelse och framgång i processer. I trafiken används grön för att kommunicera “gå”, och det är också globalt accepterat.

  • Europa: Positivitet, miljörörelse, hopp, hållbarhet
  • Asien: Natur, hälsa, tillväxt, livskraft, balans, jordbruk, trygghet, förnyelse
  • Afrika: Liv, natur, rikedom, hopp, framtid
  • Sydamerika: Livskraft, regnskog, växtlighet, natur, jord
  • Nordamerika: Ekologi, trygghet, pengar, tillväxt, avund

Blått

En lugn färg, som kan vara en av internets vanligaste färger. Liksom grön är även blå en behaglig färg för ögonen, och är därför en effektiv färg för ytor som behöver tid att upplevas.

Många kulturer är enade om att blått kan signalera trygghet, logik, teknik, pålitlighet, himmel, hav, kyla och lugn.

  • Europa: Lugn, pålitlighet, vatten, lojalitet, intelligens
  • Asien: Renhet, svalka, ärlighet, stabilitet, hantverk, sorg, fred
  • Afrika: Fred, stabilitet, vatten, andlighet, modern teknik
  • Sydamerika: Himmel, havet, frihet, andlighet, sport, turism
  • Nordamerika: Förtroende, säkerhet, kyla, professionalism

Lila

En färg med blandade egenskaper, då den tar med sig mycket från både blå och röd. Associeras generellt med kunskap, kreativitet, kunglighet, teknik, dramatik, lyx, mystik och andlighet men kan också förmedla sorg och ledsamhet.

I webbdesign används lila ofta för att sticka ut och skapa identitet bland vanligare kalla färger som blått och grönt, och oftast för att medla dess globalt associativa känsla för exklusivitet, lyx och mystik.

  • Europa: Kunskap, lyx, kreativitet, kunglighet, dramatik, pride
  • Asien: Mystik, adel, visdom, ädelhet, gemenskap, kreativitet
  • Afrika: Kunglighet, magi, visdom, lyx, status
  • Sydamerika: Spiritualitet, mystik, feminin, naturens kraft, sorg
  • Nordamerika: Kreativitet, individualism, pride, feminism (ibland), lyx

Neutrala färger

Brunt

En tung färg som har mycket gemensamt med grönt. Den är ett varmare alternativ till svart och grått, och fungerar effektivt för varumärken som vill associeras med natur, maskulinitet, värme och pålitlighet.

Brunt som alternativ till svart eller grått i webbdesign kan också ge en mer exklusiv, tidlös känsla till ett varumärke. Vanligt hos varumärken som erbjuder kaffe, läder och hantverk, men också populärt bland ekologiska, småskaliga varumärken.

I västvärlden kan brunt kopplas till “rustik”, “retro” eller “vintage”, inrednings-estetiker som betonar naturliga eller äldre material. Samtidigt, i Asien, har brunt även en stark koppling till “Wabi-sabi”, ett japanskt begrepp och estetik som handlar om att se skönhet i enkla och ofullkomliga saker.

  • Europa: Skog, jord, trä, konstnärlighet, värme, tristess
  • Asien: Välmående, stabilitet, realism, pålitlighet, natur, jord, enkelhet
  • Afrika: Jordbruk, liv, kultur, kropp, identitet
  • Sydamerika: Natur, trä, kakao, andlighet, kaffekultur
  • Nordamerika: Naturlighet, pålitlighet, rustik, värme

Svart

En färg som lätt får nya innebörder beroende på vilka färger den kombineras med. Går effektivt hand i hand med vitt för kontrastverkan, och är den vanligaste textfärgen. Svart kan också fylla en viktig roll som bakgrundsfärg för sociala medier eller webbsidor satt i “mörkt läge”.

Globala associationer innefattar ofta svart som tidlös, sofistikerad, minimalistisk och elegant, medan den också kan förknippas med mörker, allvar och sorg. Kulturellt har svart många likheter, och samtidigt många olikheter. I klassisk japansk balans spelar svart, vitt och trä in stort i olika konstformer, och i Kina representerar “Yin” det mörka, feminina och inåtvända.

Västvärlden använder svart väldigt ofta och vardagligt, vilket får färgen att nästan passa in i alla sammanhang. I vissa asiatiska kulturer, som i Indien och Kina, bör svart istället användas mer med eftertanke.

  • Europa: Sorg, fara, död, auktoritet, lyx, makt, ondska
  • Asien: Tomhet, skydd, neutral/kraftfull färg, inte nödvändigtvis fara, balans
  • Afrika: Mörker, självständighet, andlighet, livets ursprung
  • Sydamerika: Sorg, död, mystik, andlighet
  • Nordamerika: Sorg, professionalism, lyx, rebelliskhet

Vitt

En enkel, luftig och mjuk färg. Liksom svart så får den nya innebörder beroende hur den kombineras. Den är effektiv som bakgrundsfärg då de flesta andra färger är mer intensiva i jämförelse.

Associeras oftast med renhet, fred, klarhet, minimalism, tomhet och isolering i västvärlden. Globalt har vitt samma tekniska användningsområden, men i Asien är den kulturella betydelsen nästan motsatsen till väst. I begravningar bärs ibland svart, men vitt är ännu vanligare som sorgefärg i Kina.

  • Europa: Renhet, fred, oskuld, positivitet, öppenhet, lugn, framtid
  • Asien: Sorg, död, begravning, negativitet, tomhet, upplysning
  • Afrika: Andlighet, helighet, medicin, fred
  • Sydamerika: Oskuld, fred, spiritualitet, sjukvård, utbildning
  • Nordamerika: Renhet, professionalism, frihet, hälsa

Grått

En färg som har mycket gemensamt med vitt och svart, och allt däremellan. Den används effektivt som bakgrundsfärg, och många olika gråtoner erbjuder visuella skillnader istället för starka färger. Grått passar också in bra som bakgrundsfärg till sekundära texter, knappar eller formulär, och utgråade fält kan också kommunicera att det inte går att interagera förrän en annan åtgärd utförs på sidan först.

För övrigt upplevs den ofta som tråkig och opersonlig, men passar också bra till att symbolisera stabilitet, teknik, balans och minimalism.

  • Europa: Neutralitet, osäkerhet, seriositet, erfarenhet, tristess
  • Asien: Mognad, stillhet, visdom, balans, respekt, låg energi
  • Afrika: Metall, industri, väder, balans
  • Sydamerika: Anonymitet, städer, modernitet, industri, teknik
  • Nordamerika: Professionalism, teknik, balans, neutralitet

Personliga associationer

Sen spelar personliga associationer en stor roll för färgupplevelsen också. En röd kopp behöver inte associeras med en varningssignal, utan kan vara någons favoritfärg på kopp bara, och associerar med glädje för den personen helt enkelt.

Nu ger vi en liten ”sneakpeek” in i ett projekt som vi har utvecklat under flera år, men inte riktigt berättat om än. Digitalakademins grafiska profil använder ett flertal dova färger, som inspirerats från Hilma af Klints målningar. Här blir kulturell association på mindre skala en liten bonus – om man från trakterna av Dalarna känner igen de harmoniska känslorna som Hilma af Klints konstverk medför. Annars är färgernas associationer upp till betraktaren.

Digitalakademinens färger

Slutord

Väldens kulturer är enade om att färger kopplas till specifika känslor, och därför är grön och röd globalt accepterade som färger för “bra” och “dåligt”.

Med det sagt, så ska röd inte enbart användas för att skrämma upp användare, och grön alltid signalera ett godkännande. En nyans av gul kan medföra helt andra associationer eller känslor än en annan. Och en nyans av blå kan vara lika slagkraftig som en av de varmare färgerna.

Och sedan är det inte bara upp till färgen att bestämma känslan. Alla designens visuella element – färgen, typsnitten, bilderna etc. – är avgörande för hur besökaren uppfattar din webbsida och ditt varumärke.

Så det är bra att kunna tänka efter en extra gång på färgens associationer från olika delar av världen, innan den till exempel används till ett internationellt företags hemsida, logotyp eller grafiska profil.

En färg kan också bara … kännas härlig. Med eller helt utan motivation.

Hör gärna av dig till mig om vilka färger du gillar, och vad de väcker för känslor hos dig.

Vi hörs!