CSS proprietăți de culoare. Coduri de culori

Un instrument 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 ele sunt simple (de exemplu negru, albastru) și complexe (de exemplu, crimson, lawngreen).

Întrucât întreaga listă este dificil de reținut, numele din foaia de stil sunt rareori utilizate.

RGB

Majoritatea televizoarelor, smartphone-urilor și monitoarelor funcționează cu modelul de culoare RGB. Adică, orice umbră poate fi setată printr-o combinație a culorilor primare, care includ roșu, verde și albastru. . Această abordare este utilizată atât în dispozitive cât și în CSS . основного состава принимают значения от 0 до 255. А количество возможных оттенков равно 16777216. Culorile compoziției de bază au valori de la 0 la 255. Și numărul de nuanțe posibile este 16777216.

Deoarece modelul RGB este direct legat 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. În acest caz, tipul de element 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 nuanțe ale curcubeului. цвета при помощи системы HLS требуется задать три параметра: Pentru a defini culoarea în CSS folosind sistemul HLS, trebuie să specificați trei parametri:

• Tint (în grade) - direcția din centrul cercului;
• Saturația (în procente) este cât de multă culoare este necesară;
• Luminozitate (în procente).

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

HEX

CSS цвета можно задать, используя шестнадцатеричное представление, например оранжевый определяется значением #FF4500 . În CSS, culorile pot fi specificate folosind o reprezentare hexazecimală, de exemplu, portocaliu este determinată de valoarea # FF4500 .

Pentru o mai bună înțelegere a reprezentării hexazecimale, merită să mergeți mai adânc în sistemul zecimal. Are numere de la 0 la 9. Cand ai nevoie de un numar mai mare de 9, adaugi un bit si ai 10, apoi 100, etc. In sistemul hexazecimal, totul este exact acelasi, dar in el dupa 9 merge A, Apoi B și așa mai departe la F este același cu 15 în sistemul zecimal. Apoi se adaugă un bit și ajungem la 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.

CSS. De regulă, sistemul HEX nu este utilizat în timpul experimentelor, deoarece este imposibil să selectați culorile CSS dorite . может помочь в этом деле, но если постоянно сверяться с ней, работа затянется. Tabelul vă poate ajuta în această problemă, dar dacă verificați în mod constant cu acesta, munca va fi întârziată. Reprezentarea hexazecimală este cea mai convenabilă atunci când mutați 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, nu se poate spune nimic specific. 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 transferați un design din Photoshop, ar trebui să preferați codurile de culoare CSS hexazecimale.