Om du minns så långt tillbaka som till januari var ett av mina mål för 2013 att lära mig mer om färg och att dela med mig av det jag lärt mig till dig. Jag har tidigare talat om hur jag känner att mina färdigheter att arbeta med färg är bristfälliga och jag sa att jag någon gång i år skulle ta några böcker om färg i hopp om att ändra på det.
En födelsedag, en något generös bror och kvalitetsservice från Amazon senare, och ett sortiment av böcker (inklusive några som specifikt handlar om färg) är här och väntar på att bli lästa. Tack David.
Jag har läst klart en av färgböckerna, Design Elements: Color Fundamentals, och tänkte att jag borde börja dela med mig. Jag vill börja med hur vi beskriver färger dels för att det är början och dels för att det ledde till viss klarhet i hur jag förstår färg.
Hur vi beskriver färg
Det finns 3 primära sätt att beskriva en färg på och eftersom boken lade till det, lägger jag till ett fjärde sätt att beskriva färg också.
- Färgton – ett annat ord för färg
- Mättnad (chroma) – intensiteten eller renheten hos en nyans
- Ljusstyrka (värde) – den relativa graden av svart eller vitt som blandas med en viss nyans
- Temperatur – den upplevda värmen eller kylan hos en färg
Låtsas oss gräva lite djupare i varje.
Toner är färger och vilken nyans vi ser beror på vilken våglängd av ljuset som reflekteras eller produceras. Jag tvivlar på att jag behöver berätta för dig vad en färg är och eftersom färg och nyans är synonyma bör du också veta vad en nyans är. En sak som jag vill påminna er om är att vi alla uppfattar färg på olika sätt. Den nyans du ser kanske inte är samma nyans som jag ser.
Mättnad avser hur ren eller intensiv en viss nyans är. 100 % mättnad innebär att det inte finns något tillägg av grått till nyansen. Färgen är helt ren. I den andra extremen framstår en nyans med 0 % mättnad som medelgrå. Ju mer mättad (närmare 100 %) en färg är, desto mer levande eller ljusare verkar den. Avmättade färger verkar å andra sidan mattare.
Hur mättad en nyans verkar beror också till viss del på vilka färger den ligger bredvid. En 50 % mättad nyans som placeras bredvid en 25 % mättad nyans kommer att framstå som mer levande än om samma nyans placeras bredvid en 75 % mättad nyans.
Ljusstyrka mäter den relativa graden av svart eller vitt som har blandats med en viss nyans. Om man lägger till vitt blir färgen ljusare (skapar nyanser) och om man lägger till svart blir den mörkare (skapar nyanser). Effekten av ljushet eller värde är relativ till andra värden i kompositionen. Du kan få en färg att verka ljusare genom att placera den bredvid en mörkare färg.
Desto större skillnaden i värde mellan element är, desto större är kontrasten mellan dem. På grund av detta är ljushet ett bra sätt att visa kontrast och indikera hierarki mellan element. Ungefär 7 steg av ljushet är den maximala variation som det mänskliga ögat kan urskilja. Utöver det blir det svårt att urskilja skillnaderna.
Temperatur är den upplevda värmen eller kylan hos en färg. Varma färger är rött, orange och gult, medan kalla färger är grönt, blått och violett. Någonstans i det gröna och violetta spektrumet ändras temperaturen mellan varm och kall.
Hur ögat känner igen färgtemperaturen kan förändras beroende på ljuskällan. Till exempel kan den faktiska temperaturen på en datorskärm påverka den upplevda färgtemperaturen.
Varmare färger tenderar att avancera till förgrunden i en komposition medan kallare färger drar sig tillbaka till bakgrunden. Liksom mättnad och ljusstyrka kan temperaturen också vara relativ. Placera en varm färg mot en varmare färg och den ursprungliga färgen kommer att verka kallare än om den placeras mot en kall färg.
Färgharmoni
När vi arbetar med färg är vårt mål att välja en palett av tilltalande färgkombinationer (med undantag för de tillfällen då en obehaglig kombination kompletterar budskapet bättre). Vi försöker uppnå någon form av färgharmoni.
Färgharmoni kan vara subjektiv. Det som fungerar för ditt öga kanske inte fungerar för mitt öga. Färgteoretiska principer syftar till att minska subjektiviteten genom att erbjuda riktlinjer som hjälper oss att hitta kombinationer och grupperingar av färger som med större sannolikhet fungerar bra.
En av huvudprinciperna säger t.ex. att ögat alltid söker balans och jämvikt i färger som leder till att det kommer fram till neutrala kombinationer, t.ex. när en nyans kombineras med sin motsats eller komplement. Det är en av anledningarna till att vi ofta ser efterbilder av en annan färg (men med samma mättnad och ljusstyrka) när vi stirrar på en färg för länge.
Färgteori leder inte alltid till förutsägbara resultat. Ibland passar teori och praktik inte riktigt ihop, vilket innebär att vi måste utveckla våra ögon för färg och experimentera med olika kombinationer av färgton, mättnad och ljusstyrka.
Den bristande överensstämmelsen mellan färglära och färgpraktik
Som jag sa ovan, var det något som klickade för mig när jag läste Color Fundamentals. Vi beskriver färg i termer av färgton, mättnad och ljushet (HSL), men ändå ställer vi vanligtvis in färgvärden på webben med hjälp av hex-värden och i mindre utsträckning RGB-värden. Skulle det inte vara vettigare att arbeta med det system som bättre beskriver färg?
Notera: HSL är inte samma sak som HSB (hue, saturation, brightness) eller HSV (hue, saturation, value) som finns i de flesta färgverktyg.
Hex och RGB är egentligen två versioner av samma sak. Båda ger 256 möjliga värden för hur mycket rött, grönt eller blått som finns i en viss färg. HSL fungerar annorlunda. Det finns inget enkelt sätt att kasta en blick på något som rgb(63, 69, 146) eller dess hexekvivalent #3f4592 och enkelt veta att den är 40 % mättad eller hsl(236, 40, 41).
Om du vill se matematiken som krävs för att göra konverteringen kan du ta en titt på någon eller några av länkarna nedan
- Färgalgoritmer
- RGB till HSL-färgkonvertering
- HSL till RGB-färgkonvertering
Varför är det så? Varför finns det ett glapp mellan hur vi försöker förstå färg och hur vi försöker använda den? Om något är HSL det mer intuitiva systemet eftersom det faktiskt beskriver de färger vi ser och stämmer överens med färgteorin.
Jag inser att färgkunskaper kommer från att utveckla ett kritiskt öga för färger och ställa frågor om varför något fungerar eller inte fungerar. Och det handlar om att besvara dessa frågor när du observerar färgerna runt omkring dig.
Det verkar bara som om det skulle vara lättare om både teorin och praktiken talade samma språk. Nu när jag har kommit till denna insikt har jag bestämt mig för att göra ett åtagande att använda HSL-värden så mycket som möjligt i min kod. Den stötesten är IE8 och lägre, som inte accepterar hsl() eller rgb(). De behöver hexadecimala värden. Det är dock okej eftersom SASS kan göra konverteringen. Du kan använda hsl() i SASS och få html-utgången att vara ett hexadecimalt värde.
För att följa med mitt engagemang har jag börjat bygga ett enkelt färgverktyg för att hjälpa mig att lära mig och studera. Det är inte något du skulle vilja använda i sitt nuvarande skick för att välja en färgpalett, men det låter dig leka med värden för färgton, mättnad och ljusstyrka för att se hur var och en av dem påverkar en viss färg och färgerna runt omkring den. Jag kommer att dela med mig av verktyget senare i veckan.
Jag har länge misstänkt att de matematiska förhållandena mellan färger skulle kunna erbjuda en vägledning för att arbeta med dem och jag har ofta letat efter dessa förhållanden i färgernas hex-värden. Min förhoppning med att använda hsl() mer och leka med mitt enkla färgverktyg är att de ska hjälpa mig att koppla ihop teorin med de färger jag använder i designen lite bättre än vad de är kopplade för mig nu.
Håller du detta avstånd mellan hur vi lär oss om och beskriver färger och hur vi använder dem i åtanke? Insikten har gett mig en större förståelse för hur jag bättre kan studera färg och det är därför jag ville börja det här samtalet med grunderna för hur vi beskriver färg. Jag kommer att ha fler inlägg om färg inom kort, med början senare i veckan när jag talar om det enkla verktyg jag skapat för att hjälpa mig.
Ladda ner ett gratisprov från min bok Design Fundamentals.