CSS proprietăți de culoare. Coduri de culori

Unul dintre instrumentele pentru schimbarea stilurilor paginilor web este culoarea CSS. Există mai multe moduri de a modifica această setare. Fiecare are avantaje și dezavantaje.

nume

Proprietatea de culoare specifică culoarea elementului. În CSS sunt incluse 145 de titluri. Printre acestea sunt simple (de exemplu, negru, albastru) și complexe (de exemplu, crimson, lawngreen).

Deoarece întreaga listă este dificil de reținut, numele din foaia de stil sunt rareori folosite.

RGB

Majoritatea televizoarelor, smartphone-urilor, monitoarelor funcționează modelul de culoare RGB. Adică, orice umbră poate fi setată printr-o combinație de culori primare, care includ roșu, verde și albastru. Această abordare este utilizată atât în ​​dispozitive cât și în CSS. culoare din compoziția de bază ia valori de la 0 la 255. Și numărul de nuanțe posibile este de 16777216.

Deoarece modelul RGB este legat direct de legile fizice ale vizualizării culorilor, negrul este definit ca rgb (0, 0, 0), alb este rgb (255, 255, 255). Sistemul RGBA este complet analog cu RGB, numai cu adăugarea unui canal alfa. Afectează transparența care îmbină nuanța cu fundalul. Aspectul elementului va varia în funcție de "substrat".

HSL

Pentru a înțelege cum funcționează sistemul HLS, trebuie să oferiți o roată de culoare. În centrul său este roșu, apoi (în sens orar) toate celelalte nuante ale curcubeului. Pentru definiție în CSS culorile utilizând sistemul HLS, trebuie să setați trei parametri:

• tenta (în grade) - direcția din centrul cercului -
• saturația (în procente) este cât de multă culoare este necesară;
• strălucire (în procente).

De exemplu, violetul poate fi definit astfel: hsl (315, 100%, 45%). HSL este cel mai convenabil pentru experimente. După ce am studiat culoare roată, vă puteți imagina aproximativ, în timp ce vizualizați foaia de stil, culoarea care este atribuită unui anumit element. HSLA - același HLS, numai cu canalul alfa: hsl (0, 100%, 50, 0.6) - roșu, transparent mai mult de jumătate.

HEX

În Culori CSS poate fi specificată folosind o reprezentare hexazecimală, de exemplu, portocala este determinată de valoare # FF4500.

Pentru a înțelege mai bine ce reprezintă o reprezentare hexazecimală, merită să te uiți mai adânc în sistemul zecimal. Acesta este un număr de la 0 la 9. Atunci când nevoia în numărare număr mai mare de 9, se adaugă un bit, și se transformă 10, apoi 100, și așa mai departe. E. Toate exact la fel în notație hexazecimală, dar în ea după 9 este A, apoi B și așa mai departe la F este același cu 15 în sistemul zecimal. Apoi se adaugă un bit și obținem 10, egal cu 16 în calculul obișnuit.

Ca și în RGB, nuanțele din HEX indică în ce proporții să se utilizeze culorile primare. Ele nu sunt separate prin virgule (culoare: # FFD500). Fiecare două caractere specifică cantitatea de roșu, verde și albastru.

De regulă, sistemul HEX nu este utilizat în timpul experimentelor, deoarece este imposibil să se găsească culorile potrivite CSS. tabel poate ajuta în această chestiune, dar dacă vă verificați în mod constant cu ea, munca va fi întârziată. Reprezentarea hexazecimală este cea mai convenabilă atunci când se transferă un șablon dintr-un editor grafic. La urma urmei, este mult mai ușor să copiați dintr-un singur număr, decât alternativ trei.

Care este cea mai bună cale?

În acest sens, nimic concret nu poate fi spus. Dacă elementele interfeței necesită transparență, alegeți între RGBA și HSLA. Dacă doriți să experimentați în browser, roata de culori HLS va fi cea mai convenabilă. Dacă utilizați o paletă sau mutați un desen din Photoshop, ar trebui să preferați codurile de culoare CSS hexazecimale.