Stärk budskapet med komplement­färger

Varje färg har en motpart, en motsatsfärg. Tillsammans kallas de komplementfärger. Här får du koll på vad det är och hur du kan använda dem.

Vad är komplementfärger?

Enkelt förklarat så är komplementfärger de två färger som ligger längst bort ifrån varandra i ett färghjul. Genom att dra ett rakt streck genom hjulet får du de två färger som framhäver varandra mest, det vill säga färger som är varandras motsatser.

Så fungerar färghjulet

För att förstå hur komplementfärgerna ens blir komplementfärger är det bra att ha koll på färghjulets uppbyggnad.

Primära och sekundära färger

Ett färghjul består av olika nivåer av färger. De primära färgerna (ofta kallade grundfärger) är rött, blått och gult. Dessa tre färger går inte att blanda fram och är grunden till alla andra färger. Om du blandar lika delar av de primära färgerna får du fram de sekundära: lila, orange och grönt. De flesta färghjul visar även en tredje nivå av färger. Dessa får du om du blandar primära och sekundära färger.

Utifrån detta hjul blir komplementfärgerna mest synliga.

Därför saknas svart och vitt i färghjulet

Svart och vitt finns inte i färghjul eftersom de inte räknas som färger i samma bemärkelse som övriga. De kan ju dock ändå fungera som komplementfärger till varandra. Kort sammanfattat kan man säga att vitt är alla färger som finns, svart inga färger alls.

Så här funkar det: solens strålar kallas vitt ljus och består av regnbågens alla färger. Varje färg har en egen våglängd. När det vita ljuset träffar en svart yta absorberas alla våglängder – alltså blir det ingen färg kvar för ögat att uppfatta. Motsatt fungerar det vid vitt, där reflekteras alla färger tillbaka till ögat.

Komplementfärger och simultankontrast

Rätt använt kan komplementfärger skapa dynamik som är lockande för ögat. Faktum är att ögat själv frammanar komplementfärger, vare sig vi vill eller inte. Det kallas simultankontrast och är egentligen ett optiskt fenomen och inget som syns på riktigt. Men att dra nytta av kunskapen är effektivt, framför allt inom reklam och marknadsföring.

Du kan exempelvis förstärka en färg genom att lägga den på en bakgrund som består av en direkt komplementfärg eller nyanser av densamma. Här har vi lagt en likadan gul citron på två olika bakgrunder. I exempel A upplevs citronen lysa medan den i exempel B upplevs mer matt.

A.

B.

Apropå citroner, i mataffären paketeras ofta frukt och grönt i förpackningar färgade av varans komplementfärg, exempelvis röda tomater i gröna förpackningar.

Det är dock inte alltid en fördel att ögat själv förstärker en färg. Fel bakgrund kan också förvränga en färg. Om du vill dämpa simultankontrasten låter du istället färgen runt omkring ett objekt blandas in i den dominerande objektfärgen. Det kallas för kompensation.

A.

B.

I bild A syns två trekanter bestående av samma grå färg. Men på grund av att den högra trekanten har grön bakgrund upplevs den rödare. Det beror på att det gröna får vårt öga att se komplementfärgen röd per automatik. För att undvika det här, och därmed dämpa simultankontrasten, kan du blanda i lite grönt in den högra trekanten i bild B. På så sätt upplevs båda trekanterna ha samma färg igen.

Komplementfärger i webbdesign

Ett annat exempel på när komplementfärger är viktigt är vid design av knappar på en webbplats. En knapp är till för att leda besökaren vidare, oavsett om det handlar om att köpa eller läsa mer om något. Den behöver därför kommunicera med användaren.

Men den perfekta knappfärgen finns inte, trots att debatten gått het om det är gröna eller röda knappar som konverterar bäst. Konverteringsgeniet Angie Schottmuller har sammanfattat hur man kan använda komplementfärger i sin webbdesign i något hon kallar Clockwork Conversion Color Test.

Det här bygger på att det är färgerna runt omkring knappen som bestämmer färgen på den (något förenklat). Börja med att hitta den dominerande färgen på din webbplats och märk ut den på färghjulet, se ovan. Dra sedan ett rakt streck över hjulet för att få fram din webbplats komplementfärg, din knappfärg!