Lisa Eriksson

Hur väljer du färgkombinationer till hemsidan?

Att välja en färgkombination till sin hemsida handlar om mycket mer än att bara välja sin ”favoritfärg”. Färger förmedlar budskap och känslor, så genom att välja rätt färger till att representera ditt företag kan du påverka dina besökare positivt utan att de behöver läsa ett enda ord. Har du däremot inte lyckats med dina färgval kan det komma att ha motsatt effekt. Vilket kan leda till en rörig hemsida som personer snabbt lämnar.

Kort sagt är det viktigt att ha förståelse för olika färger för att kunna bedöma vilken färg eller färger som bäst kan representera ditt företag. Och just det kommer jag att reda ut i denna blogg. Jag kommer att gå igenom:

- Varför färgerna på din hemsida är viktiga
- Färgteori
- Olika färger och dess betydelse
- Hur du väljer rätt färg till hemsidan
- Varför du ska spara dina färgkoder

Låt oss börja med att få en bättre förståelse varför färgen på din hemsida är så viktig.

Varför färgen på din hemsida är viktig

Många tänker nog att färgen på en hemsida egentligen inte spelar så stor roll och att det är innehållet på hemsidan som räknas. Men kom ihåg att färgen på din hemsida är det första besökare ser när de klickat in sig på sidan. Alltså är färgerna avgörande när det kommer till första intrycket av varumärket.

Statistik visar att färg ökar igenkännandet av varumärket med hela 80%!

Den första gången en person besöker din webbplats är chansen att de köper en tjänst eller produkt inte så stor. I genomsnitt tar det 8 tillfällen för en potentiell kund att komma i kontakt med ett varumärke innan den personen bestämmer sig för att köpa. Därför är det så viktigt att dina potentiella kunder kommer ihåg varumärket och hemsidan så att de kan komma tillbaka och bli betalande kunder längre fram.

Färger är dessutom mer än bara vackra att se på. De väcker känslor och förknippas med olika budskap. Exempelvis är blått en väldigt lugnande färg som förknippas med tillit och lojalitet. Inte konstigt att många advokatbyråer och banker väljer att ha blått på sin hemsida och sin logotyp. Att förmedla ditt budskap i färg är en viktig del av din grafiska design.

Färgteori

Färgteori eller färglära som det också heter, är ett system för att beskriva och hantera färger. Färgerna är inkluderade i ett färghjul och består av tre olika färgkategorier.

Den första färgkategorin är primärfärgerna. Dessa är röd, gul och blå. Genom att blanda primärfärgerna kan du få fram alla andra färger i färghjulet. Den andra kategorin kallas för sekundärfärgerna. Sekundärfärgerna består av orange, grön och lila. Därefter har du tertiärfärger som skapas genom att blanda en primärfärg med en sekundärfärg.

Kombinera olika färger i färghjulet

Färghjulet kan användas för att kombinera olika färger, som du till exempel behöver göra när du ska välja färger till din hemsida som passar bra ihop. Detta kan göras på olika sätt. Det finns framförallt tre olika tillvägagångssätt som grafiska designers använder sig av och de kallas för monokrom färgsättning, komplementfärger och harmonisk färgsättning.

Monokrom färgsättning: Monokrom färgsättning betyder att du endast använder dig av en enda färg men att du inkluderar olika nyanser och toner av den färgen.

Komplementfärger: Komplementfärger eller kontrasterande färgsättning som det också kallas för, innebär att du väljer färger som är motsatta till varandra i färghjulet. Dvs de ligger exakt mitt emot varandra. Ett exempel på detta är blått och orange.

Harmonisk färgsättning: Harmonisk eller analog färgsättning innebär att du inkluderar färger som är bredvid varandra i färghjulet. De skapar harmoni då de matchar väldigt bra med varandra.

Även om dessa tre färgsättningsmetoder är bra riktlinjer behöver du inte följa dem blint. Du väljer själv vilka färger du tycker fungerar bra ihop, men metoderna kan hjälpa dig få inspiration och ett hum om vilka färger som matchar. Nästa steg är att titta på vad de olika färgerna betyder!

Själv älskar jag att gå till olika gratis sidor och se vilka kombinationer de rekommenderar. Colorhunt är en sida jag brukar titta på för inspiration. Kom ihåg bara att inte välja för många färger till ditt företags grafiska profil eller hemsida. Oftast bör man inte välja fler än tre färger. Grått, vitt och svart räknas oftast inte som färger i en grafisk profil, så dessa kan du också använda på till exempel din hemsida, utöver de tre andra färgerna.

Nörd tips: Du kan få ett dagligt förslag på färger om du besöker color-hex.com. Detta är exceptionellt onödigt för de flesta av oss, men så kul....

Olika färger och deras betydelse

Olika färger har olika betydelse och väcker olika känslor hos oss när vi ser dem. Många av dessa kanske du redan har hört talas om, men här kommer en kort genomgång av våra varma och kalla färger och dess betydelse.

Varma färger

Bland varma färger finner du röd, orange och gul. Röd och gul är två primärfärger och orange är en sekundärfärg. Med det menas att man måste blanda två färger för att få fram orange. I detta fallet rött och gult. Nedan går vi igenom varje färg var för sig.

Röd

Röd är en stark färg som drar till sig mest uppmärksamhet av alla färger! Den är förknippad med många saker. Bland annat passion, energi och uppmaning till att agera. Rött är även förknippat med ilska, eld och fara. Det är därför stoppskyltar exempelvis är röda då man vill varna personer och be dem agera.

Röd färg är även en naturlig så kallad ”nyckelretning”. Exempelvis är röda läppar associerat med hälsa, lust och förförelse och är anledningen till alla röda läppstift som säljs så framgångsrikt. Genom åren har därför rött kommit att symbolisera kärlek och passion, tänk bara på alla röda rosor och röda hjärtan runt alla hjärtans dag. Den röda färgen är även förekommande i sport då den förmedlar energi till atleterna. Sist men inte minst har färgen rött olika betydelser runt om i världen. I Japan symboliserar färgen röd styrka och självuppoffring och i Indien symboliserar färgen renhet.

Orange

Orange anses vara en rolig färg som utstrålar entusiasm och optimism. Den orangea färgen uppmuntrar till glädje, kommunikation och kreativitet. Färgen är sekundär vilket betyder att man måste blanda två primära färger, röd och gul för att få orange.

Utöver entusiasm och optimism utstrålar även orange spontanitet och uppmuntrar personer att ta risker genom att förmedla mod. Orange är speciellt populärt bland den yngre generationen medan äldre ofta har en hat- eller älska relation till färgen. Orange drar även enormt mycket uppmärksamhet till sig vilket kan hjälpa i alla olika nyhetsflöden.

Gul

Starkt förknippat med solen. Gul är en färg som jag tror vi alla redan kan gissa vad den förmedlar och det är positivitet och glädje. Tack vare dess positiva och glada gula färg kan den lyfta allas humör och boosta självsäkerhet.

Gult stimulerar vår vänstra sida av hjärnan vilket är kopplat till logiskt tänkande och kan hjälpa oss fatta beslut. Den förmedlar även nyfikenhet och hjälper oss att hålla oss grundade. Dock kan gult också utlösa oro och ängslan. Vilket kan leda till att man övertänker och blir nervös.

Kalla färger

Bland de kalla färgerna finner vi blått, grönt och lila. Blått är den enda primära färgen. Grönt och lila är båda sekundärafärger. För att få fram grönt behöver man blanda blått och gult. För att få fram lila behöver du blanda blått och rött. Låt oss titta närmare även på dessa färger och deras betydelse mer i detalj.

Blå

Lojalitet och tillit är två ord starkt förknippade med blått. Den blåa färgen är en riktig favorit bland både män och kvinnor i alla åldrar. Blå förmedlar lugn och får oss att känna oss självsäkra och påverkar hjärnan positivt. Blått är även förknippat med havet vilket ytterligare stärker dess lugnande inverkan.

Blått är inte den färg som startar konflikter. Istället föredrar den att hålla sig åt sidan och för sig själv. Kontroll är även förknippat med blått samt ordning och reda. Att hålla saker och ting enligt status quo är väldigt viktigt. Går inte saker som planerat kan det skapa förvirring och oro.

Ultramarinblå färg ansågs vara den finaste och var även den dyraste färgen som användes av Renässansmålare då den importerades ifrån Afghanistan. Blå är även en av de äldsta färgerna och användes tidigt i Kinesiskt porslin.

Nedan är ett exempel på de blåa färgtoner Viktor på nklt tog fram till vår kund Svensk e-identitet. Inklusive färgkoder som jag kommer att skriva om lite längre ner.

Grön

Grön är en färg som sedan urminnes tider har förknippats med tillväxt, välstånd och hälsa. Utöver det är grön en färg som livar upp kropp och sinne samt får människor att känna sig trygga och säkra. Grönt förknippas också med några negativa aspekter som avundsjuka, materialism och oerfarenhet.

För att få fram färgen grön behöver man blanda blått och gult. Grönt är även förknippat med tur, som vi ser i exempelvis fyrklöver. Mörkgrön är också förekommande inom militären då det fungerar bra både som kamouflage och att förmedla osjälviskhet och styrka.

Lila

Lila är den mest magiska och spirituella färgen. Färgen lila får oss att använda vår fantasi och avslöja våra djupaste tankar. Lila är speciellt förekommande inom lyxprodukter och ledarskap. Exempelvis inom en monarki, där en kung eller drottning har stort inflytande eller makt.

För att få fram färgen lilla måste man blanda rött och blått. Lila väcker även många positiva känslor som medkänsla, acceptans och sympati. Den är också starkt knuten till kreativitet. Dock kan lila också leda till sensitivitet och vaksamhet.

Hur du väljer rätt färger till din hemsida

Nu när jag har gått igenom grunderna i färgteori och de olika färgernas betydelse är det dags att titta lite närmare på processen med att välja färger till din hemsida. Som nämnt ovan finns det många olika sätt att gå tillväga. Du kan antingen välja en färg och inkludera olika toner eller välja en huvudfärg och några kompletterande färger. Nedan kommer en kort steg-för-steg-guide med tips på saker att tänka på när du väljer färger till hemsidan!

Huvudfärg

Det första du måste göra är att välja en huvudfärg till hemsidan! Huvudfärgen kommer att sätta tonen för varumärket och det budskap du vill förmedla till dina kunder. En vanligt förekommande regel inom färglära och grafisk design för att skapa harmoni är ”60-30-10-procent-regeln”.

Med 60/30/10 regeln menas att man har en huvudfärg som tar upp 60% av hemsidan. Därefter har man komplementfärger som består av 30% av sidan och sist men inte minst har man en accentfärg som är 10% av hemsidan. Vanligtvis har man 3-4 färger sammanlagt för att hålla designen snygg och tydlig.

Läs tipsen nedan för att komma fram till vilken huvudfärg som passar ditt varumärke bäst.

Tips på hur du väljer rätt färg till hemsidan

1. En viktigt aspekt att hålla i åtanke är var din målgrupp befinner sig rent geografiskt. Som nämnt ovan har olika färger olika betydelser i olika länder. Genom att definiera din målgrupp och var de befinner sig kan du välja en färg som representerar det budskap du vill förmedla.

2. Andra delar att tänka på när det kommer till din målgrupp är vilken ålder majoriteten av dem har samt vilket kön de tillhör. Statistik visar att både ålder och kön spelar in när det kommer till favoritfärger.

Ta till exempel orange. Orange är inte särskilt omtyckt av äldre kvinnor men däremot mycket omtyckt av den yngre generation. Riktar du dig till en yngre målgrupp kan orange därför vara ett smart val. Men budskapet du vill förmedla skulle jag ändå sätta först oberoende av vilka färger olika grupper gillar. Blå är till exempel en färg som både bland män och kvinnor föredrar i lika stor utsträckning.

3. Välj dock inte en färg bara för att du själv gillar den. Att välja din favoritfärg till ditt företags hemsida kan kännas lockande, men kom ihåg att färgen du gillar kanske förmedlar ett helt annat budskap än det du vill att ditt företag ska stå för. Så läs på om alla färger och jämför deras olika budskap med vad ditt företag vill förmedla till era kunder.

4. Jämför vilka färger dina konkurrenter använder. Här finns det två vägar att gå. Antingen så kör du ”safe” och väljer en färg som de flesta andra använder sig av eller så kör du helt motsatt riktning. Det positiva med att välja en vanligt förekommande färg i din industri är att dina konkurrenter har valt den färgen av en anledning och det fungerar rimligtvis bra för dem. Det kan även hjälpa din målgrupp förstå din verksamhet snabbare då de kanske redan förknippar färgen med din industri.

Väljer du däremot att gå i motsatt riktning så är det en chansning. Å ena sidan  leder det kanske till att kunden inte alls associerar färgen med branschen, vilket kan ha en negativ inverkan på varumärkesigenkänningen. Men å andra sidan kan det också bidra till att du står ut i mängden och lättare blir ihågkommen. Det är som sagt en chansning och du får väga för och nackdelar mot varandra.

Komplementfärg

Komplementfärgen till din hemsida bör alltså ta upp runt 30% av hemsidan. Här kan det också vara bra att titta på olika alternativ. Exempelvis kan du välja en monokrom färg (toner och nyanser), komplementfärg eller harmonisk färg. Mitt tips är att du använder antingen ett digitalt verktyg för att pröva dig fram, eller att du lägger in och testar olika färger direkt på hemsidan för att se vilken färg som passar bäst ihop med huvudfärgen och de övriga bilderna du vill ha med.

Accentfärg

Accentfärgen du väljer till hemsidan kommer att synas på runt 10% av hemsidan. Många gånger väljer man en accentfärg som tydligt står ut och skapar kontrast på hemsidan så att kunderna lätt ser den. Denna färg kan till exempel passa bra till knappar som behöver ha en stark färg för att uppmärksamma personer som scrollar på sidan att agera. Svart och vitt fungerar också som accentfärger. Det viktiga är bara att du ser till att de syns och inte försvinner in i bakgrunden.

Varför du ska spara dina färgkoder

Varje färg du väljer har en specifik färgkod. Beroende på var du planerar att använda färgen används olika koder. När det kommer till tryck, exempelvis på tröjor, används PMS och CMYK koder. Till hemsidor eller andra bildskärmar använder man sig av färgkoderna RGB och HEX. En HEX färgkod är en förkortning av en RGB färgkod.

Det är väldigt viktigt att alla material du framställer för ditt företag har exakt samma färgnyans. Det är nästan omöjligt att matcha en färg exakt med hjälp av din egen syn, speciellt eftersom olika dataskärmer kan visa samma färg på lite olika sätt. Det är därför det är väldigt bra att ha koderna sparade där du lätt kan hitta dem om du skulle behöva använda färgen igen, tex på någon av dina sociala medier kanaler eller om du tar fram en annons.

När du har bestämt vilka färger du ska använda till ditt företag och till hemsidan så rekommenderar jag att du även sparar dem i alla format. Detta ifall du skulle behöva dem i framtiden för tryck på tröjor eller liknande. På hemsidan är det vanligast att man använder HEX färgkoder. Trots det bör du alltid ha dina färger sparade även som RGB färgkoder.

Sammanfattning

Valet av färg till din hemsida är ett viktigt element i den grafiska designprocessen. Men kör inte fast på att välja färg. Färgen är trots allt bara en del av den grafiska profilen som tillsammans utgör känslan och budskapet på din hemsida. Har du svårt att välja eller är osäker på vilka färger som passar ihop rekommenderar jag att du tar kontakt med en grafisk designer för att få hjälp.

Ett sista tips från mig är att du tänker på läsbarheten på hemsidan. Kom ihåg att rubriker och brödtexter ska vara lättlästa utan att man behöver överanstränga ögat. Som jag redan har nämnt flera gånger tidigare i mina bloggar är det viktigt att använda en mörk bakgrund för ljus text och en ljus bakgrund för mörk text.

Vill du prata med en expert på färgteori med flera års erfarenhet av att hjälpa företag välja rätt färger till hemsidan? Hör av dig direkt till mig eller till någon annan av oss på nklt! Vår grafiska designer Viktor hjälper dig gärna besvara dina frågor. Kontakta oss genom att klicka på knappen nedan och fyll i formuläret så hör vi av oss inom kort!


Skriv upp dig till vårt nyhetsbrev

Some fields are not valid
Nyhetsbrev


  • 2023-01-18 07:00
    Så gör du för att komma igång med din e-handel
    info
  • 2023-01-05 07:00
    7 fördelar med att ha din egen e-handel
    info
  • 2022-11-30 07:00 Grafisk design, Webbdesign
    Hemsida till ett nystartat företag – vad du behöver tänka på för att lyckas
    info
Login