Skip to content

Republic / Artiklar /

Artikeln uppdaterad 2020-05-25.
Skriven av Anders Wideskott.

Att ta fram ett färgschema

I den här artikeln kommer vi att lyfta fram en del forskning på ämnet färger men mest presentera tips, verktyg och inspiration för er att hitta rätt färg/färgschema.

Intro

I vårt dagli­ga arbete på Repub­lic där vi arbe­tar myck­et med utformn­ing av dig­i­ta­la gränss­nitt så hand­lar inte färg enbart om en estetisk fak­tor utan något som verk­li­gen kan hjäl­pa använ­daren att förstå vad som hän­der och vägle­da ens val. I den här artikeln kom­mer vi att lyf­ta fram en del forskn­ing på ämnet färg­er men mest pre­sen­tera tips, verk­tyg och inspi­ra­tion för er att hit­ta rätt färg/​färgschema. Dock så skall man inte bortse från att vi enligt forskn­ing upplever färg­er på ett visst sätt generellt och att det inte bara hand­lar om att grönt är skönt och gult är fult eller ens egna per­son­li­ga ref­er­enser till en färg.

Att bestäm­ma sig för ett helt färgschema kan vara än svårare än att bara ta fram den förs­ta fär­gen, enklast är att begrän­sa sig till att hit­ta cir­ca 3 – 5 färg­er som går att kom­bin­era. Oftast har man en huvud­färg och några kom­plet­terande färg­er som funger­ar bra att kom­bin­era med varandra.

Färger spelar en viktig roll i våra dagliga liv. Färger kan motivera vårt tänkande, få oss att ändra beslut och orsaka reaktioner. Färger kan irritera eller lugna dina ögon, höja blodtrycket eller öka din aptit. När de används på rätt sätt, kan färger även spara på energiförbrukningen.

– Colormatters.com

Färg­ers betydelse

Det har gjorts omfat­tande forskn­ing på hur vi män­niskor rea­ger­ar känslomäs­sigt på oli­ka färg­er. Ett kanaden­siskt före­tag som het­er Paper Leaf Design har tag­it fram en detal­jer­ad illus­tra­tion för att pre­sen­tera en del av forsknin­gen på ämnet på ett mer över­skådligt och inspirerande sätt. Den­na kan fungera utmärkt som ett verk­tyg för alla som vill se till att den färg som de använ­der rep­re­sen­ter­ar dem på rätt sätt.

Det finns de som menar att fel färgval för ditt varumärke kan innebära att ert före­tag inte når ut på effek­ti­vaste sätt, och i det lån­ga lop­pet, bidra till för­lust av intäk­ter. Dock så går det inte att enbart för­li­ta sig på forskn­ing när det gäller en upplevelse som går genom ögat och vårt per­son­li­ga fil­ter. Färg­er är sam­tidigt något som det går tren­der i och använt på rätt sätt så kan ett vågat färgschema som bry­ter vis­sa regler, i rätt sam­man­hang bli något unikt och som når genom bruset. Även om grundläg­gande fär­glära alltid kom­mer att vara en bra utgångspunkt för färgsche­man, så var inte rädd för att exper­i­mentera och pro­va något helt annat. Som for­m­gi­vare måste vi göra bedömningar utifrån vad vi ser och ibland arbe­ta utan­för våra giv­na ramar.

Kompletterande färger

Kompletterande paletter skapas med färger som sitter mittemot varandra på hjulet för att få en känsla av balans. Liksom analoga paletter, kan man lägga till olika nyanser och expandera detta system. Detta är särskilt användbart för att undvika en allt för hård kontrast (som kan upplevas som ansträngande för ögonen) när två motsatta färger är placerade bredvid varandra. Om kombinationen är allt för skärande eller störande, separera dem med en övergångsfärg eller ett vitt utrymme. Det breda utbudet som ett kompletterande system erbjuder gör denna palett extremt mångsidig, intressant och balanserad.

Triadisk medtod

Den triadiska metoden består av tre huvudfärger jämnt fördelade på hjulet, vilket blir en mycket varierad palett. Detta kräver lite mer eftertanke och experimenterande, eftersom det innebär ett större antal nyanser att ta hänsyn till.

De kontrasterande färgerna kan mjukas upp genom användandet av olika nyanser. Det går även att komplettera med ytterligare färger som går i samma nyans. Det kan tex vara ett bra att lägga till lite neutrala toner för att kompensera de ljusare färgerna.

Analoga paletter

Analoga paletter använder färger som ligger nära varandra på färghjulet. Dessa paletter gör vanligtvis ett bra jobb att kommunicera konsekvens och enhetlighet inom design. De är också relativt lätta att arbeta med eftersom det inte finns en stor differentiering i nyanserna. Däremot kan det uppfattas som lite kontrastlöst då färgerna är såpass lika.

Exem­pel

Här kan vi även se exem­pel på oli­ka före­tags färgval och fär­gens värde­ord. {image‑2}

I takt med att ett plattare design­manér (utan skug­gor och färgtoningar) tar fäste så ser vi att före­tag gör allt djär­vare färgte­man för att sina logo­typer skall stic­ka ut. Se några kän­da exempel: 

Färg­ers psykol­o­giska effekter

Här är en kort sam­man­fat­tning om färg­er och deras psykol­o­giska effekter:

  • Blå färg väck­er känslor som tryg­ghet och tillit. Det är ock­så en lug­nande färg som får en att kän­na sig avs­lapp­nad och lugn.
  • Grön förknip­pas ofta med naturen och lugnet, en mörkare grön kan även dra tankar­na till pengar.
  • Brun ger en jord­nära känsla, men om de används på fel sätt kan det uppl­evas som smutsig.
  • Gult är en myck­et ener­gisk färg, pos­i­tiv och varm
  • Röd är en färg som är nära knuten till pas­sion och vrede.
  • Lila är en färg som ofta används för att beteck­na kung­lighet eller andlighet.
  • Rosa upp­fat­tas ofta som en fem­i­nin färg och beroende på nyans av rosa som du använ­der kan den uppl­evas som spän­nande, rolig och romantisk.
  • Orange är en varm färg som upplevs som lek­full och rolig.
  • Svart ger en känsla av hög klass och utstrålar ele­gans. Du kan ofta se ett enkelt svart färgtema som används för lyx och hög kvalitet.
  • Vit rep­re­sen­ter­ar ren­het och ren­lighet. Det ger även en min­i­mal­is­tisk och luftig känsla. 

Verk­tyg och Inspiration

Det finns idag ett otal värde­ful­la verk­tyg och sajter som kan inspir­era och under­lät­ta ert färgval. Här pre­sen­ter­ar vi ett urval av dem som vi tyck­er är bra.

Verk­tyg

Col­or Tool (Mate­r­i­al Design)

Exper­i­mentera med färg­er och tes­ta det direkt på UI-kom­po­nen­ter.
mate​r​i​al​.io/​color

App för inspir­erade färg­palet­ter från en bild

Adobe Col­or CC är en iOS-app som gör att du enkelt få fram en färg­palett utifrån ett foto. Ta bara ett foto eller välj ett befintligt i din mobil, och sedan kan du ska­pa ditt färgtema. Den erb­jud­er ett inter­ak­tivt färghjul, förin­ställ­da fär­glä­gen, och möj­lighet att dela, tag­ga och kom­mentera.
adobe​.com/​s​e​/​p​r​o​d​u​c​t​s​/​c​o​l​o​r​.html

Adobe Col­or CC

Adobe Col­or CC (tidi­gare Adobe Kuler) finns även som ett onlin­ev­erk­tyg för att ska­pa, utfors­ka och dela färg­er i ett glob­alt com­mu­ni­ty. Ett utmärkt verk­tyg för att ta fram vil­ka färg­er som pas­sar ihop med varan­dra.
col​or​.adobe​.com

Mate­r­i­al Design Col­or Palette Generator

Välj dina favorit­färg­er och få din palett automtiskt gener­erad och ned­laddnings­bar.
www​.mate​ri​al​palette​.com

Bild­sök utifrån exakt färgval

Mul­ti­col­orEngine beskriv­er sin tjänst som den bäs­ta färg-sök­mo­torn i världen”. Här kan man söka bland över 20 miljon­er Cre­ative Com­mon-bilder på Flickr. Du kan fin­justera din sökn­ing genom att väl­ja upp till fem färg­er, justera den pro­centuel­la ande­len av var­je färg och sökre­sul­tatet kom­mer smidigt spegla de ändringar du gör i din palett.
labs​.tin​eye​.com/​m​u​l​t​icolr

Palet­ton

Ännu ett kreativt färghjul att leka med för att tes­ta och jäm­föra oli­ka färg­palet­ter. Du kan enkelt även förhands­grans­ka hur färgschemat sen ser ut mot en ljus eller mörk bak­grund.
palet​ton​.com

Col­oro­tate

En iPad-app som erb­jud­er snabb och intu­itiv fär­gredi­ger­ing”.
col​oro​tate​.org

Col­orhexa

Fyll i ett färgvärde och få en detal­jer­ad beskrivn­ing av fär­gen samt en automa­tiskt kon­ver­t­er­ing till fler enhetsvär­den” (hexa­dec­i­malt, Binärt, RGB, CMYK, HSL, HSV mfl). Det pre­sen­teras även förslag på pas­sande färgsche­man utifrån er grund­färg.
col​orhexa​.com

Col­l­lor

Col­l­lor erb­jud­er ett smidigt sätt att gener­era en kon­sekvent färg­palett med bara några klick.
col​l​lor​.com

Col­or by Hailpixel

Ett lek­fullt och enkelt sätt att ska­pa en färg­palett.
col​or​.hailpix​el​.com

Check my colours

Fyll i er web­badress och få en sam­manställ­ning över er sajts färg­er.
check​my​colours​.com

Open Col­or

Open Col­or är ett färgschema spe­cial­fram­taget för god UI-design. Du kan använ­da den för typ­snitt, bak­grun­der mm. Den innehåller en gråskala och 12 sty­ck­en färg­er.
yeun​.github​.io/​o​p​e​n​-​color

Inspi­ra­tion

Col­ord

Col­rd erb­jud­er inspi­ra­tion utifrån enskil­da färg­er, hela palet­ter, toningar, mön­ster och bilder. Vald palett kan sedan redi­g­eras enkelt och nya pas­sande färg­er dyk­er automa­tisk upp.
col​rd​.com

Col­or Hunt

Här visas sam­lin­gar av vack­ra färgkom­bi­na­tion­er (upp­dat­eras dagli­gen).
col​orhunt​.co

Design​spi​ra​tion​.net

Här erb­juds kreati­va illus­tra­tioner och bilder snarare än strik­ta färg­palet­ter. Du kan enkelt själv väl­ja att sortera hela sajtens innehåll utifrån dina färgval.
design​spi​ra​tion​.net

The Days Color

Här pre­sen­teras dagli­gen inspirerande färgsche­man.
the​days​col​or​.com

Palet tab

Palet tab är en plu­g­in till Chrome som pre­sen­ter­ar inspirerande färg­palet­ter och Google-typ­snitt var­je gång du öpp­nar en ny flik i din web­bläsare.
palet​tab​.com

Colour Lovers

Colour Lovers är en kreativ sam­lingsplats där kreatör­er från hela världen skapar

och delar färg­er, palet­ter, mön­ster och diskuter­ar de senaste tren­der­na.
colourlovers​.com

Ytterli­gare studi­er och länkar

Det finns som sagt mån­ga studi­er som har doku­menter­at effek­ten av var­je färg, och om du vill ha mer infor­ma­tion så finns det mer att läsa om ämnet i nedanstående artik­lar och dokument: