Dacă vă amintiți încă din ianuarie, unul dintre obiectivele mele pentru 2013 a fost să învăț mai multe despre culoare și să împărtășesc o parte din ceea ce am învățat cu voi. Am mai vorbit înainte despre cum simt că abilitățile mele de a lucra cu culoarea sunt deficitare și am spus că la un moment dat în acest an voi lua câteva cărți despre culoare cu speranța de a schimba acest lucru.
O zi de naștere, un frate oarecum generos și servicii de calitate de la Amazon mai târziu, și un sortiment de cărți (inclusiv câteva în special despre culoare) sunt aici așteptând să fie citite. Mulțumesc David.
Am terminat de citit una dintre cărțile despre culori, Design Elements: Color Fundamentals, și m-am gândit că ar trebui să încep să împărtășesc. Vreau să încep cu modul în care descriem culorile, în parte pentru că este începutul și în parte pentru că a dus la o oarecare claritate în modul în care înțeleg culoarea.
Cum descriem culoarea
Există 3 moduri principale de a descrie o culoare și, din moment ce cartea l-a adăugat, voi adăuga și un al 4-lea mod de a descrie culoarea.
- Nuanța – un alt cuvânt pentru culoare
- Saturația (croma) – intensitatea sau puritatea unei nuanțe
- Luminozitatea (valoarea) – gradul relativ de negru sau alb amestecat cu o anumită nuanță
- Temperatura – căldura sau răceala percepută a unei culori
Să aprofundăm puțin mai mult fiecare dintre ele.
Tonele sunt culori și nuanța pe care o vedem depinde de lungimea de undă a luminii reflectate sau produse. Mă îndoiesc că trebuie să vă spun ce este o culoare și, din moment ce culoarea și nuanța sunt sinonime, ar trebui să știți și voi ce este o nuanță. Un lucru pe care vi-l voi reaminti este că fiecare dintre noi percepe culoarea în mod diferit. Este posibil ca nuanța pe care o vedeți voi să nu fie aceeași nuanță pe care o văd eu.
Saturația se referă la cât de pură sau intensă este o anumită nuanță. 100% saturație înseamnă că nu există nici un adaos de gri la nuanță. Culoarea este complet pură. La cealaltă extremă, o nuanță cu 0% saturație apare ca un gri mediu. Cu cât o culoare este mai saturată (mai aproape de 100%), cu atât apare mai vie sau mai strălucitoare. Culorile desaturate, pe de altă parte, apar mai terne.
Cât de saturată apare o nuanță depinde, de asemenea, într-o anumită măsură, de culorile alături de care se află. O nuanță saturată în proporție de 50% plasată lângă o nuanță saturată în proporție de 25% va părea mai vie decât dacă aceeași nuanță ar fi plasată lângă o nuanță saturată în proporție de 75%.
Luminozitatea măsoară gradul relativ de negru sau alb care a fost amestecat cu o anumită nuanță. Adăugarea de alb face culoarea mai deschisă (creează nuanțe), iar adăugarea de negru o face mai închisă (creează nuanțe). Efectul luminozității sau al valorii este relativ la alte valori din compoziție. Puteți face ca o culoare să pară mai deschisă dacă o plasați lângă o culoare mai închisă.
Cu cât este mai mare diferența de valoare între elemente, cu atât este mai mare contrastul dintre ele. Din acest motiv, luminozitatea este o modalitate bună de a arăta contrastul și de a indica ierarhia între elemente. Aproximativ 7 trepte de luminozitate este variația maximă pe care ochiul uman o poate discerne. Dincolo de această valoare devine greu de distins diferențele.
Temperatura este căldura sau răcirea percepută a unei culori. Culorile calde sunt roșu, portocaliu și galben, în timp ce culorile reci sunt verde, albastru și violet. Undeva în spectrul verde și violet, temperatura se schimbă între cald și rece.
Modul în care ochiul recunoaște temperatura culorii se poate schimba în funcție de sursa de lumină. De exemplu, temperatura reală a monitorului unui computer poate afecta temperatura percepută a culorii.
Culoarea mai caldă tinde să avanseze în prim-planul unei compoziții, în timp ce culorile mai reci se retrag în fundal. De asemenea, ca și saturația și luminozitatea, temperatura poate fi relativă. Așezați o culoare caldă față de o culoare mai caldă și culoarea inițială va părea mai rece decât dacă ar fi plasată față de o culoare rece.
Armonie cromatică
În lucrul cu culoarea, scopul nostru este să alegem o paletă de combinații de culori plăcute (cu excepția acelor momente în care o combinație neplăcută completează mai bine mesajul). Încercăm să obținem un fel de armonie a culorilor.
Armonia culorilor poate fi subiectivă. Ceea ce funcționează pentru ochiul tău poate să nu funcționeze pentru al meu. Principiile teoriei culorilor au ca scop reducerea subiectivității prin oferirea de linii directoare care să ne ajute să găsim perechi și grupări de culori care au mai multe șanse de a funcționa bine.
De exemplu, unul dintre principiile principale susține că ochiul caută întotdeauna un echilibru și o balanță în culoare care îl determină să ajungă la combinații neutre, cum ar fi atunci când o nuanță este combinată cu opusul sau complementul ei. Este unul dintre motivele pentru care vedem adesea imagini ulterioare de o culoare diferită (dar cu aceeași saturație și luminozitate) atunci când privim fix o culoare prea mult timp.
Teoria culorilor nu duce întotdeauna la rezultate previzibile. Uneori, teoria și practica nu prea se potrivesc, ceea ce înseamnă că trebuie să ne dezvoltăm ochii pentru culoare și să experimentăm cu diferite combinații de nuanță, saturație și luminozitate.
Deconectarea dintre teoria și practica culorilor
Cum am spus mai sus, ceva a făcut clic pentru mine când am citit Color Fundamentals. Descriem culoarea în termeni de nuanță, saturație și luminozitate (HSL), dar, cu toate acestea, stabilim de obicei valorile de culoare pe web folosind valorile hexagonale și, într-o măsură mai mică, valorile RGB. Nu ar fi mai logic să lucrăm cu sistemul care descrie mai bine culoarea?
Nota: HSL nu este același lucru cu HSB (nuanță, saturație, luminozitate) sau HSV (nuanță, saturație, valoare) găsite în majoritatea instrumentelor de culoare.
Hex și RGB sunt de fapt două versiuni ale aceluiași lucru. Fiecare oferă 256 de valori posibile pentru cât de mult roșu, verde sau albastru este într-o anumită culoare. HSL funcționează diferit. Nu există o modalitate ușoară de a arunca o privire la ceva de genul rgb(63, 69, 146) sau la echivalentul său hexagonal #3f4592 și de a ști cu ușurință că este 40% saturat sau hsl(236, 40, 41).
Dacă doriți să vedeți calculele matematice implicate în realizarea conversiei, aruncați o privire la oricare sau la toate link-urile de mai jos
- Algoritmi de culoare
- Conversia culorilor RGB în HSL
- Conversia culorilor HSL în RGB
De ce este așa? De ce există o deconectare între modul în care încercăm să înțelegem culoarea și modul în care încercăm să o folosim? În orice caz, HSL este sistemul mai intuitiv, deoarece descrie de fapt culorile pe care le vedem și se potrivește cu teoria culorilor.
Îmi dau seama că abilitățile de culoare vin din dezvoltarea unui ochi critic pentru culori și din punerea de întrebări despre motivul pentru care ceva funcționează sau nu funcționează. Și este vorba de a răspunde la aceste întrebări pe măsură ce observi culorile din jurul tău.
Se pare că ar fi mai ușor dacă atât teoria cât și practica ar vorbi aceeași limbă. Acum că am ajuns la această realizare, am decis să mă angajez să folosesc valorile HSL cât mai mult posibil în codul meu. Piedica de poticnire este IE8 și următoarele, care nu acceptă hsl() sau rgb(). Acestea au nevoie de valori hexazecimale. Totuși, este în regulă, deoarece SASS poate face conversia. Puteți folosi hsl() în SASS și puteți face ca ieșirea html să fie o valoare hexazecimală.
Pentru a merge împreună cu angajamentul meu, am început să construiesc un instrument simplu de culoare pentru a mă ajuta să învăț și să studiez. Nu este ceva ce ați dori să folosiți în starea sa actuală pentru a alege o paletă de culori, dar vă permite să vă jucați cu valorile de nuanță, saturație și luminozitate pentru a vedea cum afectează fiecare dintre ele o anumită culoare și culorile din jurul ei. Voi împărtăși acest instrument mai târziu în cursul săptămânii.
De ceva vreme am bănuit că relațiile matematice dintre culori ar putea oferi un ghid pentru a lucra cu ele și am căutat adesea aceste relații în valorile hexagonale ale culorilor. Speranța mea de a folosi mai mult hsl() și de a mă juca cu instrumentul meu simplu de culoare este că mă vor ajuta să conectez teoria la culorile pe care le folosesc în design un pic mai bine decât sunt conectate pentru mine acum.
Păstrați în minte această deconectare între modul în care învățăm despre și descriem culoarea și modul în care o folosim. Realizarea mi-a dat o mai mare înțelegere pentru cum să studiez mai bine culoarea și de aceea am vrut să încep această conversație cu elementele de bază ale modului în care descriem culoarea. Voi avea mai multe postări despre culoare în curând, începând mai târziu în această săptămână, când voi vorbi despre instrumentul simplu pe care l-am creat pentru a mă ajuta.
Descărcați o mostră gratuită din cartea mea, Design Fundamentals.
.