Artikeln uppdaterad 2024-08-27.
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 dagliga arbete på Republic där vi arbetar mycket med utformning av digitala gränssnitt så handlar inte färg enbart om en estetisk faktor utan något som verkligen kan hjälpa användaren att förstå vad som händer och vägleda ens val. 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. Dock så skall man inte bortse från att vi enligt forskning upplever färger på ett visst sätt generellt och att det inte bara handlar om att grönt är skönt och gult är fult eller ens egna personliga referenser till en färg.

Att bestämma sig för ett helt färgschema kan vara än svårare än att bara ta fram den första färgen, enklast är att begränsa sig till att hitta circa 3-5 färger som går att kombinera. Oftast har man en huvudfärg och några kompletterande färger som fungerar bra att kombinera 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ärgers betydelse

Det har gjorts omfattande forskning på hur vi människor reagerar känslomässigt på olika färger. Ett kanadensiskt företag som heter Paper Leaf Design har tagit fram en detaljerad illustration för att presentera en del av forskningen på ämnet på ett mer överskådligt och inspirerande sätt. Denna kan fungera utmärkt som ett verktyg för alla som vill se till att den färg som de använder representerar 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öretag inte når ut på effektivaste sätt, och i det långa loppet, bidra till förlust av intäkter. Dock så går det inte att enbart förlita sig på forskning när det gäller en upplevelse som går genom ögat och vårt personliga filter. Färger är samtidigt något som det går trender i och använt på rätt sätt så kan ett vågat färgschema som bryter vissa regler, i rätt sammanhang bli något unikt och som når genom bruset. Även om grundläggande färglära alltid kommer att vara en bra utgångspunkt för färgscheman, så var inte rädd för att experimentera och prova något helt annat. Som formgivare måste vi göra bedömningar utifrån vad vi ser och ibland arbeta utanför våra givna 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.

Exempel

Här kan vi även se exempel på olika företags färgval och färgens värdeord.

I takt med att ett plattare designmanér (utan skuggor och färgtoningar) tar fäste så ser vi att företag gör allt djärvare färgteman för att sina logotyper skall sticka ut. Se några kända exempel:

Färgers psykologiska effekter

Här är en kort sammanfattning om färger och deras psykologiska effekter:

Blå färg väcker känslor som trygghet och tillit. Det är också en lugnande färg som får en att känna sig avslappnad och lugn.
Grön förknippas ofta med naturen och lugnet, en mörkare grön kan även dra tankarna till pengar.
Brun ger en jordnära känsla, men om de används på fel sätt kan det upplevas som smutsig.
Gult är en mycket energisk färg, positiv och varm
Röd är en färg som är nära knuten till passion och vrede.
Lila är en färg som ofta används för att beteckna kunglighet eller andlighet.
Rosa uppfattas ofta som en feminin färg och beroende på nyans av rosa som du använder kan den upplevas som spännande, rolig och romantisk.
Orange är en varm färg som upplevs som lekfull och rolig.
Svart ger en känsla av hög klass och utstrålar elegans. Du kan ofta se ett enkelt svart färgtema som används för lyx och hög kvalitet.
Vit representerar renhet och renlighet. Det ger även en minimalistisk och luftig känsla.

Verktyg och Inspiration

Det finns idag ett otal värdefulla verktyg och sajter som kan inspirera och underlätta ert färgval. Här presenterar vi ett urval av dem som vi tycker är bra.

Verktyg

Color Tool (Material Design)

Experimentera med färger och testa det direkt på UI-komponenter.
material.io/color

App för inspirerade färgpaletter från en bild

Adobe Color CC är en iOS-app som gör att du enkelt få fram en färgpalett utifrån ett foto. Ta bara ett foto eller välj ett befintligt i din mobil, och sedan kan du skapa ditt färgtema. Den erbjuder ett interaktivt färghjul, förinställda färglägen, och möjlighet att dela, tagga och kommentera.
adobe.com/se/products/color.html

Adobe Color CC

Adobe Color CC (tidigare Adobe Kuler) finns även som ett onlineverktyg för att skapa, utforska och dela färger i ett globalt community. Ett utmärkt verktyg för att ta fram vilka färger som passar ihop med varandra.
color.adobe.com

Material Design Color Palette Generator

Välj dina favoritfärger och få din palett automtiskt genererad och nedladdningsbar.
www.materialpalette.com

Bildsök utifrån exakt färgval

MulticolorEngine beskriver sin tjänst som den "bästa färg-sökmotorn i världen". Här kan man söka bland över 20 miljoner Creative Common-bilder på Flickr. Du kan finjustera din sökning genom att välja upp till fem färger, justera den procentuella andelen av varje färg och sökresultatet kommer smidigt spegla de ändringar du gör i din palett.
labs.tineye.com/multicolr

Paletton

Ännu ett kreativt färghjul att leka med för att testa och jämföra olika färgpaletter. Du kan enkelt även förhandsgranska hur färgschemat sen ser ut mot en ljus eller mörk bakgrund.
paletton.com

Colorotate

En iPad-app som erbjuder "snabb och intuitiv färgredigering".
colorotate.org

Colorhexa

Fyll i ett färgvärde och få en detaljerad beskrivning av färgen samt en automatiskt konvertering till fler "enhetsvärden" (hexadecimalt, Binärt, RGB, CMYK, HSL, HSV mfl). Det presenteras även förslag på passande färgscheman utifrån er grundfärg.
colorhexa.com

Colllor

Colllor erbjuder ett smidigt sätt att generera en konsekvent färgpalett med bara några klick.
colllor.com

Color by Hailpixel

Ett lekfullt och enkelt sätt att skapa en färgpalett.
color.hailpixel.com

Check my colours

Fyll i er webbadress och få en sammanställning över er sajts färger.
checkmycolours.com

Open Color

Open Color är ett färgschema specialframtaget för god UI-design. Du kan använda den för typsnitt, bakgrunder mm. Den innehåller en gråskala och 12 stycken färger.
yeun.github.io/open-color

Inspiration

Colord

Colrd erbjuder inspiration utifrån enskilda färger, hela paletter, toningar, mönster och bilder. Vald palett kan sedan redigeras enkelt och nya passande färger dyker automatisk upp.
colrd.com

Color Hunt

Här visas samlingar av vackra färgkombinationer (uppdateras dagligen).
colorhunt.co

Designspiration.net

Här erbjuds kreativa illustrationer och bilder snarare än strikta färgpaletter. Du kan enkelt själv välja att sortera hela sajtens innehåll utifrån dina färgval.
designspiration.net

The Days Color

Här presenteras dagligen inspirerande färgscheman.
thedayscolor.com

Palet tab

Palet tab är en plugin till Chrome som presenterar inspirerande färgpaletter och Google-typsnitt varje gång du öppnar en ny flik i din webbläsare.
palettab.com

Colour Lovers

Colour Lovers är en kreativ samlingsplats där kreatörer från hela världen skapar

och delar färger, paletter, mönster och diskuterar de senaste trenderna.
colourlovers.com

Ytterligare studier och länkar

Det finns som sagt många studier som har dokumenterat effekten av varje färg, och om du vill ha mer information så finns det mer att läsa om ämnet i nedanstående artiklar och dokument: