Funcții de culoare în Sass și Compass. Din culori gata făcute, creați o schemă dinamică bazată pe culoarea de bază
În urmă cu mai bine de 125 de ani, marele artist impresionist Claude Monet ne-a schimbat înțelegerea culorii considerând un astfel de element ca fiind lumina. Până acum, cercetările sale nu au fost aplicabile designului web. Dar preprocesoare precum Sass vă permit să vă gândiți la paletele de culori într-un mod nou:
Claude Monet, Stive de fân: efectul zăpezii (1891). Scottish National Gallery; imagine pentru vizionare publică.
Din punct de vedere istoric, capacitatea de a transmite culori fine pe Web a fost limitată și majoritatea cazurilor s-au bazat pe coduri fixate static. culori CSS. În timp ce manipularea din mers a culorilor a rămas evazivă.
Din fericire, noile instrumente ne oferă mai multe opțiuni pentru a lucra cu culoarea. Dar CSS este încă destul de inflexibil. Aici preprocesoarele ne pot fi foarte utile. Să ne uităm la câteva dintre caracteristicile lor care ne pot îmbunătăți semnificativ stilurile:
- Poreclele ne ajută să înțelegem mai bine ce culori folosim;
- Iluminarea, umbrirea și scalarea permit palete flexibile la rezoluții destul de mari;
- Amestecarea culorilor vă permite să deschideți lume noua nuanțe subtile și semitonuri.
Coduri din șase cifre
Trebuie sa stii valori exacte coduri de culoare pentru a le aplica. Aceasta înseamnă că, dacă nu utilizați nume de culori prestabilite, foaia de stil este întotdeauna plină de coduri criptice din șase cifre sau numere HSL obscure. Dar dacă culoarea pe care o folosim nu are de fapt un nume? Aici ne vine Sass în ajutor. Alți preprocesoare au probabil funcționalități similare, dar vă las pe voi să explorați acest lucru la propria discreție.
Să începem ca să înțelegi ce vreau să spun.
Vom crea brand nouși alegeți două culori pentru a-l afișa. Primul lucru pe care îl voi face este să numesc culorile: $toolbox și $ol-blue :
Acum le folosesc pentru a crea un site web pentru Gullfoss Travel Supply Co. Ideea de design pentru acest site este asocierea cu etichete pentru bagaje. ÎN locuri diferiteîntâlnire pe site diverse opțiuni(mai deschise) și nuanțe (mai închise) ale acestor culori:
Site ipotetic pentru Gullfoss Travel Supply Co.
Luați în considerare, de exemplu, acest buton:
Am vrut ca acest buton să arate ca un element pe care se poate face clic, care poate fi realizat cu ușurință cu un simplu gradient. Baza butonului este culoarea $toolbox. Iar punctul culminant au fost tonurile mai deschise și mai închise.
În mod tradițional, ar trebui să le setez în CSS astfel:
buton (culoare de fundal: $caseta de instrumente; // imaginea de fundal principală: gradient(hsl(0, 33%, 52%), // lumina $caseta de instrumente, hsl(0, 41%, 39%); // întuneric) )
Culoarea principală a butonului este una dintre culorile mărcii, celelalte două ( lumina si intuneric) nu sunt constante Sass. Ar trebui să-i întreb. Deschideți selectorul de culori și selectați manual un eșantion. Dar dacă aș vrea să adaug un buton bazat pe culoarea $ol-blue , atunci ar trebui să mă întorc din nou la paletă și să selectez noi valori.
Și pentru fiecare dintre aceste butoane mai trebuie să descrii starea în care trece cursorul! În această stare, tonurile deschise și închise vor fi mai deschise decât pe buton în stare normală, așa că ar trebui să declar încă patru constante. Sau doar introduceți anumite valori o dată și sper că nu voi avea nevoie de aceste culori în altă parte.
Dar Sass o poate face pentru mine. Conține funcții încorporate pentru a gestiona aceste culori fără a fi nevoie să setați manual diferite variații ale acestora.
Ambalarea unui selector de culori pentru Sass
O modalitate de a face o culoare mai deschisă este să utilizați funcția de iluminare:
lumina($cutie de instrumente, 20%);
Și pentru a întuneca culoarea, putem folosi funcția de întunecare:
întuneca($ol-albastru, 30%);
Sa luam in considerare caz urmator: Dacă luminăm $toolbox cu 50%, obținem o versiune foarte ușoară a acestei culori. Dar dacă luminăm $ol-albastrul cu 50%, obținem o culoare complet albă. Pentru că $ol-blue este mult mai ușor decât $toolbox .
Pentru a ști cât de mult putem deschide o culoare fără ca aceasta să devină complet albă, trebuie să cunoaștem în prealabil valoarea luminozității acelei culori. Aceste informații sunt codificate convenabil în valori HSL. Dacă scadem luminozitatea culorii de la 100%, rezultatul este cantitatea de care avem nevoie pentru a deschide culoarea pentru a obține un alb complet:
Valoarea luminozității pentru $ol-blue este de 60% și o putem lumina până la 40% fără să devină complet albă. Luminozitatea pentru $toolbox este de 40%, așa că o putem străluci cu 60%:
Când luminăm culorile, $ol-blue va deveni alb mai repede decât $toolbox pentru că are mai mult valoare ridicata luminozitatea de bază.
Când închidem culorile, $toolbox va deveni complet negru mai repede decât $ol-blue, deoarece are o valoare mai mică a luminozității de bază.
Pentru a stăpâni această nouă paletă de culori, trebuie să ne amintim valorile de luminozitate pentru fiecare dintre culori.
Palete proporționale cu schimbări de culoare
Sass include o funcție de culoare scale-color() care vă permite să schimbați proporțional componentele culorilor. scale-color() funcționează cu RGB, precum și cu canale HSL de saturație și lumina. Pentru a ajusta în mod similar nuanța, trebuie să utilizați funcția adjust-hue() cu același nume.
După cum am observat mai devreme, dacă am lumina $ol-blue cu 50%, s-ar transforma în alb pur, dar dacă am crește luminozitatea proporțional cu 50% folosind funcția scale-color():
scara-culoare($ol-albastru, lejeritate, 50%);
- atunci am obține o culoare cu o luminozitate intermediară între culoarea originală și alb pur.
Acum știu exact cât de mult trebuie să mișc oricare dintre culorile mele pentru a obține alb pur: este întotdeauna 100%. Dacă măresc proporțional luminozitatea $ol-blue cu 99%, va fi totuși 1 la sută $ol-blue. Puteți procesa $toolbox sau orice altă culoare în același mod. Cu excepția culorilor care sunt deja prea deschise și pot deveni alb pur mult mai devreme. Pentru ei, luminozitatea inițială va fi de 100%.
Puteți vedea cu ușurință ce vreau să spun uitându-vă la diagrama de culori de mai jos:
Pe măsură ce luminozitatea culorilor se schimbă, acestea devin mai ușoare și mai previzibile.
Opțiunile de culoare mai închisă sunt, de asemenea, setate proporțional.
Cu funcția scale-color(), puteți specifica un număr limitat de constante de bază în paletele de culori, dar păstrați totuși flexibilitatea de a gestiona semitonuri și nuanțe. Acum, declarația noastră de gradient poate fi definită după cum urmează:
buton (culoare de fundal: $caseta de instrumente; // imaginea de fundal principală: gradient(culoare-scale ($cutie de instrumente, luminozitate: 50%), $caseta de instrumente, culoare-scale ($caseta de instrumente, luminozitate: -30%);) ) buton: hover, buton: focus (culoare de fundal: culoare-scale ($caseta de instrumente, luminozitate: 50%); // imaginea de fundal principală: gradient (culoare-scale ($caseta de instrumente, luminozitate: 60%), $scala cutie de instrumente -color($cutie de instrumente, luminozitate: -20%);) ) buton.secundar (culoare de fundal: $ol-albastru; // imagine de fundal principală: gradient(scale-color($ol-albastru, luminozitate: 50%) ), $ol-albastru, scară-culoare($ol-albastru, luminozitate: -30%);) ) button.secondary:hover, button.secondary:focus (culoare-fond: scară-culoare ($ol-albastru, luminozitate: 50%), // imagine de fundal alternativă: gradient (scale-color($ol-blue, luminozitate: 60%), $ol-blue, scară-culoare ($ol-blue, luminozitate: -20%) ;) )
În acest exemplu, am folosit doar două constante și le-am deplasat după dorință. De fapt, ele pot fi folosite pe toată pagina. În conținut pagina principala Gullfoss Travel Supply Co. Sunt utilizate doar două culori de marcă, schimbate la valori diferite de luminozitate. În ciuda simplității paletei, o putem personaliza în mod flexibil.
Prescrierea culorilor folosind aditivi
Există o altă modalitate prin care puteți crea palete proporționale similare - funcția mix().
Dacă vrem să ușurăm $ol-blue cu 60 la sută, vom scrie:
amestec (alb, $ol-albastru, 60%)
Vă puteți gândi la asta de parcă am amestecat un tub de vopsea albă cu un tub de vopsea colorată $ol-albastru. Dacă vrem să întunecăm $ol-albastru, vom scrie:
amestec (negru, $toolbox, 30%)
Se pare că amestecarea cu alb sau negru este percepută în același mod ca schimbarea luminozității unei culori, dar este mai convenabilă deoarece trebuie să introducem mai puține caractere. De asemenea, mix() vă va ajuta să creați cu ușurință aspect site-uri care anterior erau inaccesibile.
Luați în considerare desenele lui Monet cu carpi de fân. Ele surprind jocul de lumină minunat. Dar din punct de vedere al designului le putem elimina lectie utila. Potrivit unui alt impresionist francez, Pierre Bonnard, „ Culoarea nu creează o impresie plăcută a unui tablou - o îmbunătățește". Amintiți-vă modul în care culoarea luminii a afectat aspectul carilor de fân ale lui Monet. Ce se întâmplă dacă am putea lua culori de bază și le-am schimba cu ușurință în design, așa cum a făcut el în 1890?
Funcția Sass mix() ne oferă această oportunitate. Să luăm din nou paleta noastră de culori și să adăugăm doar câteva culori suplimentare: lumină și umbră. Acum să amestecăm din nou culorile mărcii noastre, dar în loc să le amestecăm cu alb și negru, să folosim noile noastre culori:
Imediat, întreaga paletă devine caldă și moale și nu numai Culori închise- bogat și luminos.
Luminarea galben ofera intregii palete nuante insorite.
Întunecarea cu umbra face paleta mai naturală.
Dacă nu îmi place acest design, pot alege noi valori pentru aceste două constante, iar data viitoare Sass le va compila în CSS, iar designul va reflecta automat modificările.
În această nouă schemă, încep din nou cu aceeași paletă de marcă, dar acum aleg roz aprins pentru tonurile deschise și verde închis pentru întuneric:
Acest lucru schimbă complet aspectul paletei, dar se bazează în continuare pe cele două culori principale ale mărcii noastre.
Modificările tonurilor deschise și întunecate sunt afișate automat în paleta de culori când Sass compilează CSS-ul.
Tonurile deschise și întunecate pot fi modificate pentru a crea starea de spirit sau tema potrivită pentru site-ul dvs. fără a fi nevoie să facem modificări îndelungate la toate stilurile.
Revenind la site-ul web Gullfoss Travel Supply Co. , pe pagina fiecărui stickere am demonstrat câteva dintre posibilitățile pe care ni le oferă o astfel de amestecare a culorilor. Dacă ne uităm la pagina Olympiei, starea de spirit este complet diferită de pagina de pornire, dar toate aspectul, fonturile și aspectul de bază rămân aceleași. Fiecare culoare a fost amestecată cu un ton deschis galben sau un ton violet închis, așa că vedem pagina ( literalmente) într-o lumină nouă. Fundalul conținutului a devenit o culoare de coajă de ou, iar „ Adauga in cos„- o culoare vibrantă mai naturală:
Autocolantul Lincoln are o mulțime de subtonuri și nuanțe de roșu în el, așa că am vrut ca acest lucru să se reflecte în toate elementele paginii. Am ales tonuri roșiatice deschise și închise pentru a se potrivi cu designul cu ilustrația:
Daca te uiti pe pagina pentru Piscina Barton Springs, vei vedea ca este dominata de tonurile de apa rece si frunzele verzi. Diferența dintre culorile originale și cele noi este destul de subtilă, dar vizibilă. Culorile trebuie combinate într-un mod coeziv pentru a crea o estetică care îmbunătățește designul:
Dacă sunteți în căutarea dramei, o pagină Grid este pentru dvs. Nuanțele deschise și întunecate îi conferă un aspect Tron-esque. O astfel de schimbare dramatică se realizează prin simpla schimbare a câtorva constante.
Încă câteva lucruri care să vă ajute să vă proiectați propriile palete
Aproape fiecare culoare de pe aceste pagini este amestecată cu nuanțe deschise sau închise, dar uneori elementele de design pot părea prea uniforme și astfel se amestecă împreună. În astfel de cazuri, nu vă fie teamă să vă completați proiectele cu un nou set de robinete colorate. Acest lucru vă va ajuta să dați paginilor dvs. un plus de culoare și să le facă să pară mai vibrante.
Există multe instrumente și tehnici de lucru cu culoarea pe web. Cred că ar trebui să știi întotdeauna cum funcționează ceea ce lucrezi, iar culoarea nu face excepție. Să ne uităm la detaliile tehnice ale lucrului cu culoarea pe web.
Amestecarea culorilor
Este foarte important să înțelegeți că utilizarea culorilor pe computer în același mod ca în copilărie nu va funcționa din cauza amestecării culorilor. Când erați copii aveați vopsea. Vopseaua și cerneala de imprimantă sunt formate din pigmenți - particule mici care se amestecă pentru a crea culoare vizibilă. Aceasta este o schemă de generare a culorilor substractive. Cu cât adăugați mai multă culoare, cu atât culoarea va fi mai închisă. Culorile de bază sunt cyan, magenta și galben, dar când le amesteci subtractiv obții negru.
Pe computer (sau orice monitor) lucrezi cu lumina, adică atunci când amesteci toate culorile obții alb. Înainte ca Isaac Newton să efectueze faimosul său experiment cu prisme, oamenii credeau că culoarea este conținută în obiecte, mai degrabă decât să fie absorbită sau reflectată de ele. Newton a folosit o prismă și a demonstrat că lumina strălucitoare este doar un amestec de mai multe culori, producând un curcubeu. Cu toate acestea, culorile individuale ale curcubeului nu au mai fost separate, arătând că prisma nu conținea culoare. O astfel de schemă se numește aditiv.
Monitoarele sunt multe combinații de bucăți mici de lumină care formează o multitudine de culori. Rezoluția înseamnă numărul acestor piese - pixeli - care se află pe ecran. Interesant este că această abordare a fost folosită de artiști chiar înainte de apariția monitoarelor (un exemplu poate fi văzut mai jos).
Monitoarele au mai multe moduri de afișare care determină modul în care percepem imaginile. Aceasta este denumită în mod obișnuit adâncimea de culoare. Este profunzimea culorii care determină numărul de culori afișate. Dacă adâncimea este de 1 bit, doar două culori sunt disponibile pentru noi - alb și negru. O adâncime de doi biți dă 4 culori și așa mai departe până la 32, deși monitoare obișnuite acceptă adâncimea de culoare de până la 24, ceea ce ne oferă 16.777.216 de culori (True Color și canal alfa).
True Color se numește așa deoarece ochiul uman este capabil să distingă aproximativ 10 milioane de culori, iar adâncimea de 24 de biți este suficientă pentru aceasta. Roșu, verde și Culoarea albastră a ocupă 8 biți, iar cei rămași sunt folosiți pentru transparență (canal alfa).
Să luăm aceste informații și să ne uităm la proprietățile de culoare disponibile pentru noi.
Valori de culoare
valori RGB
La sfârşitul secţiunii precedente s-a spus între rânduri ce înseamnă rbga(x, x, x, y); , cu toate acestea, merită să înțelegeți mai bine acest lucru. Dacă lucrăm cu un model RGB, împărțim culoarea în trei canale cu valori de la 0 la 255.
X este un număr de la 0-255 y este un număr de la 0,0 la 1,0 rgb(x, x, x); sau rgba(x, x, x, y); Exemplu: rbga(150, 150, 150, 0,5);
Valori hexadecimale
Culorile hexazecimale sunt un format de afișare color ușor diferit și sunt cele mai frecvent utilizate pe web.
După cum știți, un octet este de 8 biți, adică fiecare culoare hexazecimală este specificată de 1 octet. Fiecare octet este specificat printr-un număr de la 00 la FF in sistem hexazecimal notație sau un număr de la 0 la 255 în zecimală. Astfel, negru este #000000 și albul este #FFFFFF.
Dacă biții sunt repeți în perechi, atunci aceștia pot fi scurtați, de exemplu, #00FFFF devine #0FF. Acest sistem de înregistrare este foarte convenabil pentru înțelegere și înregistrare, precum și pentru utilizare în programare. Dacă veți lucra cu culoarea la un nivel mai profund, merită să luați în considerare sistemul HSL.
Valorile HSL
HSL funcționează în același mod ca RGB, dar în loc de culori specifică nuanța, saturația și luminozitatea.
Model 3D HSL
Nuanța se rotește la 360 de grade, iar saturația și luminozitatea iau valori de la 0 la 1.
X este un număr de la 0 - 360 y este un procent de la 0% la 100% z este un număr de la 0,0 la 1,0 hsl(x, y, y); sau hsla(x, y, y, z); Exemplu: hsla(150, 50%, 50%, 0,5);
Tranziția între aceste două sisteme este foarte simplă, dar HSL este mult mai potrivit pentru percepția umană. Această demonstrație și acest instrument vă vor ajuta să înțelegeți mai bine.
HSL va fi, de asemenea, acoperit într-un articol viitor.
Culori numite
Culorile numite sunt disponibile și pentru dezvoltatori. Cu toate acestea, nu este ușor de lucrat din cauza diferențelor de percepție și a inexactității lor. Un exemplu flagrant este că „gri închis” este mai deschis decât „gri”. Există chiar și un joc în care trebuie să ghiciți culorile. Anterior, de exemplu, culoare roșie sânge a fost numit chucknorris (acest lucru este suportat în prezent doar în HTML, din câte știu eu). Într-un fel sau altul, va fi mult mai convenabil și mai profesionist să folosiți preprocesoare precum Sass pentru a stoca culorile în variabile.
Variabile de culoare
O bună practică este să stocați variabilele de culoare, dar să nu le folosiți niciodată, redefinindu-le cu nume mai ușor de citit. CSS are variabile native:
:rădăcină ( --brandColor: roșu; ) corp ( fundal: var(--brandColor); )
Dar asta este complet optiune noua, iar browserele de la Microsoft nu îl acceptă la momentul scrierii.
Preprocesoare CSS acceptă și variabile, astfel încât să poți crea variabile precum $brandPrimary și să le folosești. Sau folosiți harta:
$culori: (mainBrand: #FA6ACC, secondaryBrand: #F02A52, evidențiere: #09A6E4); @function color($key) ( @dacă map-are-key($culori, $key) ( @return map-get($culori, $key); ) @warn „Necunoscut `#($key)` în $ culori."; @return null; ) // _component.scss .element (culoare de fundal: culoare (evidențiere); // #09A6E4 )
Amintiți-vă că numele sunt importante. Numele abstracte sunt uneori utile, deoarece dacă modificați o variabilă care setează culoarea albastră și acum setează culoarea portocalie, nu trebuie să redenumiți toate celelalte variabile sau, mai rău, adăugați un comentariu ca « $blue este acum portocaliu."
currentColor
currentColor este o valoare foarte importantă. Ia în considerare imbricarea și este folosit pentru a transfera culoarea către umbre, margini și chiar fundal.
Să presupunem că ați creat un div și un div imbricat în el. Codul de mai jos va crea un chenar portocaliu pentru div-ul interior:
Div-extern (culoare: portocaliu; ) .div-intern (chenar: 1px solid currentColor; )
Acest lucru este foarte util atunci când lucrați cu sisteme de pictograme. Puteți seta currentColor ca valoare implicită și apoi puteți utiliza clasele CSS necesare pentru stil.
Preprocesoare
Preprocesoarele CSS sunt excelente pentru lucrul cu culoarea. Iată câteva link-uri către documentația pentru diferite funcții.
În urmă cu mai bine de 125 de ani, marele artist impresionist Claude Monet ne-a schimbat înțelegerea culorii considerând un astfel de element ca fiind lumina. Până acum, cercetările sale nu au fost aplicabile designului web. Dar preprocesoare precum Sass vă permit să vă gândiți la paletele de culori într-un mod nou:
Claude Monet, Stive de fân: efectul zăpezii (1891). Scottish National Gallery; imagine pentru vizionare publică.
Din punct de vedere istoric, capacitatea de a transmite culori subtile pe web a fost limitată și majoritatea s-au bazat pe coduri de culoare CSS fixate static. În timp ce manipulezi culorile" pe fuga„a rămas de neatins.
Din fericire, noile instrumente ne oferă mai multe opțiuni pentru a lucra cu culoarea. Dar CSS este încă destul de inflexibil. Aici preprocesoarele ne pot fi foarte utile. Să ne uităm la câteva dintre caracteristicile lor care ne pot îmbunătăți semnificativ stilurile:
- Poreclele ne ajută să înțelegem mai bine ce culori folosim;
- Iluminarea, umbrirea și scalarea permit palete flexibile la rezoluții destul de mari;
- Amestecarea culorilor vă permite să deschideți o nouă lume de nuanțe subtile și subtonuri.
Coduri din șase cifre
Trebuie să cunoașteți semnificațiile exacte ale codurilor de culoare pentru a le aplica. Aceasta înseamnă că, dacă nu utilizați nume de culori prestabilite, foaia de stil este întotdeauna plină de coduri criptice din șase cifre sau numere HSL obscure. Dar dacă culoarea pe care o folosim nu are de fapt un nume? Aici ne vine Sass în ajutor. Alți preprocesoare au probabil funcționalități similare, dar vă las pe voi să explorați acest lucru la propria discreție.
Să începem ca să înțelegi ce vreau să spun.
Vom crea un brand nou și vom alege două culori pentru a-l afișa. Primul lucru pe care îl voi face este să numesc culorile: $toolbox și $ol-blue :
Acum le folosesc pentru a crea un site web pentru Gullfoss Travel Supply Co. Ideea de design pentru acest site este asocierea cu etichete pentru bagaje. Există diferite opțiuni în diferite locuri de pe site ( mai usoara) și nuanțe ( mai întunecat) aceste culori:
Site ipotetic pentru Gullfoss Travel Supply Co.
Luați în considerare, de exemplu, acest buton:
Am vrut ca acest buton să arate ca un element pe care se poate face clic, care poate fi realizat cu ușurință cu un simplu gradient. Baza butonului este culoarea $toolbox. Iar punctul culminant au fost tonurile mai deschise și mai închise.
În mod tradițional, ar trebui să le setez în CSS astfel:
Buton (culoare de fundal: $caseta de instrumente; // imaginea de fundal principală: gradient(hsl(0, 33%, 52%), // lumina $caseta de instrumente, hsl(0, 41%, 39%); // întuneric) )
Culoarea principală a butonului este una dintre culorile mărcii, celelalte două ( lumina si intuneric) nu sunt constante Sass. Ar trebui să-i întreb. Deschideți selectorul de culori și selectați manual un eșantion. Dar dacă aș vrea să adaug un buton bazat pe culoarea $ol-blue , atunci ar trebui să mă întorc din nou la paletă și să selectez noi valori.
Și pentru fiecare dintre aceste butoane mai trebuie să descrii starea în care trece cursorul! În această stare, tonurile deschise și închise vor fi mai deschise decât pe buton în stare normală, așa că ar trebui să declar încă patru constante. Sau doar introduceți anumite valori o dată și sper că nu voi avea nevoie de aceste culori în altă parte.
Dar Sass o poate face pentru mine. Conține funcții încorporate pentru a gestiona aceste culori fără a fi nevoie să setați manual diferite variații ale acestora.
Ambalarea unui selector de culori pentru Sass
O modalitate de a face o culoare mai deschisă este să utilizați funcția de iluminare:
Luminează($cutie de instrumente, 20%);
Și pentru a întuneca culoarea, putem folosi funcția de întunecare:
Închis ($ol-albastru, 30%);
Luați în considerare următorul caz: dacă ușurăm $toolbox cu 50%, vom obține o versiune foarte ușoară a acelei culori. Dar dacă luminăm $ol-albastrul cu 50%, obținem o culoare complet albă. Pentru că $ol-blue este mult mai ușor decât $toolbox .
Pentru a ști cât de mult putem deschide o culoare fără ca aceasta să devină complet albă, trebuie să cunoaștem în prealabil valoarea luminozității acelei culori. Aceste informații sunt codificate convenabil în valori HSL. Dacă scadem luminozitatea culorii de la 100%, rezultatul este cantitatea de care avem nevoie pentru a deschide culoarea pentru a obține un alb complet:
X = 100% - l
Valoarea luminozității pentru $ol-blue este de 60% și o putem lumina până la 40% fără să devină complet albă. Luminozitatea pentru $toolbox este de 40%, așa că o putem străluci cu 60%:
Când luminăm culorile, $ol-blue va deveni alb mai repede decât $toolbox, deoarece are o valoare mai mare a luminozității de bază.
Când închidem culorile, $toolbox va deveni complet negru mai repede decât $ol-blue, deoarece are o valoare mai mică a luminozității de bază.
Pentru a stăpâni această nouă paletă de culori, trebuie să ne amintim valorile de luminozitate pentru fiecare dintre culori.
Palete proporționale cu schimbări de culoare
Sass include o funcție de culoare scale-color() care vă permite să schimbați proporțional componentele culorilor. scale-color() funcționează cu RGB, precum și cu canale HSL de saturație și lumina. Pentru a ajusta în mod similar nuanța, trebuie să utilizați funcția adjust-hue() cu același nume.
După cum am observat mai devreme, dacă am lumina $ol-blue cu 50%, s-ar transforma în alb pur, dar dacă am crește luminozitatea proporțional cu 50% folosind funcția scale-color():
Scala-culoare($ol-albastru, lejeritate, 50%);
Aceasta ar rezulta într-o culoare cu o luminozitate intermediară între culoarea originală și alb pur.
Acum știu exact cât de mult trebuie să mișc oricare dintre culorile mele pentru a obține alb pur: este întotdeauna 100%. Dacă măresc proporțional luminozitatea $ol-blue cu 99%, va fi totuși 1 la sută $ol-blue. Puteți procesa $toolbox sau orice altă culoare în același mod. Cu excepția culorilor care sunt deja prea deschise și pot deveni alb pur mult mai devreme. Pentru ei, luminozitatea inițială va fi de 100%.
Puteți vedea cu ușurință ce vreau să spun uitându-vă la diagrama de culori de mai jos:
Pe măsură ce luminozitatea culorilor se schimbă, acestea devin mai ușoare și mai previzibile.
Opțiunile de culoare mai închisă sunt, de asemenea, setate proporțional.
Cu funcția scale-color(), puteți specifica un număr limitat de constante de bază în paletele de culori, dar păstrați totuși flexibilitatea de a gestiona semitonuri și nuanțe. Acum, declarația noastră de gradient poate fi definită după cum urmează:
Buton (culoare de fundal: $caseta de instrumente; // imaginea de fundal principală: gradient (culoare-scală ($cutie de instrumente, luminozitate: 50%), $caseta de instrumente, culoare de scară ($caseta de instrumente, luminozitate: -30%);) ) buton: hover, buton: focus (culoare de fundal: culoare-scale ($caseta de instrumente, luminozitate: 50%); // imaginea de fundal principală: gradient (culoare-scale ($caseta de instrumente, luminozitate: 60%), $scala cutie de instrumente -color($cutie de instrumente, luminozitate: -20%);) ) buton.secundar (culoare de fundal: $ol-albastru; // imagine de fundal principală: gradient(scale-color($ol-albastru, luminozitate: 50%) ), $ol-albastru, scară-culoare($ol-albastru, luminozitate: -30%);) ) button.secondary:hover, button.secondary:focus (culoare-fond: scară-culoare ($ol-albastru, luminozitate: 50%), // imagine de fundal alternativă: gradient (scale-color($ol-blue, luminozitate: 60%), $ol-blue, scară-culoare ($ol-blue, luminozitate: -20%) ;) )
În acest exemplu, am folosit doar două constante și le-am deplasat după dorință. De fapt, ele pot fi folosite pe toată pagina. Conținutul paginii de pornire Gullfoss Travel Supply Co. Sunt utilizate doar două culori de marcă, schimbate la valori diferite de luminozitate. În ciuda simplității paletei, o putem personaliza în mod flexibil.
Prescrierea culorilor folosind aditivi
Există o altă modalitate prin care puteți crea palete proporționale similare - funcția mix().
Dacă vrem să ușurăm $ol-blue cu 60 la sută, vom scrie:
Mix (alb, $ol-albastru, 60%)
Vă puteți gândi la asta de parcă am amestecat un tub de vopsea albă cu un tub de vopsea colorată $ol-albastru. Dacă vrem să întunecăm $ol-albastru, vom scrie:
Mix (negru, $toolbox, 30%)
Se pare că amestecarea cu alb sau negru este percepută în același mod ca schimbarea luminozității unei culori, dar este mai convenabilă deoarece trebuie să introducem mai puține caractere. Mix() vă va ajuta, de asemenea, să creați cu ușurință aspectul site-ului web care anterior nu era disponibil.
Luați în considerare desenele lui Monet cu carpi de fân. Ele surprind jocul de lumină minunat. Dar din perspectiva designului, putem învăța o lecție utilă de la ei. Potrivit unui alt impresionist francez, Pierre Bonnard, „ Culoarea nu creează o impresie plăcută a unui tablou - o îmbunătățește„Amintiți-vă cum culoarea luminii a afectat aspectul carilor de fân ale lui Monet. Ce-ar fi dacă am putea lua culori de bază și am putea să le schimbăm cu ușurință în design, așa cum a făcut el în 1890?
Funcția Sass mix() ne oferă această oportunitate. Să luăm din nou paleta noastră de culori și să adăugăm doar câteva culori suplimentare: lumină și umbră. Acum să amestecăm din nou culorile mărcii noastre, dar în loc să le amestecăm cu alb și negru, să folosim noile noastre culori:
Imediat întreaga paletă devine caldă și moale, iar culorile mai închise devin bogate și luminoase.
Luminarea cu galben conferă întregii palete nuanțe însorite.
Întunecarea cu umbra face paleta mai naturală.
Dacă nu îmi place acest design, pot alege noi valori pentru aceste două constante, iar data viitoare Sass le va compila în CSS, iar designul va reflecta automat modificările.
În această nouă schemă, încep din nou cu aceeași paletă de marcă, dar acum aleg roz aprins pentru tonurile deschise și verde închis pentru întuneric:
Acest lucru schimbă complet aspectul paletei, dar se bazează în continuare pe cele două culori principale ale mărcii noastre.
Schimbarea tonurilor deschise și întunecate se reflectă automat în paleta de culori atunci când Sass compilează CSS.
Tonurile deschise și întunecate pot fi modificate pentru a crea starea de spirit sau tema potrivită pentru site-ul dvs. fără a fi nevoie să facem modificări îndelungate la toate stilurile.
Revenind la site-ul web Gullfoss Travel Supply Co. , pe pagina fiecărui stickere am demonstrat câteva dintre posibilitățile pe care ni le oferă o astfel de amestecare a culorilor. Dacă ne uităm la pagina Olympiei, starea de spirit este complet diferită de pagina de pornire, dar toate aspectul, fonturile și aspectul de bază rămân aceleași. Fiecare culoare a fost amestecată cu un ton deschis galben sau un ton violet închis, așa că vedem pagina ( literalmente) într-o lumină nouă. Fundalul conținutului a devenit o culoare de coajă de ou, iar „ Adauga in cos" - o culoare vibrantă mai naturală:
Autocolantul Lincoln are o mulțime de subtonuri și nuanțe de roșu în el, așa că am vrut ca acest lucru să se reflecte în toate elementele paginii. Am ales tonuri roșiatice deschise și închise pentru a se potrivi cu designul cu ilustrația:
Daca te uiti pe pagina pentru Piscina Barton Springs, vei vedea ca este dominata de tonurile de apa rece si frunzele verzi. Diferența dintre culorile originale și cele noi este destul de subtilă, dar vizibilă. Culorile trebuie combinate într-un mod coeziv pentru a crea o estetică care îmbunătățește designul:
Dacă aveți nevoie " dramă", atunci pagina Grid este potrivită pentru tine. Nuanțele deschise și întunecate îi conferă un aspect în stil film” Tron„O astfel de schimbare dramatică se realizează prin simpla schimbare a câtorva constante.
Încă câteva lucruri care să vă ajute să vă proiectați propriile palete
Aproape fiecare culoare de pe aceste pagini este amestecată cu nuanțe deschise sau închise, dar uneori elementele de design pot părea prea uniforme și astfel se amestecă împreună. În astfel de cazuri, nu vă fie teamă să vă completați proiectele cu un nou set de robinete colorate. Acest lucru vă va ajuta să dați paginilor dvs. un plus de culoare și să le facă să pară mai vibrante.
Să aruncăm o altă privire la pagina lui Lincoln. Ține minte, am vrut să-i dau o nuanță roșiatică. Este greu să citești text pe un fundal roșu aprins, așa că am setat culorile deschise într-un mod nou; roșu aproape pur. După aceea am stabilit pentru fundal Culoarea verde. Verdele combinat cu roșu creează efect vizual, ceea ce face ca tonurile deschise să pară mai profund roșii, menținând în același timp contrastul. Aceste straturi separate folosesc diferite tonuri deschise și întunecate care interacționează între ele.
În timpul dezvoltării scheme de culori Este important să vă asigurați că acestea sunt clare și lizibile. Aruncă o altă privire la pagina Grid. Dacă crezi că nu este foarte lizibil, nu ești singur. Meniul din partea de sus a paginii are un raport de contrast scăzut. Conform recomandărilor WCAG, acesta valoare optimă 4,5:1, dar nu mai mic de 2,6:1! Un raport adecvat de contrast între text și culorile de fundal va face designul mai plăcut.
Înainte de a încheia, aș dori să revizuiesc pe scurt suportul pentru browser. Toată procesarea culorilor este compilată în declarații de culoare CSS de bază, toate traduse în declarații statice pe care toate browserele le acceptă astăzi. Preprocesoarele ne oferă oportunități fără precedent de a crea nuanțe și tonuri care ne îmbunătățesc paletele și scot în evidență Monetul din noi.
Traducerea articolului " Amestecarea culorilor pentru web cu Sass» a fost pregătit de echipa prietenoasă a proiectului Website Building from A to Z.
Uneori, atunci când proiectați pagini web, uneori trebuie să „ascundeți” anumite elemente. Puteți, desigur, să eliminați pur și simplu aceste elemente din marcajul HTML. Dar aceasta nu este o cale de ieșire. Pentru a păstra un element, dar pentru a-l ascunde, trebuie să utilizați CSS sau HTML ascuns.
Aliniere verticală CSS nu este cel mai bun sarcină simplă. Ceea ce complică lucrurile este că cu cerințele de astăzi pentru design adaptiv Pentru diferite dispozitive dezvoltatorii trebuie să creeze elemente cu înălțimi „flexibile”, iar calcularea centrului vertical devine o sarcină destul de dificilă.
Să trecem la un alt subiect interesant și amplu - cum să utilizați Sass/Compass pentru a vă ușura viața atunci când lucrați cu culori în timpul aspectului.
Fiecare designer de layout știe bine cât de des trebuie să definească și să manipuleze culorile în codul CSS în timpul layout-ului. Preprocesorul Sass și biblioteca sa Compass au un set bogat de funcții concepute pentru toate tipurile de operațiuni de culoare în cod SCSS.
Acest articol este o prezentare generală a caracteristicilor culorilor Sass și Compass. Să începem, ca de obicei, cu cea mai simplă funcție și să trecem lin de la simplu la complex.
Configurarea inițială a proiectului Compass
Mai întâi, să creăm un proiect Compass gol și să îl configuram. Inițializarea mai multor variabile
| 1 | $culoare |
| 1 | $culoare1 |
Funcții de iluminare și întunecare
Să începem cu cele mai multe funcții simple -
luminează culoarea originală și funcția . Al doilea argument este valoarea procentuală cu care se deschide sau se întunecă culoarea originală: .lighten ( culoare de fundal : lumina (culoare $ , 10%) ); . închis ( culoarea de fundal : întunecă (culoare $ , 10%) ); )Funcțiile de iluminare și întunecare pot fi utilizate oriunde în codul SCSS - oriunde este aplicată culoarea. De exemplu, să modificăm exemplul prezentat mai sus. Să folosim funcțiile de iluminare și întunecare pentru a schimba fontul, chenarul și culorile de fundal:
.mixin (dimensiunea fontului: .95rem; culoarea fundalului: lumina ($culoare, 20%); chenar: 1px întuneca solidă ($culoare, 30%); culoare: întuneca ($culoare, 60%);)
Să trecem la funcțiile de conversie inversă a culorii. Prima functie
cu culoarea specificată în ea. Să transmitem asta mai departe variabila functie. Situat la 180 de grade față de culoarea originală. . De asemenea, inversează culoarea față de cea originală. Dar funcția este că inversează culorile (roșu, verde, albastru), dar transparența - inversează culoarea originală. Dar, spre deosebire de acesta din urmă, are o flexibilitate mai mare. Dacă funcția poate controla gradul de locație al „culorii de ieșire”.Cu alte cuvinte, puteți specifica un unghi altul decât 180 de grade. În plus, valoarea unghiului poate fi pozitivă sau negativă:
.adjusthue_plus (culoare de fundal: ajustare nuanță ($ culoare , 80deg); . adjusthue_minus (culoare de fundal: ajustare-nuanță ($ culoare, -80deg); )
Preprocesorul Sass are câteva funcții pentru controlul saturației culorilor.
: .desaturare ( culoare de fundal : desaturare ( $ culoare , 80% ); )... dimpotrivă, reduce saturația culorii față de cea originală.
| 1 | transparentiza |
Valoarea transparenței poate varia de la 0 (complet transparent) la 1 (complet opac):
.transparentize ( culoarea de fundal : transparentize ( $ culoare , .2 ); ) : .fadeout ( culoarea de fundal : fade out ( $ culoare , .2 ); )
| 1 | fade-out |
Funcția de conversie a culorii originale în tonuri de gri este extrem de ușor de utilizat. În principiu, nu este nimic special de spus aici:
.scale de gri(culoare-fond: tonuri de gri($culoare);)
Dacă sarcina este de a converti culoarea originală (specificată ca variabilă, în format HEX sau HSLA) în format RGBA, în acest caz funcția va veni în ajutor
și există două argumente variabile (două culori). Ultimul al treilea argument, sub forma unui procent, precizează proporția în care o culoare va fi amestecată cu cealaltă. În cazul nostru, culoare.
funcția de reglare a culorii
Acum ajungem la funcții mai complexe Preprocesor Sass. Prima dintre aceste funcții este
Controlul canalului alfa de culoare (transparență) este, de asemenea, disponibil. , - o valoare de la 0 la 359 grade, indicând culoarea pe diagrama HSL; valoarea poate fi fie pozitivă, fie negativă;Destul de teorie, să vedem cum funcționează funcția de ajustare a culorii folosind exemple.
- Schimbați culoarea față de originală; al doilea argument stabilește schimbarea culorii printr-o variabilă
:1 $hue
- Schimbând culoarea și luminozitatea în același timp. Primul argument $culoare stabilește culoarea inițială, al doilea argument setează culoarea $hue, al treilea argument stabilește modificarea luminozității $lightness:
- Schimbați două canale de culoare simultan pentru modelul de culoare RGB. Funcții, canal verde
:1 $verde
- Amestecarea Argumentelor modele de culoare RGB și HSL în funcția de ajustare a culorii. Să transmitem funcției de ajustare a culorii argumentele culorii originale $culoare, argumentul canalului roșu $red al modelului RGB și argumentul $hue al modelului HSL:
Ca rezultat al compilării acestui cod în CSS, obținem următoarea eroare:
Eroare de sintaxă: Nu se pot specifica valorile HSL și RGB pentru o culoare în același timp pentru „ajust-color” pe linia 38 din .../sass/style .scss... care spune că în funcție
a făcut o schimbare de culoare pe baza valorilor argumentelor transmise acestuia. Funcţie| 1 | scara-culoare |
ÎN în acest exemplu funcţie
. Funcţie. Valoarea calculează luminozitatea s-a dovedit a fi mai ușoară decât rezultatul funcției și| 1 | tentă |
| 1 | $culoare |
| 1 | 30% |
Concluzie
Aceasta se încheie revizuirea funcțiilor „culoare” ale preprocesorului Sass și bibliotecii Compass. În concluzie, putem spune că, datorită unor astfel de funcții, munca la amenajarea designului site-ului web este simplificată și accelerată.
Mai mult, cu ajutorul acestor funcții, cu o singură culoare ca valoare de intrare, puteți crea un design excelent într-o paletă de culori profesională. Și nu apelați la niciunul dintre instrumentele grafice.
Pe lângă utilizarea funcțiilor de culoare discutate mai sus, fiecare separat, le puteți combina într-o singură expresie, creând modele destul de complexe.
Acest articol este o traducere gratuită a capitolului „Manipulați culoarea cu ușurință” din minunata carte „Sass and Compass for Designers” de Ben Frain.
