Välj rätt färger till hemsidan
– Den ultimata guiden om färgval på nätet
Att välja färger till designen på din hemsida kan låta som en ganska enkel process som inte spelar så stor roll i grund och botten. Det är väl bara att gå på känsla och vad man själv tycker är snyggt? Nja, riktigt så enkelt är det faktiskt inte. Dina färger behöver nämligen förmedla rätt känslor för dina besökare och potentiella kunder så att de arbetar till din fördel och inte tvärtom. Det finns en hel vetenskap kring hur detta fungerar, och i denna guide ska vi försöka bena ut det hela. Guiden innehåller följande delar:
- Vikten av att välja rätt färger
- Färgcirkeln
- Varma färger
- Kalla färger
- Gråtoner
- Nyanser
- Opacitet
- Exempel på bra färgval
- Välj rätt färg till hemsidan – 8 tips
Vikten av att välja rätt färger
Olika färger förmedlar och representerar olika känslor vilket har stärkts genom en mängd forskning inom färglära och färgpsykologi genom åren. Det finns helt enkelt medfödda komponenter i våra gener som ”bestämmer” hur vi uppfattar olika färger. När det handlar om djur är exempelvis färger som röd och orange starkt förknippat med fara, varför många insekter strategiskt använder dessa för att skrämmas och förmedla rädsla. Människor uppfattar starka färger som dessa på ungefär samma sätt, medan lugnare färger som blå och grön i regel har en avslappnande och trygg effekt.
Dina färgval kommer helt enkelt resultera i olika känslor och uppfattningar bland de människor som besöker hemsidan och det är därför väldigt viktigt att du väljer att arbeta med en grafisk design som samspelar och på ett bra sätt representerar de produkter och tjänster som du erbjuder på din hemsida. Om du exempelvis driver en webbshop för spa-produkter kan det vara en god idé att använda dig av lugna färger och inte skrikande röda nyanser.
Färgcirkeln
Ett bra verktyg och utgångspunkt för att välja färger till hemsidan, som också används av många grafiska designers, är färgcirkeln. Med hjälp av färgcirkeln är det enkelt att komma underfund med vilka färger som passar ihop och inte. En av de viktigaste kunskaperna att ta med sig när det handlar om färgcirkeln är de två olika typerna av lyckade färgkombinationer, nämligen komplementärfärger och harmoniska färger.
Komplementärfärger
Komplementärfärger är sådana som befinner sig mitt emot varandra i cirkeln och bidrar med kontraster. Exempel på komplementärfärger är grön och röd.
Harmoniska färger
Harmoniska färger befinner sig istället precis intill varandra i färgcirkeln och fungerar bra tillsammans eftersom de är nyanser av samma färg, exempelvis mörkblå och ljusblå.
Varma färger
Varma färger är traditionellt sett starkt förknippade med lycka, passion och energi. De fungerar bra för att uppmärksamma och används därför mycket i exempelvis mataffärer för att tydligt skylta med nedsatta priser eller nya produkter. Även företag som McDonalds använder färgkombination av gul och röd i sin klassiska logotyp. På det här sättet står den ut och är lätt att upptäcka oavsett om det är längst vägarna eller i stadsmiljö.
Röd
Röd är en färg som effektivt kan användas för att fånga dina besökares uppmärksamhet på hemsidan. Den varma färgen representerar passion och romantik, men även konflikterande känslor som fara och aggressivitet. Eftersom röd är en så tvetydig färg är det viktigt att den används rätt om du önskar att inkludera den på hemsidan. Främst bör rött alltså användas för att exempelvis uppmärksamma ett speciellt erbjudande eller varna om viktiga saker att komma ihåg och tänka på i en guide.
Orange
Orange som färg kan beskrivas som en mildare version av röd. Detta eftersom den är stark och uppmärksammande, men samtidigt inte riktigt lika intensiv. Istället för passion eller varning är orange ofta förknippat med optimism och framgång. När det gäller hemsidor är orange i regel en av de mest populära accentfärgerna och används flitigt till exempelvis knappar, titlar eller andra element som man önskar rikta uppmärksamhet mot.
Gul
Färgen gul förknippas starkt med glädje och förmedlar ofta känslor av ljus och värme. Det finns även de som förknippar gul med värde, eftersom gult kan kopplas ihop med färgen och intrycken av guld. Det kan dock vara svårt att inkorporera gul på hemsidan eftersom den i regel är väldigt svårläst som textfärg och tenderar att störa ögats uppfattning.
Kalla färger
Kalla färger används oftast flitigare på hemsidor än vad varma gör. Detta eftersom de tenderar att förmedla ett lugn snarare än att uppmärksamma. Eftersom det inte är samma energi i kalla färger som i de varma motsvarigheterna uppfattas de ofta som vilande och trygga. Kalla färger är populära att använda i exempelvis logotyper, vilket kan vara en bra insikt att ta med dig i ditt eget arbete med hemsidan.
Lila
Lila som färg förmedlar ofta en känsla av kreativitet, lojalitet och exklusivitet. Det är inte ovanligt att upptäcka lila i kungliga sammanhang. Ett tips är därför att använda dig av lila på hemsidan när du vill förmedla en känsla av lyx.
Blå
Majoriteten av alla logotyper som finns går i toner av färgen blå. Det finns många vackra nyanser av färgen och framförallt förmedlar den känslor av trygghet och lugn. Av naturliga skäl är den därför också mycket populär inom branscher som sjukvården och banker.
Enligt forskning inom färgpsykologi är blå även en bra färg att inkludera i sitt klädval till exempelvis en arbetsintervju eftersom man då kommer förmedla ett lugn, lojalitet och öppenhet. Några exempel på företag som flitigt marknadsför sig med blå färg är Facebook, Nordea och Handelsbanken.
Grön
Som färg förmedlar grön en känsla av natur, hoppfullhet och frihet men förknippas också flitigt med vad som kan anses som en motsats, nämligen pengar. Grön färg för också tankarna till känslor av att något är godkänt, redo och tillgängligt, varför det är en populär färg som företag använder för att förmedla kontaktuppgifter, säker inloggning eller värdefull information.
Gråtoner
Några populära färgkombinationer för webbsidor och marknadsföring i stort är gråtoner. Dessa färger rör sig mellan absolut vitt och absolut svart och har således inga definitiva gränser. Gråtoner förmedlar med sitt minimalistiska intryck en känsla av exklusivitet som, trots att det inte är en uppmärksammande färg i klass med till exempel röd eller gul, kan användas för att rikta besökare mot hemsidans innehåll, funktioner och andra element.
Exklusiva märken inom mode som exempelvis Calvin Klein och Armani tenderar att använda sig av mycket gråtoner i sin grafiska design samt på sina hemsidor.
Svart
En färg som ofta används på fel sätt på hemsidor är svart. Svart är både tungt och stark och förmedlar känslor av mystik och elegans, men även makt och ondska. Ofta används färgen som bakgrund till text som är vit vilket ger ett exklusivt och stilrent intryck. De flesta företag som erbjuder exklusiva produktlinjer marknadsför dem på just detta sätt.
Samtidigt gör det här användandet av svart att hemsidan snabbt riskerar att kännas tung och inte lika inbjudande som en med ljusare färger som bakgrund. Det är dessutom svårare att få andra färger att sticka ut på samma sätt och kan även försämra texters läsbarhet. Se därför till att vara måttlig och eftertänksam om du planerar att göra hemsidan svart.
Grå
Grå förmedlar som färg både lugn och balans och används flitigt för att bryta av och lyfta element på hemsidor. Grått symboliserar ofta även respekt, stabilitet och styrka, varför det också som tidigare nämnt är en populär färg bland exklusiva märken. Samtidigt tillhör grått verkligen inte de livligaste av färger, utan får anses som en ganska tråkig sådan.
Vit
Färgen vit är både enkel och oskuldsfull och symboliserar ofta renlighet, sanning och fred. Om du använder dig av vit bakgrund på hemsidan kan du räkna med bra kontraster i kombination med majoriteten av alla andra färger och text som blir lättläst och enkel att ta del av.
En bra tumregel för att lyckas med dina färgval och undvika att hemsidan blir rörig är att hålla dig till totalt 3-4 färger där några är harmoniserande och andra komplementära. Du kan med fördel använda dig av verktyg som Adobe Kuler och färgcirkeln till hjälp för att upptäcka vilka färger som passar ihop.
Nyanser
Olika nyanser är också en viktig när det är dags att välja rätt färg till hemsidan. Om en färg känns begränsande och inte riktigt stämmer med din vision kan du pröva dig fram med andra nyanser av den.
Nyanser är helt enkelt olika variationer av samma färg, exempelvis ljusblå och mörkblå. Med hjälp av nyanser på hemsidan adderar du extra dimensioner till dina färgval och din design i stort. Samtidigt är det viktigt att komma ihåg att ett överanvändande av olika nyanser och färger riskerar att röra till hemsidan och försämra intrycket av den. Se därför till att hålla dig till en stilren och enkel design.
Opacitet
Hur pass genomskinlig en färg är mäts i en skala av opacitet som ofta har ett värde mellan 0 och 1, där 0 är helt genomskinligt och 1 är ogenomtränglig färg. Opacitet används i regel för att göra text mer lättläst, exempelvis på en bild eller annat innehåll.
Exempel på bra färgval
Apples hemsida Apple.se är ett utmärkt exempel på en design med bra färgval. Med sin stilrena struktur ger den ett mycket professionellt och minimalistiskt intryck som samtidigt också innefattar en del färg. Av den anledningen fungerar hemsidan ofta som referens från våra kunder sida när vi får i uppdrag att utveckla deras webbplats. Vad är det då som gör Apples hemsida så lyckad? Jo, nämligen att de:
- Designat sin hemsida mycket rent och med få färger i bakgrunden och text. Tanken är att det istället är produkterna som ska sprudla av färg och göra hemsidan levande.
- Presenterar sina produkter på ett enkelt och stilrent sätt som samspelar med resten av designen.
- Utvecklat hemsidans design med mycket luft mellan de olika produkterna och elementen. Detta gör det enklare att fokusera på en del av sidan i taget och allt blir således lätt att ta till sig.
- Låter bilderna stå för en stor del av designen på ett smart sätt.
- Genom sina färgval av gråtoner, beige och vitt förmedlar man känslor av renhet och elegans.
Välj rätt färg till hemsidan – 8 tips
När du nu fått lite bakgrund om olika färger och hur de fungerar samt lite inspiration för design, tänkte vi avsluta med några bra tips för hur du kan tänka för att underlätta dina val av färg till hemsidan.
- Basera dina färgval på de känslor du vill att din verksamhet och varumärke ska förmedla
- Analysera dina konkurrenter och internationella företags hemsidor för att få idéer. Stora företag har hela avdelningar vars enda uppgift är att utveckla den grafiska profilen och arbeta fram strategier för stark representation. Ta vara på det och låt dig inspireras!
- Ju fler färger, desto rörigare design. Håll dig till 3-4 färger totalt på hemsidan så ser du till att din design håller sig stilren och enhetlig. Om du känner ett behov av mer variation än så kan du använda dig av fler nyanser av färgerna.
- Se till att färgerna du väljer antingen är komplementärfärger eller harmoniska färger för att vara på den säkra sidan att de passar ihop.
- Var noga med att dina färger även fungerar bra och harmoniserar med svart och vitt. Detta eftersom det vanliga är att arbeta med svart text och vit bakgrund på hemsidor.
- Kombinera dina färgval med bilder som förstärker ditt budskap och känslorna du vill att din hemsida och verksamhet ska förmedla. På det här sättet får du en hemsida som samspelar gällande alla element.
- Använd verktyg som Adobe Kuler till din hjälp. Det är helt gratis och låter dig experimentera dig fram med dina färgkombinationer på ett mycket effektivt sätt. När du sedan hittat rätt färger lägger du enkelt till dessa på hemsidan via antingen RGB- eller Hex-kod.
- Arbeta med starkare färger som röd eller orange för att uppmärksamma element inom Call-To-Action, exempelvis knappar som uppmanar till ”Köp nu”, ”Boka” eller ”Kontakt”.
Mer information om färger som passar ihop och kan användas på hemsidan för att exempelvis uppmärksamma, lugna eller uppmana till handling, hittar du i vår ”Call-to-action” guide.
