Un mod de cumpărare a culorilor frumoase

Deși alegerea culorilor bune este o artă, există câteva trucuri pe care le puteți folosi pentru a alege culorile frumoase. Acest articol este format în două părți: voi trece mai întâi pe ceea ce face o paletă de culori bună, iar în al doilea rând, voi prezenta o formulă pe care o puteți folosi pentru a ajunge la o paletă cu aspect bun.

Disclaimer: Aceasta este departe și de singura modalitate de a alege culori bune și este mai mult decât un set de euristici pe care am venit să le adopt. Sper că acest lucru vă poate ajuta să alegeți culorile potrivite pentru site-ul dvs. web / aplicație / joc / ce-aveți.

Palete de culori și contrast

În primul rând, trebuie să recunoaștem că culorile nu există în mod izolat. O culoare frumoasă nu este una deschisă sau întunecată, saturată sau desaturată. Când ne gândim la alegerea culorilor, nu ar trebui să ne gândim la culorile individuale, la fel cum să ne gândim la alegerea seturilor de culori sau la paletele de culori.

Stânga la dreapta: Super Mario Run, Monument Valley, Alto’s Odyssey, Lara Croft Go

Când ne gândim în ceea ce privește seturile de culori, trebuie să ne gândim la interacțiunea lor: ar trebui ca anumite să iasă în evidență sau să se îmbine între ele? Aceasta se numește contrast.

Alegerea culorilor frumoase de multe ori se reduce la alegerea contrastelor potrivite pentru designul tău.

Modul în care culorile pe care le utilizați colaborează în designul dvs. determină cât de frumoase arată. Dar când vine vorba de contrastul culorilor, există mai multe moduri în care poate exista:

Luminozitate aka. Lumină / întuneric

Luminozitatea este un tip de contrast ușor de vizualizat. Pe un selector de culori HSB, aceasta corespunde deplasării de-a lungul axei verticale:

strălucire

În general, putem crește pur și simplu cantitatea de contrast între două culori, prin simpla creștere a diferenței de luminozitate.

Contrast de luminozitate

Deși acest lucru este ușor, este insuficient pentru a crea palete minunate. Culorile care variază doar în cantitatea de alb și negru în ele nu sunt pur și simplu la fel de interesante precum culorile care se joacă în mai multe dimensiuni. Ceea ce ne aduce la ...

Contrast tonal

Ne putem gândi la contrastul tonal în ceea ce privește nuanțele de culoare și nivelurile de saturație. La fel ca în cazul luminozității, creșterea diferenței de nuanță sau saturație va crește, în general, cantitatea de contrast între culori.

Contrast HueSaturație (axa orizontală în HSB) și contrastul de saturație

Chiar și așa, aceste valori numai nu vopsesc întreaga imagine. Putem alege în continuare culori care, chiar dacă diferă în nuanță sau saturație, au încă un contrast slab.

Nuanțe diferite și contrast slabSaturație diferită și contrast slab

Ce dă? Răspunsul este că nuanțele diferite au valori tonale diferite inerente. Pentru mulți oameni (inclusiv eu), este greu de imaginat ce valori tonale pot adopta diferite nuanțe. Ceea ce mă aduce la trucul meu preferat ...

Hack Grayscale

Când afișați culorile în scară de gri, luminozitatea griului rezultat poate servi ca un indicator bun pentru valoarea tonurilor de culori diferite. Nu numai că, este util și atunci când proiectați accesibilitatea. Este un mod simplu de vizualizare a contrastului care există într-un design independent de nuanță.

Valori tonale inerente pentru diferite nuanțe

Să vedem cum arată aceste valori tonale într-un selector de culori HSB. Rețineți, de asemenea, cum valorile tonale se schimbă în spectrul fiecărei nuanțe, evidențiate în coloana din dreapta:

Dacă aruncăm o privire la unele dintre eșantioanele anterioare, dar în scară de gri, putem vedea mai ușor ce culori au un contrast ridicat și scăzut.

Contrast de saturație: contrast ridicat în partea de sus, contrast slab în partea de jos.Contrast de nuanță: contrast ridicat în partea de sus, contrast slab în partea de jos.

Să aruncăm o altă privire asupra jocurilor prezentate mai sus, dar acum în scala de gri.

Puteți observa cu ușurință modul în care primele planuri apar din fundal, modul în care elementele interactive contrastează foarte mult cu elementele non-interactive și cum, dacă jocurile ar fi în toate nivelurile de gri, tot ar fi probabil redate. Cea mai importantă a lua aici este:

Folosiți hack-ul în tonuri de gri, liberal și deseori, pentru a vizualiza contrastele care există în design-urile dvs.

Contrastele frumoase creează palete de culori frumoase, așa că vă prezint ...

O formulă de alegere a paletelor de culori frumoase

Să aplicăm analiza pe care am făcut-o mai sus, dar în sens invers: începeți cu un design la scară în gri și apoi lucrați la alegerea culorilor corespunzătoare.

1: Determinați unde aveți nevoie de contrast

Creați un cadru pentru designul dvs., apoi decideți ce zone ale cadrului dvs. de fir au nevoie de mult contrast și care au nevoie de mai puțin contrast.

2: Colorați-vă designul folosind Shades of Grey

Încercați să vă colorați designul ramei de sârmă doar în nuanțe de gri. Asigurați-vă că zonele designului dvs. care necesită cel mai mult contrast au cea mai mare diferență de luminozitate. Asigurați-vă că faceți acest pas în rezoluția finală a designului. Desenele mai mici (de ex. Logo-urile și pictogramele aplicației) pot necesita mai ales contraste mai mari pentru a defini elemente mai fine.

3: Alegeți culoarea de bază
Alege nuanțele de culoare de bază cu care vrei să lucrezi. Aceasta este partea subiectivă și puteți utiliza instrumente precum Pigmentul ShapeFactory sau Adobe Color CC pentru a alege unele. Fapt amuzant: Unele combinații de culori sunt atât de populare încât au atins statutul de trope.

4: Ajustați-vă Culorile pentru a avea valori tonale potrivite
După ce ți-ai dat seama de nuanțele tale, găsește ce gamă de valori tonale sub această nuanță corespunde aproximativ valorii tonului gri pe care le-ai schițat anterior. Comutați ecranul între culoare și scară de gri în timp ce vă jucați cu valorile de luminozitate și saturație din selectorul de culori. Obiectivul tău este să ajungi la o paletă de culori care, atunci când este privită în scară de gri, se potrivește designului tău în partea a 2-a.

Exemplul 1

(1) Cadru de sârmă și (2) Contrasturi preferate în nuanțe de gri(3) Opțiunile noastre de culoare de bază

Dacă am dori să oferim o paletă de culori pentru cele de mai sus, am găsi ce regiuni ale fiecărei culori corespund aproximativ cu designul nostru la nivel de gri.

Regiunile de valoare tonală corespunzătoare pentru culorile noastre de bază

Acum putem alege combinații de culori de oriunde în aceste regiuni:

(4) Câteva opțiuni pentru paletele de culori

Exemplul 2

Iată cum a arătat acest proces la dezvoltarea aplicației mele Overlink:

Proces: de la stânga la dreapta, de sus în jos: cadru de sârmă, scară de gri, culori de bază, finale

Felicitări! Sperăm că acest lucru vă va ajuta să alegeți un set de culori care să contrasteze acolo unde trebuie, să se amestece unde nu, și, în general, să arate destul de bine.

Contrastul singur nu va fi elementul decisiv cu privire la faptul că designul dvs. arată excelent, dar va juca un rol major în ceea ce privește dacă paletele dvs. de culori arată uimitor.

Overlink este proiectul care a inspirat această scriere. Dacă vă plac 3D Logic Puzzles, îl puteți descărca (gratuit) pe iOS: https://itunes.apple.com/au/app/overlink/id1453086788