60-30-10-regeln
Det här är den mest användbara regeln för att fördela färger. Den kommer från inredning, men fungerar för alla projekt.
- 60 %: dominerande färg. Oftast en neutral eller mjuk nyans. Den täcker bakgrunder och stora ytor.
- 30 %: sekundär färg. Den ger personlighet. Använd den för block, menyer eller möbler.
- 10 %: accentfärg. Den starkaste. Använd den för knappar, ikoner eller detaljer.
Till exempel: benvitt för 60 %, marinblått för 30 % och orange för 10 %.
Du behöver inte mäta exakt. Tanken: en färg leder, en stöttar och en sticker ut.
Neutrala färgers roll
Neutrala färger är vitt, svart, grått, beige, krämvitt och ljusa bruna nyanser. De passar med nästan allt.
De ger ögonen vila och låter starka färger komma till sin rätt. En färgpalett utan neutrala färger känns oftast tröttsam.
- Vitt och benvitt: renhet och rymd.
- Grått: modernt och återhållsamt. Välj varma eller kalla grå som passar resten av färgpaletten.
- Beige och sand: värme och naturlighet.
- Svart eller nästan svart: elegans och kontrast. För text är en mycket mörk grå oftast behagligare än helt svart.
Kombinera efter temperatur
Färger är varma (rött, orange, gult) eller kalla (blått, grönt, lila). Det finns tre enkla sätt att kombinera dem:
- Bara varma färger: mysigt och energiskt. Perfekt för restauranger eller vänliga varumärken.
- Bara kalla färger: lugnt och professionellt. Perfekt för vård, teknik eller finans.
- Kall bas med en varm accent: det mest mångsidiga alternativet. Den varma accenten drar blicken mot en lugn bakgrund.
Det som oftast går fel: många starka varma och kalla färger samtidigt, utan en dominerande färg.
Kontrast för text
En vacker färg är meningslös om texten inte går att läsa. Kontrasten mellan text och bakgrund är avgörande för läsbarhet och tillgänglighet.
- Använd mörk text på ljus bakgrund eller ljus text på mörk bakgrund.
- Undvik gul, ljusgrön eller ljusgrå text på vitt.
- Lägg inte mättade komplementfärger ovanpå varandra, som rött på grönt. Det flimrar och tröttar ögonen.
- WCAG-riktlinjerna kräver ett kontrastförhållande på minst 4,5:1 för normal text och 3:1 för stor text.
Du kan testa vilket färgpar som helst med vår kontrastkontroll.
15 färgkombinationer som alltid fungerar
De här paren är en säker utgångspunkt. Använd dem som bas och lägg till en neutral färg eller en accent vid behov.
- Marinblått och krämvitt: klassiskt, seriöst och lättläst.
- Svart och guld: lyx och elegans.
- Blått och orange: komplementärt och fullt av energi.
- Granngrönt och beige: naturligt och lugnt.
- Rosa och antracit: modernt och balanserat.
- Gult och svart: maximal kontrast, perfekt för varningar.
- Vinrött och sand: varmt och sofistikerat.
- Turkos och korall: fräscht och somrigt.
- Lila och ljuslila: monokromt och kreativt.
- Brunt och salviagrönt: jordnära, perfekt för naturmärken.
- Grått och persika: mjukt och vänligt.
- Petroleumblått och ljusgult: lugnt med en touch av ljus.
- Terrakotta och benvitt: varmt och medelhavsinspirerat.
- Mörk petrol och senapsgult: retro och med karaktär.
- Vitt och rött: direkt, energiskt och väl synligt.
Många fler idéer med HEX-koder hittar du på vår sida med färgkombinationer.
Vilka färger passar till vilken färg
Har du redan en huvudfärg ger den här listan dig en snabb start:
- Rött: vitt, svart, grått, marinblått och beige. För något djärvt: rosa eller orange.
- Orange: marinblått, turkos, vitt, krämvitt och brunt.
- Gult: grått, svart, marinblått och vitt. Senapsgult passar bra med mörkgrönt.
- Grönt: beige, vitt, brunt, guld och mjukt rosa.
- Blått: vitt, orange, grått, gult och korall. Marinblått fungerar nästan som en neutral färg.
- Lila: grått, ljuslila, guld, salviagrönt och vitt.
- Rosa: grått, marinblått, olivgrönt, vitt och guld.
- Brunt: krämvitt, grönt, petroleumblått, orange och benvitt.
Du märker säkert att neutrala färger finns med i nästan varje lista. De är den säkraste partnern till en stark färg.
Så skapar du din egen kombination
- Välj en huvudfärg utifrån vad du vill uttrycka.
- Leta upp en sekundär färg i färgcirkeln: en granne för något lugnt, en motsats för något som sticker ut.
- Lägg till en eller två neutrala färger.
- Välj en accentfärg för det viktigaste.
- Testa färgpaletten på ett riktigt exempel: en webbsida, en bild i en presentation eller ett foto av rummet.
Om du tvekar, använd färre färger. Tre till fem färger räcker för nästan alla projekt.
Vanliga misstag med färger
- För många färger. Resultatet ser rörigt ut och ingenting sticker ut.
- Att ge alla färger lika stor vikt. Utan en dominerande färg vet ögat inte var det ska titta.
- Att glömma kontrasten. Text som inte går att läsa eller knappar som ingen ser.
- Att mätta allt. Mycket starka färger tröttar. Kombinera dem med mjukare nyanser.
- Att ignorera sammanhanget. En färg ser olika ut i dagsljus, på en skärm och på papper.
- Att kopiera utan att anpassa. En färgpalett som fungerar för ett varumärke passar inte nödvändigtvis din målgrupp.
- Att blanda neutrala färger med olika temperatur. En kall grå bredvid en varm beige kan se smutsig ut. Välj neutrala färger från samma familj.
- Att inte testa på flera skärmar. En färg kan vara vacker på datorn och blek i mobilen. Kontrollera den alltid på mer än en enhet.