Tutorial HTML – culori

Tutorial HTML – culori

Tutorial HTML – culori abordează folosirea culorilor în codul CSS sau HTML. Text, fundal, chenare și alte elemente din HTML pot fi afișate în diferite culori folosind CSS. Iar culorile sunt foarte importante pentru aspectul și scopul site-ului nostru.

Dar mai întâi câteva lucruri despre culori și browsere. CSS și HTML îți oferă posibilitatea de a folosi milioane de culori pentru website-ul tău. Însă există un număr restrâns de 216 culori ce se numesc impropriu web safe colors. Deși nu fac parte din vreun standard, cele 216 culori sunt suportate de majoritatea browserelor de internet. Totuși nu e necesar să te limitezi la aceste culori când îți stilziezi site-ul.

Dar cum folosește CSS culorile? Există mai multe modalități.

Denumire culoare

Cea mai simplă metodă este folosirea numelui culorii.

nav a, nav a:visited {
	color:white;
}

White, blue, black, red, brown, yellow sunt câteva exemple de folosire a culorilor în instrucțiunile CSS. Însă această metodă, deși este cea mai ușoară, nu permite folosirea unei palete largi de culori. De aceea cele mai des folosite sunt următoarele metode.

Numerele hexazecimale

Aceste numere pot fi formate cu ajutorul cifrelor 0 la 9 și a literelor A, B, C, D, E și F (literele mari sau mici nu au nicio influență). Astfel 00 sau 0 este cel mai mic număr, iar FF este cel mai mare număr (echivalent cu 256).

În CSS folosirea numerelor hexazecimale pentru definirea culorilor se face după modelul următor:

div {
  background-color: #FF0000;
}

Simbolul # urmat de trei perechi de numere hexazecimale, câte un număr pentru roșu, galben și albastru (culori ce sunt prescurtate cu RGB).

syntaxa hexazecimale

Acest exemplu arată cum sunt definite culorile prin numerele hexazecimale prin perechi de câte 2 numere sau trei perechi de câte un număr.

Astfel vom avea pentru roșu #ff0000 (sau #f00), pentru galben #00ff00 (sau #0f0) iar pentru albastru #0000ff (sau #00f).

De notat faptul că în locul numerelor se pot folosi procente.

Notația RGB

În mod asemănător, culorile pot fi denumite în CSS cu ajutorul notației RGB. În acest caz diferă modalitatea de definire. Iată un exemplu:

div {
  background-color: rgb(255,0,0);
}

Se observă că definirea culorii începe cu rgb urmat în paranteze de 3 numere zecimale separate prin virgulă, câte un număr pentru roșu, galben și albastru (RGB).

notatia rgb

Spre deosebire de celelalte moduri, acest tip de definire a culorilor se poate folosi încă un elemen: rgba, unde a este elementul alpha. Acesta indică transparența și poate lua valori între 0 (transparent) și 1 (opac).

Notația HSL

Aceată notație provine de la Hue Saturation Lightness și se prezintă astfel:

div {
  background-color: hsl(120,60%,60%);
}

În general orice program de editare photo deține controlul culorilor în toate aceste metode mai complexe și pot fi folosite pentru definirea exactă a culorilor de care avem nevoie. Chiar și programul gratuit Paint din Windows poate fi un bun asistent.

Am putea folosi anumite suplimente, cum ar fi ColorZilla pentru Chrome, foarte utile pentru a găsi ușor schemele de culori. Există și anumite website-uri care ne pot ajuta în acest sens.

Leave a Reply

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.