Välj rätt färger för ditt varumärke

Varma och kalla färger – vad betyder det?

I färgcirkeln brukar rött, orange och gult beskrivas som varma färger, medan blått, grönt och lila räknas som kalla. Varma färger kan ge ett energiskt och inbjudande uttryck. Kalla färger kan upplevas som lugna eller återhållsamma. Nyans, ljushet och färgerna runt omkring påverkar helheten.

Börja därför med känslan du vill skapa, men prova färgerna tillsammans med riktiga bilder och texter innan du bestämmer dig.

Färgpsykologi – vanliga associationer

Hur färger uppfattas varierar mellan kulturer, branscher och personer. Se associationerna nedan som möjliga utgångspunkter, inte som regler för vad en färg betyder eller hur kunder kommer att agera.

• Vitt: kan förknippas med enkelhet, renhet och utrymme. En ljus bakgrund behöver tillräckligt mörk text för att bli läsbar.
• Rött: kan signalera energi, passion eller fara. Det kan dra uppmärksamheten till ett erbjudande, men måste passa sammanhanget.
• Orange: kan ge ett varmt, lekfullt eller socialt uttryck.
• Gult: kan associeras med glädje och kreativitet. Ljusgul text på vit bakgrund är ofta svår att läsa.
• Grönt: kan föra tankarna till natur, hälsa och balans. Färgen i sig visar inte att ett företag arbetar hållbart.
• Blått: kan upplevas som stabilt och tryggt och förekommer ofta inom teknik och finans.
• Lila: kan skapa ett kreativt, exklusivt eller drömskt uttryck beroende på nyans.
• Rosa: kan uppfattas som mjukt, lekfullt eller kraftfullt. Uttrycket beror på nyansen och behöver inte riktas till en viss målgrupp.
• Svart: kan signalera elegans och auktoritet. Stora mörka ytor kan också göra uttrycket tungt.

Så kombinerar du färger med färgcirkeln

Färgcirkeln hjälper dig att hitta kombinationer. Fyra vanliga metoder är:

• Monokrom palett: en färg i flera ljusa och mörka nyanser ger ett sammanhållet uttryck.
• Analoga färger: färger bredvid varandra i cirkeln kan ge mjuka övergångar.
• Komplementfärger: färger mittemot varandra, som blått och orange, kan skapa tydlig visuell spänning.
• Triadiska färger: tre färger jämnt fördelade i cirkeln ger fler möjligheter till variation. Låt gärna en dominera och använd de andra sparsamt.

En tydlig skillnad i kulör betyder inte automatiskt att texten får tillräcklig kontrast. Läsbarheten måste kontrolleras separat.

Färger på webben – testa kontrast och läsbarhet

En palett behöver fungera för text, länkar och knappar, inte bara se bra ut på en moodboard. WCAG:s kriterium för textkontrast på nivå AA anger minst 4,5:1 för vanlig text och 3:1 för stor text. Stor text betyder här minst 24 CSS-pixlar, eller cirka 18,7 CSS-pixlar om den är fet. En rubrik är alltså inte automatiskt stor text.

Kontrollera varje kombination som faktiskt används: brödtext mot bakgrund, knapptext mot knappfärg och text ovanpå bilder. Kraven och undantagen beskrivs i W3C:s vägledning om textkontrast. Ett godkänt kontrastvärde är en del av tillgängligheten, inte ett bevis på att hela hemsidan uppfyller WCAG.

Förmedla heller inte viktig information enbart med färg. En felmarkering i ett formulär behöver exempelvis en begriplig text, och länkar bör gå att skilja från omgivande text även utan att se färgskillnaden.

Testa accentfärgerna på riktiga knappar. Det som fungerar som dekoration kanske inte fungerar bakom liten text. Färgen behöver också samspela med knappens placering och budskap. Läs mer om detta i vår guide till konverteringsoptimering.

Välj färger utifrån ditt varumärke

Innan du väljer palett, fundera på följande:

• Vilka ord beskriver verksamheten och vilken känsla vill du förmedla?
• Vilka färger används redan i logotyp, bilder och andra material?
• Hur kan du skilja dig från konkurrenterna utan att tappa tydlighet?
• Var ska färgerna användas – på webben, i tryck eller båda?
• Fungerar kombinationerna för målgruppen och innehållet?

Färger som används konsekvent på hemsidan, i sociala medier och i andra material kan göra varumärket lättare att känna igen. En enkel uppsättning färgkoder och användningsregler hjälper dig att hålla ihop uttrycket.

Så bygger du en användbar färgpalett

En praktisk palett för webbdesign kan delas upp i tre roller:

• Primärfärger: de färger som bär varumärkets uttryck.
• Sekundärfärger: kompletterande färger som ger variation mellan sektioner.
• Accentfärger: färger för exempelvis knappar eller detaljer som behöver uppmärksamhet.

Lägg även till ljusa och mörka neutrala färger för bakgrunder och text. Prova sedan paletten tillsammans med typografi, bildspråk och innehåll. Dokumentera vilka färgpar som fungerar för läsbar text och vilka som bara ska användas som dekoration.

Varför färger ser olika ut på skärm och i tryck

Skärmar visar färger med ljus i RGB. På webben anges färger ofta med HEX-koder, som beskriver RGB-värden. Tryck använder vanligtvis CMYK eller specificerade dekorfärger, exempelvis Pantone. Papper, tryckmetod och skärmens inställningar påverkar resultatet.

En HEX-kod garanterar därför inte samma färg i tryck. Om paletten ska användas på skyltar eller trycksaker behöver den anpassas tillsammans med tryckeriet och gärna kontrolleras med ett provtryck.

Behöver du hjälp med färgerna på din hemsida?

OOW hjälper dig att ta fram färger, typografi och ett sammanhängande uttryck som en del av vår webbdesign. Utgångspunkten är ditt varumärke, ditt innehåll och vad besökarna behöver kunna göra. Hör av dig så pratar vi om hur din hemsida kan utvecklas.