SITEA GUIDE 2024
Välj rätt färger till din hemsida – Ultimata Färg Guiden
Att välja rätt färger till din hemsida för att förmedla rätt känsla kan låta enklare än vad det är. Men är du medveten om vad de olika färgerna representerar och hur du på bästa sätt får färgerna att arbeta för din hemsida och inte mot den?
I denna guide kommer vi hjälpa dig att välja färger till din hemsida.
Innehåll:
- Vikten av att välja färg
- Färgcirkeln
- Varma färger
- Kalla färger
- Nyanser
- Opacitet
- Bra exempel på hemsidor
- 10 viktiga tips
Vikten av att välja rätt färger
Alla färger representerar olika känslor. Det finns mycket forskning som gjort inom färglära och färgpsykologi och det färgpsykologin har kommit fram till är att det finns medfödda, genetiska komponenter för hur vi uppfattar färg.
I djurriket så är rött och orange förknippat med fara och det finns många insekter såsom spindlar som använder färgerna i avskräckande syfte.
Vi människor uppfattar också rött och orange på samma sätt, medans grönt och blått uppfattas som mer avslappnande och trygga färger samt förmedlar an känsla av lugn. Det är därför sjukhusförkläden är gröna och blåa – för att förmedla lugn.
Slutsats: De färger du väljer kommer representera och skapa känslor hos besökarna till din hemsida. Det är därför av största vikt att den grafiska design du väljer representerar de produkter/tjänster som ni erbjuder. Att välja rätt färger till hemsidan är därför avgörande!
Använd färgcirkeln för att välja färger
En vanlig utgångspunkt för grafiska designers när de ska välja färger till hemsidan är att utgå från färgcirkeln.
Det som är viktigt att ta med sig från färgcirkeln är att det finns två kombinationer av färger som passar särskilt bra: komplementfärger och harmoniska färger.
Komplementärfärger – Motsatta färger i cirkeln
Komplementärfärger är färger som är komplementära och ligger mitt emot varandra i färgcirkeln. Såsom grönt och rött.
Harmoniska färger – Nyanser inom samma färg
Harmoniska färger är färger som ligger intill varandra och är nyanser av samma färg. Exempel på harmoniska färger är ljusblått och mörkblått.
Färgerna en för en
Nu är tanken att vi ska gå igenom varje färg en för en för att se vilka känslor och associationer de skapar och representerar.
Färger som är varma
Färger som vi klassiskt sätt klassificerar som varma är förknippade med lycka, energi, kraft och passion. De används ofta för att skapa uppmärksamhet och är ofta varför man i matbutiken ser röda skyltar med gul text när något pris är nedsatt eller rea råder. McDonalds har också valt att använda röd färg då denna färg skapar uppmärksamhet och sticker ut.
Röd
Rött är en klassisk färg när du vill fånga besökarens uppmärksamhet. Färgen rätt representerar romantik, passion, samt eld, värme och aggressivitet. Det är med andra ord en färg med många till synas konflikterande betydelser.
Se därför till att använda rött på rätt sätt. Ofta använder man rött för att visa något varnande på hemsidan, kanske ett specialerbjudande som snart går ut eller någon typ av varning.
Orange
Orange är en färg som påminner mycket om röd, men som på samma gång inte är lika intensiv och hård. Färgen orange är istället ofta kopplad till framgång, optimism, självförtroende och glädje. För hemsidor så är orange kanske en utav de mest använda accent-färgerna som ofta används till knappar och titlar samt vissa element där man vill fånga besökarens uppmärksamhet.
Gul
Gul är glädjens färg som med sina klara färg får tankarna och känslorna till värme och ljus. Vissa kopplar också gul med guld och därför kan gul också symbolisera värde. Gul är dock en ganska svår färg att använda sig utav då den blir svårläst och ofta stör ögat. Det är inte ofta som gult används som färg till en hemsida.
Kalla färger
Nu när vi har gått igenom de varma färgerna så ska vi också ägna lite tid åt de kalla färgerna som faktiskt är mer använda för hemsidor än de varma färgerna.
De kalla färgerna får oss att känna lugn, trygghet men samtidigt lite ensamhet och enslighet. Det är inte samma energi i dessa färger utan de uppfattas ofta som mer ”vilande” färger. De kalla färgerna är oftaast de färger som används för logotyper och element på hemsidor.
Lila
Lila är en intressant färg som ofta symboliserar kreativitet, lojalitet, och exklusivitet. Det är en färg som ofta förknippas med kungligheter så använd den gärna för att skapa en lyxig touch.
Blå
Nästan hälften av alla män har blå som sin favoritfärg. Kanske lite därför också de flesta logotyper i världen ofta går i en blå ton. Den blåa färgen och dess olika nyanser får oss att känna lugn och förtroende och det är därför som färgen ofta används av företag inom banksektorn och inom sjukvården.
Blått är även en färg som förknippas med lugn, säkerhet och öppenhet. Inom färgpsykologin så är blått en bra färg att ha på sig på en arbetsintervju just därför att man förknippas som öppen, lugn och lojal.
Företag som använder blått i sin logotyp är exempelvis Facebook, Handelsbanken, Bonaqua med flera.
Grön
Grönt är en klassisk naturfärg och förr oss direkt till tankar om skog, natur och frihet och lite paradoxalt också till pengar. Färgen grön är en färg som i vår kultur ofta associeras med ”grönljus” och ”godkänt” vilket gör färgen grön till en mycket bra accentfärg för element på hemsidan där kunden exempelvis kan kontakta företaget, logga in eller lära sig mer. Ytterligare känslor som grön kan skapa är lugn och hoppfullhet.
Vill du vet mer om hur du kan använda färger, och specifikt accentfärger, för att fånga besökarens uppmärksamhet och utföra specifika beteenden på din hemsida så ska du med fördel läsa vår genomgående guide om ”Call-to-action”.
Gråtoner
En färgtyp som kan användas med stor framgång är gråtoner. Dessa färger går mellan absolut vitt och absolut svart och har därför ingen specifik gräns. Gråtoner ger en exklusiv och minimalistisk design som kan användas för att dirigera uppmärksamheten till sidans innehåll, funktioner, element och bilder.
Dyra märkeskläder använder ofta gråtoner på sina hemsidor och i sin grafiska design för att fånga en känsla av exklusivitet. Exempel på detta är Calvin Klein och Armani.
Svart
Nu kommer vi till en färg som ofta används fel på hemsidor. Svart är en väldigt tung och stark färg som ofta symboliserar makt, elegans och historia. Dessutom symboliserar det mystik, natt och ondska.
Det är en färg som ofta används som bakgrund för vit text och som direkt skapar en känsla av exklusivitet. Om du tänker på alla de märken som har en exklusiv produktlinje så är de nästan alltid paketerade i svart. Tänk exklusiv bil: och många tänker svart limousine.
Svart är dock en färg som många har problem med att använda på hemsidan. Då det är en tung färg så kan det vara svårt att ha den som bakgrundsfärg på hemsidan. Hemsidan blir ganska direkt tung och inte inbjudande på samma sätt som en vit hemsida är.
Var därför varsam med om du tänker skapa en svart hemsida. Det är också en svårare färg att få färger att sticka ut och det är ofta krävande att läsa texten på en svart hemsida.
Grå
Grå är en relativt lugn och balanserad färg som ofta används för att bryta av element på en sida. Dessutom symboliserar grått också ofta respekt, auktoritet, stabilitet och styrka. Många märkeskläder t.ex. Calvin Klein och Armani använder ofta grått på sina hemsidor och produkter. Dock är grått en ganska tråkig färg. Kanske påminner färgen om en grå höstdag?
Vit
Den vita färgen har stark symbolisk betydelse. Den står ofta för renlighet (sjukhus), oskuld (bröllop), sanning och fred. För hemsidor så används nästan alltid vitt som färg för bakgrunden på hemsidan. Det gör att andra färger ”poppar” och texten blir mer lättläst.
Nyanser
Helst ska man försöka förhålla sig till 3-4 färger som harmonierar och/eller är komplementärfärger. Använd gärna färgcirkeln eller verktyg såsom Adobe Kuler för att hitta bra färgkombinationer. Om dessa färger känns begränsande så har du alltid möjligheten att använda nyanser.
Nyanser är olika variationer av en färg inom samma färg-”familj” så inom grön så har du mörkgrön och ljusgrön. Genom att addera nyanser av färger så utökas möjligheterna med fler kombinationer. Tänk dock på att inte överanvända färger och nyanser utan håll det enhetligt och fokuserat.
Opacitet
Opacitet i en färg handlar om hur pass genomskinlig färgen är. Det brukar specificeras från 0 till 1 där 0 är helt genomskinlig och 1 är ren färg. Ofta används färg med opacitet på en bild för att kunna göra eventuell text på bilden mer lättläst.
Exempel på hemsidor med bra färgval.
- Airbnb (www.airbnb.com): Airbnb använder en kombination av mjuka och livliga färger som förmedlar en känsla av värme och välkomnande. Färgerna är också användarvänliga och underlättar navigeringen på webbplatsen.
- Spotify (www.spotify.com): Spotify använder starka och livliga färger som ger en energisk och modern känsla. Färgerna är väl samordnade och används konsekvent på hela webbplatsen och i deras app.
- Dropbox (www.dropbox.com): Dropbox använder en kombination av rena och ljusa färger som ger en känsla av ”fräschhet” och enkelhet. Färgschemat skapar en ren och organiserad känsla på hemsidan.
- Slack (www.slack.com): Slack använder en kombination av ljusa och dämpade färger som ger en lugn och balanserad känsla. Färgscheman är väl samordnade och bidrar till att skapa en enhetlig och behaglig användarupplevelse.
- Medium (www.medium.com): Medium använder en neutral och subtil färgpalett som skapar en elegant och sofistikerad feel. Färgvalen är väl avvägda och ger en ren och lättläst design.
Apple.se – Ett exempel på minimalism och sälj-strategi
Ett klassiskt exempel på bra design och färgval är Apples hemsida. När kunder kontaktar oss på Sitea så brukar dem ofta be oss att skapa en design som liknar Apples hemsida. Ofta uttrycker de då att de gillar hemsidan för att den är professionell, ren, minimalistisk och med fina färger.
Om vi utgår från Apple.com så kan vi komma fram till följande slutsatser:
- De har valt att hålla hemsidan ren och med få färger. Det är produkterna som ska ”poppa” och därför är hemsidans design relativt kontrastlöst och med mycket ”white-space”. Detta för att när väl färg eller en bild introduceras så sticker det ut.
- Apples produkter andas enkelhet och ren design det gör hemsidan också vilket förstärker budskapet.
- Hemsidan ”andas” också, vilket innebär att Apple valt att inte trycka in för mycket på sidorna utan det är fokus på ett fåtal färger, bilder och text i taget.
- Bilderna står för mycket av designen.
- Val av gråtoner, beige och vitt ger en känsla av renhet och vackert.
Chrisstäd.se – minimalistisk och rent för att strategiskt symbolisera tjänsterna
Nästa sida som är intressant att analysera är Chrisstäd. Det är ett företag som erbjuder städtjänster runt om i Sverige. Det viktiga för detta företag är att hemsidan ska representera rent och fräscht vilket är det som städning i grund och botten handlar om.
- Ett fåtal återkommande färger som återkommer för ren design
- Färger som harmonierar med logotypen
- Mycket vitt för att symbolisera rent och oskuldsfullt.
- Bilder och ikoner som representerar företagets värdeerbjudande (tjänster).
- Då företaget enbart arbetar med miljövänliga produkter så används grönt och blått för att representera och återspegla de färger vi ser i naturen.
Så väljer du färger – 10 tips.
Nu är det dags för dig att själv välja färger till din hemsida. Som grund ska du tänka på vilka känslor och associationer som du vill ge besökarna till hemsidan. Det är här som den grafiska designen och framförallt färger kommer in i bilden.
- Utgå ifrån de känslor och hur du vill att ditt varumärke och hemsida ska uppfattas.
- Gör en konkurrensanalys och se även internationellt vad framgångsrika företag har valt för färger. Större företag har hela avdelningar som sitter med den grafiska profilen och diskuterar strategier för att hitta ett färgspråk som representerar det företaget vill stå för.
- Ju fler färger du väljer desto svårare blir det.
- Less is more. Det är lätt att man börjar med för många färger och därmed tappar en enhetlig design och gör hemsidan rörig. Välj därför runt 2-3 starka färger som fungerar som accentfärger och om du har ett större behov av färger så kan du välja nyanser av dessa färger.
- Färgerna du väljer ska helst vara komplementärfärger eller harmoniska.
- Tänk på att de färger du valt ska harmoniera med svart och vitt på hemsidan då ofta texten är mörk eller svart och bakgrunden vit.
- Välj kombinationer av färger som speglar känslorna
- Välj bilder som harmonierar med färgerna du valt och som representerar och ger hemsidan en enhetlig design och starkt budskap.
- Använd dig utav alla designers ”heliga graal” kuler.adobe.com. Det är ett fantastiskt bra gratisverktyg där du kan testa dig fram med färgkombinationer. Så har du hittat en färg du gillar så kan du med enkelhet lägga till den färgen via antingen RGB kod eller ”Hex-kod” och sedan automatiskt få fram färgkombinationer som passar.
- Välj starkare/aggressivare färger t.ex. orange eller rött för att dra uppmärksamheten till dina CTA-element såsom ”Köp nu”, ”Kontakt” ”Boka idag” med flera. (Läs mer om Call to Action).
Vanliga misstag när man väljer färger till hemsida:
När man väljer färger till en hemsida kan det vara lätt att göra misstag.
- För många färger: Att använda för många färger kan göra att hemsidan ser plottrig och rörig ut. Det kan vara svårt för användare att fokusera och navigera på hemsidan. Håll dig till ett fåtal färger (2-3) färgpalett för att skapa en enhetlig och harmonisk design.
- Oläsbara färgkombinationer: Att välja färger som inte kontrasterar tillräckligt kan göra texten svårläst. Ett exempel är att ha ljus text på en ljus bakgrund eller mörk text på en mörk bakgrund. Se till att ha tillräckligt med kontrast mellan text och bakgrund för att säkerställa läsbarheten.
- Ignorera målgruppens preferenser: Att inte ta hänsyn till målgruppens preferenser och variationer kan leda till att färgvalet inte resonerar med användarna. Det är viktigt att förstå din målgrupp och välja färger som appellerar till dem och förmedlar rätt budskap.
- Användning av fel färgassociationer: Färger har olika symboliska betydelser i olika kulturer och sammanhang (associationer). Att använda färger utan att förstå deras betydelse kan skapa förvirring eller ge felaktiga associationer. Var medveten om färgernas symbolik och använd dem på ett sätt som är relevant för ditt varumärke och de budskap du vill skapa.
- Att inte testa och iterera: Det är viktigt att testa färgvalet och iterera baserat på feedback och användardata. Ibland kan färgerna se bra ut i designstadiet men fungerar inte alls lika bra i praktiken. Var öppen för att göra ändringar och justeringar baserat på användarnas reaktioner och feedback.