Fundamentele CSS: Lucrul cu culorile

Există mulți factori de luat în considerare atunci când proiectați un site web; font, flux UX și multe altele. Un element de design foarte important este culoarea. Chiar și deciziile simple, cum ar fi culoarea mărcii, culoarea chenarului și culoarea de fundal, au un impact clar și vizibil.

În acest articol, vom acoperi elementele fundamentale ale culorilor CSS și vom învăța cum să transformați un site HTML într-un site cu aspect impecabil.

Noțiuni introductive despre culorile CSS

Există un anumit mod de a descrie culorile în CSS pe care un computer le poate înțelege. De obicei, se face prin divizarea culorii în diferite componente, calcularea unui set mixt de culori primare pentru a forma culoarea dorită. Există mai multe moduri diferite de a descrie o culoare în CSS.

Folosind nume de culori ca cuvinte cheie

Există aproximativ 140 de nume de culori CSS acceptate de majoritatea browserelor moderne. Ar putea fi la fel de simplu ca roșu sau cian pentru cuvântul cheie color. Deși ajută la o gamă moderată de culori, sunteți limitat la câteva culori setate cu control zero asupra nuanțelor și nuanțelor. Aici va trebui să treceți la gama mai mare de opțiuni de culoare CSS.

/*Syntax*/
culoarea rosie;
culoare: purpuriu;
culoare: albastru ardezie;

Utilizarea valorilor RGB

În timp ce proiectați un site web sau o aplicație, schema de culori contează foarte mult - cu siguranță nu ar trebui să fie ultimul lucru pe care îl luați în considerare. În CSS, puteți utiliza trei metode pentru a reprezenta o culoare RGB. Acestea sunt notația șir hexazecimală, notația funcțională RGB și notația funcțională HSL. Iată o privire mai atentă la fiecare dintre ele.

Notare șir hexazecimală

Notarea șirului hexazecimal începe întotdeauna cu caracterul #. Urmând acest caracter, specificați culorile folosind cifre hexazecimale ale unui anumit cod de culoare. Șirul nu este sensibil la majuscule, dar este convențional să folosiți minuscule. Iată câteva cazuri de utilizare:

#rrggbb

Este cel mai comun mod de a descrie o culoare numerică. Este o culoare complet opacă, cu componente roșii, verzi și albastre 0xrr, 0xgg, și 0xbb respectiv.

#rrggbbaa

Urmează criteriile RGB prezentate mai sus cu un canal alfa care gestionează strălucirea culorii. Cu cât este mai mic 0xaa valoarea este, cu atât culoarea devine mai translucidă.

#rgb

Dacă ai culoare #556677, îl puteți scrie pur și simplu ca #567 întrucât reprezintă 0xrr, 0xgg, și 0xbb respectiv. De exemplu, #000 (sau #000000) este negru în timp ce #fff (sau #ffffff) este alb.

#rgba

Urmează criteriile de mai sus cu un canal alfa specificat de 0xaa pentru a controla opacitatea.

Notare funcțională RGB

Notarea funcțională RGB reprezintă culori folosind componente roșu, verde și albastru. Este definit folosind funcția rgb () care acceptă parametrii de intrare sub formă de componente primare roșu, verde și albastru (și un canal alfa opțional). Valorile roșu, verde și albastru trebuie să fie un număr întreg între 0 la 255 (inclusiv) sau un procent care variază de la 0% la 100%. Pe de altă parte, canalul alfa acceptă valori de la 0,0 (complet transparent) la 1,0 (complet opac). De asemenea, acceptă valoarea procentuală de la 0% (la fel ca 0.0) și 100% (la fel ca 1.0).

/*Syntax*/
culoare: rgb (rr, gg, bb);
culoare: rgba (rr, gg, bb, a);

Notare funcțională HSL

Notarea funcțională HSL reprezintă culoarea utilizând nuanța, saturația și luminozitatea. Este foarte asemănător cu rgb () funcția în termeni de utilizare. Poți cu ușurință găsiți valoarea hexagonală a oricărei culori pe ecranul computerului. În această metodă de culoare, nuanța definește culoarea reală în funcție de poziția de pe roata de culoare. Saturația este procentul de gri cu nuanța maximă posibilă. Luminozitatea trece culoarea de la aspectul cel mai întunecat la cel mai strălucitor posibil pe măsură ce crește.

Valoarea nuanței (H) este specificată de unitatea unghiului suportat în CSS. Include deg, rad, grad, și întoarce. Saturația (S) specifică procentajul culorii finale formate din nuanță. Componenta de luminozitate (L) definește nivelul de gri.

/*Syntax*/
culoare: hsl (XXdeg, XX%, XX%);
culoare: hsl (XXturn, XX%, XX%);

Aplicarea culorilor la elementele HTML

În CSS, culoare proprietatea definește culoarea din prim-plan a conținutului și culoare de fundal definește culoarea de fundal a conținutului structurat prin HTML. Când un element este redat, puteți utiliza proprietățile de culoare pentru a-l stiliza.

Proprietatea de culoare pentru texte

The culoare proprietatea este utilizată la desenarea textului și atunci când aveți nevoie de orice fel de decorațiuni text. Puteți utiliza text-decor-culoare proprietate pentru a reda linii subliniate, linii superioare sau linii de trasare de diferite culori. Puteți schimba culoarea de fundal a textului folosind culoare de fundal proprietate. Puteți aplica un efect de umbră pe text folosind text-umbră proprietate. Puteți selecta text-accent-culoare în timp ce desenează simboluri de accentuare în câmpurile de text.

Proprietatea de culoare pentru cutii

După cum știți, totul pe o pagină web urmează modelul casetei. Astfel, fiecare element este o casetă cu un fel de conținut și o zonă de margine, margine și margine opțională. Puteți utiliza culoare de fundal proprietate atunci când nu există conținut în prim plan. Când desenați o linie pentru a separa coloanele unui text, puteți utiliza coloană-regulă-culoare proprietate pentru asta. Există un contur-culoare proprietate pentru a colora conturul. Rețineți că un contur este diferit de chenar - acționează ca un indicator de focalizare.

Proprietatea de culoare pentru chenare

Orice element HTML poate avea un chenar. Puteți seta culoare de margine proprietate ca border-top-color, margine-dreapta-culoare, margine-fund-culoare, și border-left-color pentru a seta culoarea chenarului laturilor corespunzătoare. Utilizarea proprietății de stenografie este totuși o bună practică.

The border-inline-start-color proprietatea vă permite să colorați marginile marginii cele mai apropiate de început. Pe de altă parte, border-inline-end-color proprietatea vă permite să colorați sfârșitul începutului rândurilor de text dintr-o casetă. Deși variază în funcție de dumneavoastră modul de scriere, orientare spre text, și direcţie.

Înfășurare: culoare și accesibilitate

Deși un site frumos proiectat este puternic afectat de culoarea utilizată, ar trebui să vă asigurați întotdeauna că este accesibil. Utilizarea necorespunzătoare a culorii poate duce la pierderea unui trafic semnificativ pe site-ul dvs. web.

Utilizarea notațiilor șir hexazecimale, a numelor de culori sau a valorilor RGB depinde complet de dvs. Asigurați-vă că folosiți culori pentru a întări textul existent și cereți-i să urmeze o ierarhie vizuală determinată. Aflarea mai mult despre teoria culorilor și crearea propriei palete este o idee remarcabilă dacă sunteți un dezvoltator web în devenire. Până atunci, codificare fericită și colorată!

Cum să utilizați teoria culorilor pentru a vă ridica proiectele creative

Folosind culorile potrivite în modul corect, puteți duce proiectele dvs. creative la un nivel complet nou.

Citiți în continuare

Despre autor