Färglärans grunder för dig som inte är formgivare

Färglära är den samling praktiska idéer som formgivare använder för att välja färger som fungerar tillsammans och gör det de ska göra. Den handlar om sex saker: nyans, färgmättnad, ljushet, temperatur, harmoni och kontrast. Förstår du dem kan du förklara varför en palett känns lugn eller högljudd, varför viss text är svårläst och varför två färger skär sig.

Den här sidan är startpunkten för varje färgartikel i Fältguiden. Varje avsnitt länkar vidare till ett djupare när du behöver det.

Nyans, färgmättnad och ljushet

Vilken färg som helst kan beskrivas med tre egenskaper. Nyans är färgfamiljen: rött, orange, grönt, blått. Färgmättnad (även kallad kromatisk styrka) är hur intensiv den är, från grå till levande. Ljushet är hur nära svart eller vitt den ligger. Ändra en och håll de andra fasta så ser du vad var och en gör.

Det är på de här tre sätten som färgkoder som HSL och OKLCH beskriver färg, vilket gör dem lätta att justera i kod. Färgkoder förklarade går igenom HEX, RGB, HSL och OKLCH.

Varma och kalla färger

Färger har också en temperatur. Rött, orange och gult känns varmt; blått, grönt och violett känns kallt. Varma färger tenderar att kännas närmare och mer energiska, kalla färger längre bort och lugnare. Temperatur är dock relativ: en violett med mycket rött i kan kännas varm bredvid ett rent blått.

Varma och kalla färger går längre, inklusive hur du blandar temperaturer i en gradient.

Färgharmoni och färgcirkeln

Ordna nyanser i en cirkel så ser vissa förhållanden pålitligt balanserade ut. Det är färgharmonierna. De är inte regler, men de är bra utgångspunkter när du är osäker. Guiden om färgcirkeln förklarar hur du läser dem.

Kontrast: varför vissa färger är svåra att läsa

Kontrast är skillnaden mellan två färger. För läsning är det ljusheten som spelar störst roll, inte nyansen. Röd text på grön bakgrund kan vara två mycket olika nyanser och ändå vara svårläst, eftersom de två kan ha liknande ljushet. Många med nedsatt färgseende kan inte skilja dem åt alls.

Gråskaletestet är den snabbaste kontrollen: gör din design grå och se om orden fortfarande syns. För text sätter Web Content Accessibility Guidelines minsta kontrastkvoter, 4,5:1 för brödtext och 3:1 för stor text. Färgkontrast förklarar hur du mäter dem.

Proportion: hur mycket av varje färg

Samma fem färger kan se lugna eller kaotiska ut beroende på hur mycket av var och en du använder. En användbar grundinställning är en dominerande färg som täcker det mesta av ytan, en eller två stödjande färger och en liten accent för det du vill ska synas. 60-30-10-regeln är den vanliga versionen av den idén.

Vad färger betyder

Färger bär på associationer, men de associationerna är inlärda, inte inbyggda, och de varierar med kultur och sammanhang. Grönt kan betyda natur, pengar eller gå; rött kan betyda fara, lycka eller rea. Se betydelse som en fråga om din målgrupp och kategori snarare än en fast ordbok. Färgpsykologi skiljer det som håller från det som inte gör det, och färgers betydelse runt om i världen visar hur mycket de skiljer sig.

Att sätta färglära i arbete

1. 1

   Börja från en färg

   Välj den färg som betyder mest: din varumärkesfärg, eller en hämtad från ett foto. Att plocka fram en palett ur en bild hjälper.

2. 2

   Välj en harmoni

   Bestäm om paletten ska vara lugn (monokrom eller analog) eller energisk (komplementär eller triad).

3. 3

   Bygg ett ljushetsspann

   Lägg till en mycket mörk och en mycket ljus version för text och bakgrunder. De flesta paletter misslyckas för att de saknar dem.

4. 4

   Fördela proportionerna

   Bestäm vilken färg som dominerar, vilken som stöder och vilken som är accenten.

5. 5

   Testa kontrast och sammanhang

   Kontrollera textkontrasten, kör gråskaletestet och titta på paletten i en verklig layout, inte bara som färgrutor.

För varumärkesarbete gör så väljer du varumärkesfärger de här stegen till en fullständig metod.