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ä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.

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:

• A Nerd’s Guide to Col­or on the Web
• col​or​mat​ters​.com
• wikipedia​.org/​c​o​l​o​r​_​t​heory
• Lad­da ner Googles rek­om­mender­ade färg­palet­ter (för Pho­to­shop & Illustrator)
• Lad­da ner ​“Col­or Theory”-illustrationen som en PDF
• Årets färg 2015 (Pan­tone)
• What colour is it? (kloc­ka som ändrar färg)
• It’s only col­or (bra artikel)