När någon anländer till din webbplats för första gången, har färgen en betydande roll när det gäller det intryck besökaren får. Mellan 62-90% av konsumenternas första intryck bygger enbart på just färgval, enligt forskning.
Att välja färger som matchar ditt varumärke – och det du vill att dina konsumenter ska tänka på när det gäller företaget och produkterna – kan vara ett kraftfullt varumärkes- och marknadsföringsverktyg.
I den här artikeln, kommer vi att gå igenom 25 + fantastiska webbplats-färgscheman för målsidor, e-handel och personliga webbplatser, och visa hur du kan välja din egen färg utan att slösa tid.
Hur man väljer färgscheman för sin webbplats
Ögonen på en vuxen människa kan se över 1.000.000 distinkta färger. Hur väljer du rätt färgschema snabbt och effektivt när det finns så många alternativ? Det är den utmaning som alla webbdesigners möter när de försöker skapa ett färgschema eller en palett från grunden.
Med så många val kan du inte utvärdera alla nyanser individuellt och välja de mest lämpliga utan en referenspunkt. Du måste begränsa dina alternativ. Det bästa sättet att börja på är genom att hitta en primär färg som utgångspunkt.
Det bästa sättet att göra detta på är kanske att titta på vilka färger som är populärast i din bransch. Detta kan hjälpa dig att lära dig en del om färgernas psykologi och vilka primära färger som kan fungera bra för ditt företag eller din produkt.
Färgval efter bransch
Olika företag och produkter väljer olika färger för att identifiera sitt varumärke. Men varför? Färg är inte bara ett väldigt effektivt sätt för att fånga uppmärksamheten hos dina framtida kunder och konsumenter. Det är ett sätt att kommunicera med dem på en känslomässig och nästan undermedveten nivå.
Med hjälp av färger kan du börja bygga ditt varumärke i huvudet på konsumenten innan du använder ett enda ord eller mening om produkten. Ingen färg berättar samma historia för konsumenten, så de mest populära primära varumärkesfärgerna varierar från bransch till bransch.
Vilken känsla vill du att potentiella kunder ska associera med ditt varumärke, din produkt eller din tjänst?
Detta är den vägledande frågan som bör hjälpa dig att identifiera vilken primär färg du ska ha i din palett.
Blått Förmedlar:
I branscher där konsumenternas förtroende är viktigare än någon annan faktor, och professionalism och tillförlitlighet är viktiga försäljningsargument, används blått ofta som en primär färg.
Blått tilltalar inte spontana eller känslomässiga beslut. Den inleder istället en lugn och logisk beslutsprocess.
Denna färg är vanligast inom följande branscher:
- Banker
- Flygbolag
- Kommunikation
- Konsumentfinansiering
- Elektriska verktyg
- Tung utrustning
- Hem-inredning
- Hotell-verksamhet
- Läkemedel
Rött Förmedlar:
Branscher som är beroende av känslor och impulsiva beslut (som restauranger och gatukök), använder ofta rött som en primär färg. Rött är tänkt att stimulera hunger, så det är ett favoritval bland internationella livsmedelsmärken.
Denna färg är vanligast inom följande branscher:
- Restauranger
- Dryckesföretag
- Detaljhandel med livsmedel
- Fastigheter
- Kläder
Grönt Förmedlar:
De flesta människor associerar färgen grön med natur, växter, samt levande och återställande miljöer. Branscher som ger konsumenterna löften om bättre välbefinnande eller produkter med helt naturliga ingredienser, väljer ofta grönt.
Denna färg är vanligast inom följande branscher:
- Mat & dryck
- Varuhus
- Fastigheter
- Kemikalier
Svart: Självförtroende, finess
Vissa företag väljer svart istället för att göra ett dedikerat färgval, eftersom det känns säkert. Svart är dock även ett ledande val i branscher där konsumentens förtroende är en viktig faktor.
Denna färg är vanligast inom följande branscher:
- Kläder
- Tillbehör
- Internet -och mobiltjänstleverantörer
- Varuhus
- Hotell
Följ inte din smak och dina instinkter blint, överväg färgteori och färg-psykologi när du tar ditt beslut.
Hur många färgscheman bör användas på en enda webbplats?
I en standard-webbplats färgschema, brukar man kunna urskilja allt i från tre till sju separata färger i ett enda schema eller palett.
Men hur många olika färgscheman ska du använda på en enda webbplats?
Detta beror på de individuella omständigheterna och målen med din webbplats. Om din webbplats är en företag-webbplats eller blogg som är tillägnad ett enda varumärke, produkt, eller företag, ska du hålla dig till ett enda färgschema.
Om din webbplats å andra sidan är en e-handelsbutik, kan du använda olika färgscheman för olika produktscheman för att framkalla olika känslomässiga reaktioner för olika produktkategorier.
Problemet med att använda flera paletter är att du kommer att komplicera saker för alla interna eller externa innehållsskapare, vilket ökar chansen för mänskliga misstag och komplikationer.
När du väljer ett färgschema för din webbplats, är det viktigt att undvika att gå ner sig totalt och spendera veckor på uppgiften. Det är absolut ett viktigt val, men att välja rätt färger kommer inte ensamt att hjälpa dig att locka trafik till din webbplats eller öka konverteringar på din produktsidor.
Hur får man det färgschema man vill ha på sin webbplats
För att identifiera varje färg som används på en webbplats, ner till den exakta nyansen, kan du använda ett Google Chrome-tillägg eller Firefox-tillägg som ColorZilla.
Med ColorZilla kan du helt enkelt hålla din pekare direkt över något designelement på en webbplats, logotyp, eller bild. Sedan kommer ColorZilla att visa dig den exakta HTML-hex eller RGB-färgkoden för den pixeln. Om du inte vill identifiera de färger som används en efter en, kan du även använda en färgpaletts-generator som kommer att använda en bild. Detta kan exempelvis vara Colormind´s extraherings-verktyg för bild-färger.
Detta är dock inte en så perfekt en lösning som man kan tro. Du måste ta en skärmdump av webbplatsen och ladda upp den. Den genererade paletten kommer heller inte nödvändigtvis att vara 100% lik de faktiska nyanser som används i designen. Om webbplatsen exempelvis innehåller en toning eller en bild med färger bortom huvudfärgschemat, tenderar den genererade paletten att vara felaktig.
Så för tillfället är detta inte det ultimata sättet för att identifiera de exakta färger som används i webbdesign. Det bästa sättet är fortfarande att använda ett färg-identifierande plugin eller tillägg, eller ta en skärmdump och göra saker manuellt i ett fotoredigeringsverktyg som PhotoShop.
Vilket webbplats-färgschema använder vi på Kinsta?
Precis som de flesta existerande webbplatser följer vi på Kinsta ett grundläggande 3-färgs- eller triadiskschema för allt vårt innehåll. Eftersom vi är en hosting-leverantör som fokuserat oss på WordPress, finns det inget behov för oss att ha flera paletter på hela vår hemsida.
Vi använder mörklila (#5333ed) som vår primära färg och turkos (#2cd4d9) för att locka in besökare. Detta görs dock med balanserade nyanser. En dämpad grå färg nyttjas för text (#6E7076).
Men hur gör andra företag?
Låt oss ta reda på det!
26 exempel på förstklassiga webbplats-färgscheman
Vi har sökt igenom webben efter bra exempel på färgscheman och även separerat webbplatserna efter kategori, så det blir lätt för dig att hitta inspiration från relevanta webbplatser.
Fantastiska färgscheman för e-handel
Nedan ska vi gå igenom utmärkta e-handels-färgscheman som matchar deras varumärke och industri.
1. Hudvårds-produkt: Ljus & Lekfull
Bliss’ val av färger är perfekta när det gäller deras varumärke. Färgerna är ljusa och lekfulla och förmedlar företagets budskap om kroppens positivitet och inre lycka.
2. Klädmärke: Klart och koncist
Le Bonnet är ett klädföretag som fokuserar på tydlighet när det gäller färgpaletten på sin webbplats. Några intensiva färger, ihop med en ogenomskinlig beige bakgrundsfärg för att separera produkter. Allt detta bidrar till att höja enkelheten i designen.
3. Klädföretag: Enkelhet
Revidera Concept är en klädmärkes-webbplats. Istället för att förlita sig på färger i webbplatsens färgpalett, används enkla färger och tomt utrymme för att markera färger och mönster av kläderna själva.
Detta tillvägagångssätt kan vara ett utmärkt alternativ för e-handelswebbplatser som vill låta produkten tala för sig själv, snarare än att skapa en häftig design för att berätta historien.
4. Bordsartiklar: Tillförlitlighet och professionalism
My Tableware är en tysk e-handelswebbplats för anpassningsbart porslin och maträtter.
Webbplatsen använder ett enkelt färgschema i mörkblått, ljusbrunt och grått för att förmedla en känsla av professionalism och tillförlitlighet, med en känsla av förfining.
5. Tuggummi: Naturligt och impulsivt
Neuro är ett märke för koffein-tuggummi och tabletter, som syftar till att hjälpa människor att fokusera. Företaget använder en blandning av mjukare färger som turkos, ljusblått, och beige, för att skapa en känsla av naturliga ingredienser.
Det finns även en vädjan till känslor och impuls-beslut med rött och orange. Sammantaget är detta en utmärkt användning av accent-färg.
6. Klockor: Förfining och Lyx
Prime Ambassador är ett svenskt klock-varumärke, med en elegant e-handels webbplats för att lyfta fram produkterna. Färgkombinationerna med en nästan gyllene ljusbrun nyans på mörkgrå bakgrund och träaccenter i bilden ger besökaren en känsla av finess och lyx.
Färgerna är perfekta för att främja en sådan lyxprodukt som en skräddarsydd klocka men skulle känna fel om man sålde vanliga konsumtionsvaror.
7. Byxor: Kreativt & Åtkomligt
Alday är ett märke med komfortabla byxor som är utformade för att passa bättre än massproducerade jeans och chinos som säljs till lägre pris.
Webbplatsen är kreativ och lekfull, med livfulla färgkombinationer som gör att den känns tillgänglig för besökaren och potentiella kunder.
8. Frukt-snacks: Elegant och accentuerande färger
Madies är en ett företag som gör frystorkade frukt-snacks, och riktar sig till en mer modemedveten konsument än märkeslösa torkade frukter som säljs i lösvikt.
Den svarta bakgrunden och den gula personifieringen av mogen mango framhäver enkelheten i designen, vilket leder till en elegant slutprodukt.
9. Custom Fit Denim: Det är levande
Unspun använder klarröd och orange för att väcka webbplatsen till liv. Perfekt för att kommunicera med en publik som har en aktiv och levande livsstil.
Personliga färgscheman och och resebyråers färgscheman
Nedan kan du hitta vårt urval av de bästa exemplen på färgscheman för personliga webbplatser och rese-webbplatser.
10. Kreativ enkelhet
Madeleine Dalla är en New York-baserad fotograf med en angelägen känsla för webbdesign (och ett imponerande portfolio).
Genom att utelämna färg i resten av designen, belyser hon verkligen de levande färgerna i hennes handplockade bilder från vart och ett av hennes markerade projekt. Hon använder frånvaron av färg lika mycket som färgerna själva.
11. Gråskala med ett stänk
Ali Rifai är en Creative art director och det syns på hans webbplats. Genom att använda gråskala med bara en skvätt färg, dras din uppmärksamhet till rätt sökord och kritiska områden i designen, ordet ”original” och det charmiga leendet.
12. Ett med naturen
iFly 50 är en nättidning som släpptes av KLM när de ville fira sitt 50-årsjubileum.
Genom att lyfta fram det blåa i himlen och vattnet, och det gröna gräset och skogen, känner sig alla besökare ett med naturen – ett perfekt förhållningssätt för hemsidan till en naturfotograf.
13. Rent & Professionellt
Benediktas Gylys’s webbplats är ett mästerverk när det gäller ren design. Det finns inget som blir rörigt och detta gäller även färgvalen.
Den primära lila färgen belyser professionalism, och i och med att det bara finns några enstaka färger, tjänar de alla till att markera de kritiska elementen, illustrationerna.
14. Pragmatiska färger
BucketListly använder färger pragmatiskt, med hjälp av den gula färgen för att markera sökord, CTAs, och länder som besökts hittills.
Denna webbsida visar hur mycket värde som kan finnas i en enda färg i en design när du använder den tillsammans med blanksteg och rätt koncept.
15. Elegant enkelhet
Bilden på Lars Franzens webbplats använder en mörk bakgrundsfärg för att få fram färgen och individualiteten hos personerna i porträttet.
16. Futuristiskt överdrag
Dot Lung’s personliga webbplats gör ett bra jobb när det gäller att maximera den enkla färgpaletten med överdrag och ren bakgrundsgrafik. Det lila i bakgrunden skapar en sammanhållen upplevelse från sida till sida till sida.
17. Ljust och mörkt
Love to Iceland är ett bra exempel på hur färgerna i en markerad bild kan skapa stämningen. Uppe till vänster finns den klarblåa isen, upplyst av solljus. Längst ner finns det grottliknande mörkret. Detta skapar en olycksbådande och äventyrlig stämning för besökaren.
Färgscheman för målsidor
Nedan har vi framhävt olika målsidor med unika eller effektiva färgscheman.
18. Skarpa kontraster
Zenly använder skarpt kontrasterande färger för att markera den faktiska funktionaliteten i en levande kart-app (Så här bäddar du in google Maps på WordPress webbplatser). Bakgrunden av rymden får den klotformiga appdesignen att sticka ut och ger den ett futuristiskt utseende.
19. Färg för att markera
Slack använder en beprövad taktik för färgscheman för målsidor, där färger oftast används för att markera viktiga uppmaningar och andra väsentliga element. För en målsida behöver du inte överkomprimera designen, och detta gäller även färger.
Se till att kolla in vår djupgående jämförelse Microsoft Teams vs Slack.
20. Livfulla färger och gnistrande känslor
Spotify använder levande färger för att väcka känslor hos en publik på sin ytterst enkla nya målsida. Färgerna berättar mer av en historia än underrubriken före CTA-knappen. Kolla in vår guide om du funderar på att lansera en podcast snart.
21. Färgkontrast skapar ordning i kaoset
Autonomi använder färger och kontraster för att skapa ordning i en annars kaotisk, animerad design. Det livfulla gula skär igenom och skiljer sig från bakgrunden och andra objekt.
22. Futuristisk färgensemble
Bugsnag använder en varierad samling av färger för att förmedla en futuristisk, högteknologisk känsla med sin platta design. Kombinationen av färger och former gör att besökaren känner att det är 2020, och att de kan lita på att företaget är banbrytande.
23. Levande med färg
Connect Homes målsida väcks till liv med ljusa men fylliga färger. Färgpaletten skapar en spännande balans som förmedlar en modern känsla.
24. Konservativa färger, lekfull design
Plink’s målsida bygger på en relativt konservativ nyans av mörkblått men balanserar ut detta med en lekfull och rolig animation och design.
25. Naturlig livskraft
Travelshift är starkt beroende av färgen grönt för att förmedla en känsla av natur och vitalitet. Istället för att markera CTAs eller nyckel-innehåll med en uppseendeväckande färg som rött eller orange, fungerar den gröna färgen som ett löfte om föryngring.
26. Ljusa färger av hopp
Swab the World använder ett färgschema med ljusa, kontrasterande färger för att förmedla en känsla av hopp. Detta är helt perfekt för målsidan hos en ideell organisation. Färgkrocken jobbar med formerna för att lyfta fram den moderna/futuristiska strategi som de använder för att tackla utmaningen.
Generatorer för Webbplats-färgschema
Om du inte vill plocka ut intilliggande färger, toningar eller nyanser för ditt schema eller din palett manuellt kan du använda onlineverktyg till hjälp. Det finns ett antal kostnadsfria färgscheman eller palettgeneratorer tillgängliga online. Vi kommer att ta en närmare titt på några av de bästa alternativen nedan.
Colormind
Colormind är en AI-driven färggenerator som du kan använda för att generera färger för webbplatser och mallar. Det enda problemet är att du inte kan ställa in en primär färg att extrapolera en palett ifrån, du måste slumpmässigt generera den varje gång. Du kan även extrahera färgpaletter från vilken bild du vill.
Coolors.co
Coolors.co är en webb- och mobilapp som hjälper dig att generera paletter från grunden. Den har nyans-alternativ för varje färgalternativ och andra avancerade verktyg som hjälper dig att fatta effektiva beslut om dina färgscheman.
Paletton
Istället för att generera slumpmässiga scheman ger Paletton dig full kontroll över din palett och vilken färg du vill använda som bas/primär färg. Du kan välja vilken typ av palett du vill ha, oavsett om du vill ha intilliggande färger, ett triadiskt färgschema eller annat. Du kan välja valfri färg från färghjulet.
ColorSpace
ColorSpace genererar färgpaletter baserat på en primär färg som du matar in. Det erbjuds ett brett utbud av stil-alternativ som ger dig mer flexibilitet.
Färgblindhet: Hur man väljer en färgblinds-vänlig palett för sin webbplats
Det sista man bör tänka på när man skapar ett webbplats-färgschema är hur olika människor kommer att se färgerna.
Alla ser inte ”standard”-utbudet av färger. Det finns tre olika huvudtyper av färgblindhet: deuteranopia, protanopia, och tritanopia.
Rödgrön färgblindhet (deuteranopia och protanopia) är den vanligaste formen av färgblindhet. Det påverkar omkring 1 av 12 med nordeuropeisk härkomst. Det är ett så stort antal av befolkningen som påverkas av detta, att det är värt att tänka på när du utformar / väljer ett WordPress-tema.
Blågul färgblindhet är mycket ovanligare och drabbar män och kvinnor på samma sätt.
Hur man väljer en färgblinds-vänlig palett för sin webbplats
Eftersom antalet rödgrön-färgblinda människor är mycket högre än någon annan form av färgblindhet, bör det vara din främsta prioritet när du jobbar med din design. Eftersom de inte kan separera rött, grönt och lila, utan snarare se dem som olika nyanser av gult och blått, vill du undvika att använda kontrasterande färger som kommer att se alltför likadana ut.
- Kontrastera inte grönt med gult eller vice versa.
- Kontrastera inte gult med rött eller orange.
- Kontrastera inte lila med liknande nyanser av blått.
När du väljer fristående primära färger för din logotyp eller design, bör du överväga om det är tilltalande för konsumenter som är färgblinda. Kinstas lila färg är exempelvis fortfarande mörkblå för rödgrön-färgblinda konsumenter. Detta förmedlar ett budskap om tillförlitlighet och trovärdighet. Detta är vad vi står för, så vi vill inte skapa en potentiell konflikt i huvudet på våra framtida kunder.
Sammanfattning
Det mänskliga ögat kan vara kapabelt att separera miljontals olika färgnyanser, men du behöver inte kamma igenom samtliga alternativ för att hitta ett färgschema som fungerar för din webbplats.
Genom att fokusera på ditt varumärke och dina idealkunder kan du begränsa dina val av grundfärger. När du har gjort dina val, kan du lita på att generatorerna för online-paletten slutför din egen färgpalett, eller väljer matchande färger baserat på exempel och preferens.
Med rätt tillvägagångssätt, kan du skapa ett webbplats-färgschema som kan användas som utgångspunkt i din designprocess. Det krävs dock ofta att man anställer rätt webbutvecklare / designer om man vill få ett professionellt utseende som verkligen framhäver varumärket.
Nu är det väl dags att välja teckensnitt?
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
Lämna ett svar