Culoare în CSS
În CSS, se utilizează culorile pe scară largă. Pentru a seta culoarea textului, a fundalului sau a marginii, trebuie să specificăm culoarea.
De exemplu, să definim culoarea roșie pentru fundalul elementului div:
div{
background-color: red;
}În CSS există mai multe proprietăți diferite care necesită o culoare specifică ca valoare. De exemplu, proprietatea color este responsabilă pentru setarea culorii textului, proprietatea background-color pentru setarea fundalului elementului, iar proprietatea border-color pentru setarea culorii marginii.
Există mai multe moduri diferite de a defini culoarea textului.
- Valoarea hexazecimală. Aceasta constă din părți separate care codifică în sistemul hexazecimal valorile pentru culorile roșu, verde și albastru.
De exemplu, #1C4463. Aici, primele două caractere 1C reprezintă valoarea componentei roșii a culorii, apoi 44 - valoarea componentei verzi a culorii și 63 - valoarea nivelului de albastru. Culoarea finală pe care o vedem pe pagina web este formată prin amestecarea acestor valori.
Dacă fiecare dintre cele trei numere pe două cifre conține două caractere identice, acestea pot fi reduse la unul singur. De exemplu, #5522AA poate fi redus la #52A, sau, de exemplu, #eeeeee poate fi redus la #eee. Nu este atât de important în ce caz vor fi caracterele.
- Valoarea RGB. Valoarea RGB reprezintă, de asemenea, un set secvențial de valori pentru culorile roșu, verde și albastru (Red - roșu, Green - verde, Blue - albastru). Valoarea fiecărei culori este codificată de trei numere, care pot reprezenta fie procente (0-100%), fie un număr între 0 și 255.
De exemplu:
background-color: rgb(100%,100%,100%);Aici fiecare culoare are valoarea de 100%. Și în final, la amestecarea acestor valori, va fi creată culoarea albă. Și la valori de 0% se va genera culoarea neagră:
background-color: rgb(0%, 0%, 0%);Între 0 și 100% vor fi toate celelalte nuanțe.
Dar, de obicei, valorile din intervalul de la 0 la 255 sunt mai frecvent utilizate. De exemplu:
background-color: rgb(28, 68, 99);- Valoarea RGBA. Aceasta este aceeași valoare RGB plus componenta de transparență (Alpha). Componenta de transparență are valoarea între 0 (complet transparent) și 1 (ne-transparent). De exemplu:
background-color: rgba(28, 68, 99, .6);- Valoarea HSL. HSL reprezintă abrevierea: Hue - nuanță, Saturation - saturație și Lightness - luminozitate. HSL stabilește trei valori. Prima valoare, Hue, este un unghi în cercul de nuanțe - o valoare în grade de la 0 la 360. De exemplu, roșu este 0 (sau 360 la o rotație completă a cercului). Fiecare culoare ocupă aproximativ 51°.
A doua valoare, Saturation, reprezintă saturația și indică cât de pură este culoarea. Saturația este exprimată în procente de la 0 (absența totală a saturației) la 100% (culoare strălucitoare, saturată).
A treia valoare, Lightness, determină luminozitatea și este exprimată în procente de la 0 (complet negru) la 100 (complet alb). Pentru a obține o culoare pură, se utilizează valoarea de 50%.
De exemplu:
background-color: hsl(206, 56%, 25%);Această culoare este echivalentă cu valorile #1C4463 și rgb(28, 68, 99).
- Valoarea HSLA. Similar cu RGBA, aici la HSL se adaugă o componentă de transparență sub formă de valoare între 0 (complet transparent) și 1 (ne-transparent). De exemplu:
background-color: hsl(206, 56%, 25%, .6);Valori string. Există o serie de valori constante sub formă de șiruri, cum ar fi red (pentru culoarea roșie) sau green (pentru culoarea verde). De exemplu,
color: red;este echivalent cu:
color: #ff0000;O listă completă a culorilor poate fi găsită pe pagina: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
În concluzie, trebuie menționat că există numeroase generatoare de culori online gratuite, unde puteți ajusta și vizualiza culorile în formatul dorit. De exemplu, generatorul de culori de pe mdn.
Transparență
Unele setări de culoare permit stabilirea unei valori pentru componenta alfa, care este responsabilă pentru transparență. Dar în CSS există și o proprietate specială care permite stabilirea transparenței elementelor - proprietatea opacity. Ca valoare, aceasta acceptă un număr între 0 (complet transparent) și 1 (ne-transparent):
div{
width: 100px;
height: 100px;
background-color: red;
opacity: 0.4;
}