Share
Mai putin ofera o multime de functii care fac foarte usor definirea si manipularea culorilor. În acest tutorial vom trece prin mai multe dintre ele, ajutându-vă să controlați culorile, să realizați mai multe perechi de culori și să le păstrați organizate.
Primul este a invarti() care ne permite să ajungem la o culoare în jurul roții de culoare. Această funcție vine în folosință, de exemplu, atunci când se generează o schemă de culori. Este posibil să fi citit despre câteva structuri de culoare comune care formulează combinații de culori armonioase, cum ar fi complementare, triade și compuse. Există o serie de instrumente, cum ar fi Adobe Color CC (fostul Kuler), unde puteți genera scheme de culori pentru a urma aceste structuri în mod instantaneu. Dar ce zici de a ne desfasura propria schema de culori folosind mai putin?
Vom începe prin generarea celei mai ușoare structuri de culoare, complementar. Această pereche cuprinde două culori care se află pe laturile opuse ale roții de culoare.
Diagrama complementară a culorii.În primul rând, definim baza de culori drept referință punctuală la a doua culoare. Alegeți un favorit sau orice culoare care intră brusc în mintea voastră. Aici am luat un albastru-ish culoare, # 3bafdA, ca exemplu:
Așa cum am dori să ajungem la partea opusă a roții la baza de culoare, setăm valoarea gradului la 180.
@ bază de culoare: # 3bafdA; @ color-complement: spin (@ color-base, 180);
Acest lucru ne oferă două culori precise și frumoase, care se completează reciproc.
Iată un exemplu de aceste culori aplicate unui prototip de design web:
Destul de minunat, nu-i așa??Putem explora în continuare modele de culori și să le creăm triadică culoare. Triadic, după cum sugerează și numele, cuprinde trei culori. Prin urmare, ne împărțim roata în treimi și stabilim gradul de rotație în cadrul a invarti() funcţie:
// Structura triadică @ bază de culoare: # 3bafdA; @ triadic-secundar: spin (@ color-base, - (360/3)); @ triadic-terțiar: spin (@ color-base, (360/3));
Rezultatul se dovedește la fel de frumos:
Structura de culoare triadicăO altă modalitate de a crea scheme de culori este amestecarea a două culori; probabil ceva pe care l-ați învățat înapoi în clasa de artă în școala elementară. Dacă vom amesteca roșu cu galben, de exemplu, vom obține o nuanță solidă de portocaliu. Cu mai puțin, putem face același lucru folosind amesteca() funcţie:
div culoare: amestec (roșu, galben);
Rezultatul acestui exemplu este # ff8000-exactul cod Hex al cuvântului cheie "portocaliu":
div culoare: # ff8000;
Evitați amestecarea culorilor din același spectru. Având în vedere culoarea noastră de bază, # 3bafdA, care se află undeva în blues pe spectrul vizibil, veți obține rezultate mai satisfăcătoare amestecând-o cu o culoare opusă, de exemplu, mediumvioletred sau lightseagreen.
@ bază de culoare: # 3bafdA; @ color-primar: mix (@ color-base, mediumvioletred); @ color-secundar: mix (@ color-base, lightseagreen); @ color-terțiar: se amestecă (@ color-base, mintcream);
Acest lucru ne oferă o schemă de culoare minunată; toate culorile generate se simt armonioase pe măsură ce moștenesc aceeași nuanță, # 3bafdA.
Dacă sunteți indiferent despre culorile pe care trebuie să le aplicați, alegeți-le pe cea preferată și încercați să le amestecați orice folosind culoarea amesteca() funcţie. Rezultatul va - cel mai probabil - vă va surprinde.
Iată un exemplu (familiar) de aplicare a unor astfel de rezultate într-un prototip de design mobil.
Să examinăm și alte modalități de manipulare a culorii.
Shade definește intensitatea luminii și a întunericului unei culori. În designul web, umbră de obicei, vine în practică pentru a distinge statele elementare. Un buton, de exemplu, poate avea culoarea de fund puțin mai întunecată sau mai deschisă :planare sau : focus. Cu mai puțin, putem folosi întuneca() și uşura() pentru a face o culoare mai inchisa si mai inchisa, respectiv.
@ bază de culoare: # 3bafdA; @ color-hover: lumina (@ color-primar, 10%); // # 9c84c1 @ focus-color: întunecat (@ color-primar, 10%); // # 684b94
Acest lucru are ca rezultat:
Definirea stării culorii cu funcția lighten () și darken ().Alternativ, putem regla culoarea saturare în loc de ușurință. Saturația definește adâncimea unei culori; o saturație mai mare va face o culoare mai vibrantă, în timp ce nivelul cel mai scăzut de saturație îl va transforma în gri.
Având în vedere exemplul de mai sus putem înlocui funcțiile de umbră cu satura() și desaturezi (), și, de asemenea, să definească culoarea stării dezactivate.
@ bază de culoare: # 3bafdA; @ color-hover: saturate (@ color-primar, 10%); @ color-focus: desaturate (@ color-primar, 10%); @ color-disable: luminozitate (desaturate (@ color-primar, 100%), 30%);
Reglați în continuare lumina desaturată a culorilor până când se simte bine în contextul dvs. de design.
Variabilele noastre sunt acum strâns legate de baza de culoare care ne va salva o mână de timp când personalizăm stilurile de butoane; acestea se vor schimba corespunzător în timp ce ajustați baza de culoare.
Ajustarea stării de culoare cu saturație.Mai putin permite ca stilurile noastre sa fie putin mai inteligente. De exemplu, putem face ca stilurile noastre să "gândească" și să decidă ce culoare să se aplice în anumite condiții. Presupunând că creăm un șablon de site web, acesta este butonul de stil de bază și intenționați să îl extindeți cu diferite culori și stiluri. Dar cum putem controla ieșirile de culoare? Cu siguranță nu vrem ca culoarea textului să fie întunecată pe un fond întunecat sau invers. Trebuie să ne asigurăm că textul păstrează contrastul, astfel încât să fie mai ușor de citit, și acesta este locul unde contrast() funcțiile intră în joc.
@ body-bg: # 000; corp fundal-culoare: @ corp-bg; culoare: contrast (@ body-bg);
În exemplul de mai sus, am setat culoare prin contrast() funcţie. Acest lucru asigură că culoarea textului are un contrast suficient cu culoarea de fundal. În acest caz, textul ar trebui să revină #fff deoarece fondul este de # 000. Dacă setați fundalul la o culoare deschisă, cum ar fi alb, fum alb, sau cer albastru, culoarea ar trebui să revină # 000.
corp fundal-culoare: # 000; culoare: #fff;
De asemenea, puteți personaliza culoarea pentru contrastul întunecat și luminos. În exemplul următor, culoarea va reveni # 999 sau # 777 in locul #fff și # 000.
@ body-bg: # f0f0f0; @ color-light: # 999; @ color-dark: # 777; corp fundal-culoare: @ corp-bg; culoare: contrast (@ body-bg, @ color-dark, @ color-light);
Adesea, prefer să nu trimit o declarație de stil dacă culoarea este transparentă, în special pentru culoarea de fundal. Pentru a face acest lucru, încapsulați fundal declarație în cadrul LESS Mixin Guards.
@ bg: transparent; .element și când nu (@bg = transaprent) background: @ bg;
Ați putea face același lucru și pentru a declara frontieră și culoare proprietăți și salvați câteva linii în foaia de stil eliminând regulile inutile.
Sper că câteva dintre aceste funcții vă vor ajuta să îmbunătățiți aranjamentul culorilor în desenele dvs. Puteți găsi lista completă a funcțiilor de culoare mai puțin aici și începeți să experimentați. Ar trebui să fiu de acord cu Kezz Bracey. Nu există nici o modalitate mai bună de a valorifica colorarea decât încercarea și eroarea:
"Abia după ce am început să construiesc scheme de culori solide prin încercări și erori pure, toate teoriile de culoare pe care le citisem începuseră să aibă sens.
Accentsconagua