In aceasta lectie vreau sa vorbim despre cum putem defini o culoare in CSS.
Fie ca folosim acea culoare pentru fundal, pentru border sau chiar pentru culoarea textului, metoda este aceeasi.
Si anume, indiferent de proprietatea CSS pe care o folosim, valoarea unei culori va putea fi precizata prin una din cele trei metode:
- precizand numele unei culori (ceea ce am folosit pana acum)
- un cod HEX
- o valoare RGB
Folosind numele unei culori
Prima metoda am folosit-o exclusiv pana acum, cand am definit culoarea textului, sau border-ul. Dezavantajul este ca suntem limitat la cele 150 de culori care sunt predefinite in CSS.
color: gray;
background: lightblue;
border: 2px solid darkturquoise;
Daca de exemplu vrem sa folosim un albastru putin mai inchis pentru background, aceasta metoda nu ne ajuta.
Ea a fost folositoare pana acum, pentru ca este usor de scris si ne dam seama din valoarea proprietatii cam ce culoare vom avea in final.
Pentru o lista completa a denumirilor, puteti vizita aceasta pagina.
Culorile in format HEX
Inainte de a vorbi despre HEX, trebuie sa precizam ca o culoare in CSS, scrisa in format HEX sau RGB este alcatuita din trei valori, una pentru fiecare culoare de baza: rosu, verde si albastru.
Vedem ca nu se foloseste galben, ci verde.
O culoare scrisa in format hex are urmatoare structura:
color: #12A3F4;
La inceput avem un hash #, este foarte important sa nu il confundam cu cel ce il folosim in selectorul CSS, apoi 6 cifre sau litere.
Daca le grupam pe acestea cate 2 vom avea cate o valoare pentru cele trei culori: rosu, verde si albastru. Fiecare valoare precizand cantitatea de culoare pe care vrem sa o folosim in culoarea finala.
Si anume: 12 defineste ce valoare avem pentru rosu, A3 pentru verde si F4 pentru albastru.
Aceasta metoda se numeste HEX, pentru ca fiecare valoare din aceasta culoare poate fi o cifra (de la 0 la 9) sau o litera de la A la F, adica un numar hexadecimal.
Cea mai mica valoare este 0, iar cea mai mare F.
Daca schimbam o valoare din primele doua, vom creste cantitatea de rosu din culoare finala, si in consecinta ne va rezulta alta culoare. Daca inlocuim 12 cu 99, va rezulta un mov, ceea ce este un albastru cu mai mult rosu:
Putem incerca diverse valori pana obtinem culoarea pe care o dorim, dar nu trebuie neaparat sa invatam aceste culori pe de rost. Atunci cand gasim una care ne place, putem salva codul ei hex undeva, pentru a o folosi mai tarziu.
Culorile in format RGB
Metoda de a scrie o culoare RGB este oarecum similara cu HEX pentru ca vom defini cate un numar pentru fiecare dintre cele trei culori: rosu, verde si albastru.
De fapt, de acolo vine si denumirea RGB: red, green and blue.
Culoarea de mai devreme #99A3F4 s-ar scrie in format RGB astfel:
color: rgb(153, 163, 244);Ok, haideti sa vedem ce inseamna asta. In primul rand avem cuvantul rgb si apoi paranteze rotunde. in interiorul lor, 3 numere separate prin virgula.
Paranteze rotunde nu am mai intalnit pana acum in CSS, pentru ca sunt destul de rar intalnite, dar sunt folosite in cazuri de genul acesta.
Va puteti gandi la rgb() ca la o functie care primeste trei valori.
Primul numar va reprezenta rosu, al doilea verde iar ultimul albastru. Fiecare din ele poate avea valori intre 0 si 255.
Si schimband aceste numere, schimbam “cantitatea” uneia dintre cele 3 culori, care schimba culoarea finala.
Asadar, aceasta metoda nu foloseste litere, sau alte simboluri, doar 3 numere cu valori intre 0 si 255.
RGB vs HEX
Acestea doua sunt cele mai folosite metode de a scrie o culoare in CSS.
Ambele au aceeasi importanta si sunt la fel de folositore. Totul depinde de preferintele personale atunci cand alegem pe care sa o folosim.
Ceea ce mai trebuie precizat este ca o culoare scrisa in HEX poate fi tradusa in RGB si invers.