Coduri de culori HTML

  • Reading time:12 minute pentru a citi

Putem crea structura unui site web, rubricile, paragrafele și linkurile în HTML.

Când creezi un site web variat și bine structurat, trebuie să consideri alte aspecte în afară de transparență—culorile, spre exemplu.

Avem deja un articol despre introducerea în dezvoltarea web, așa că poți citi acel articol dacă te interesează bazele HTML.

În acest post, vom vedea cum poți defini coduri de culori HTML cu diferite nuanțe, cu multe ilustrații ca exemplu.

Învață dezvoltare web la CodeBerry

Nume de culori în HTML

Există milioane de nuanțe de culori care pot fi afișate de browserele moderne. Ar fi imposibil să le numim și gestionăm pe toate, așa că, în lumea IT, folosim coduri pentru a defini culori și nuanțe.

HTML suportă 140 de nume de culori standard, dar poți defini orice altă nuanță pe website-ul tău folosind coduri de culori. Culorile precodate pot fi definite de numele lor (ca aqua, black, yellowgreen, hotpink etc.), așa că nu e nevoie să căutăm coduri specifice pentru a defini aceste culori.

Există multe sisteme de coduri pentru culori, conținând proporțiile diferitelor componente (culorilor de bază) și valorile unor parametrii (de ex. transparența sau saturația). În acest articol, îți vom prezenta sistemul hexazecimal în detaliu și doar vom menționa celelalte opțiuni.

Coduri de culori HTML

Selector de culori și amestecarea de culori

Putem găsi coduri de culori folosind instrumente de selectare a culorilor.

Aici sunt câteva exemple de selectori de culori:

Orice culoare pe care ochii noștri o pot detecta este un amestec de diferite proporții ale culorilor de bază. În IT, diferite nuanțe sunt afișate amestecând culorile de bază roșu, verde și albastru (RGB – Red, Green, Blue).

(În teoria culorilor, culorile de bază sunt roșu, galben și albastru, dar din cauza unor caracteristici ale monitoarelor, suntem nevoiți să folosim alte culori în IT.)

Codul de culori hexazecimal

Dintre toate opțiunile pentru coduri de culori, cel hexazecimal este cel mai concis și cel mai folosit în timpul editării de cod HTML.

Codul de culori începe cu un caracter #, urmat de o serie de 6 caractere. Putem defini exact culoarea pe care o dorim folosind numere (0-9) și litere (a-f). Primele două caractere definesc valoare culorii roșu (RR), al doilea set de două caractere definesc verdele (GG), iar cel de-al treilea set albastrul (BB).

Spre exemplu #eb4034

Cum să alegi culori HTML

Diferite nuanțe de gri conțin aceeași cantitate din toate componentele.

De ex.

#404040

Culori HTML - gri

#bebebe

Culori HTML - gri 2

Fiecare caracter al culorii negru este 0.

#000000

Culoarea alb conține valoarea maximă a tuturor componentelor.

#ffffff

Valori hexazecimale mai scurte

Sunt unele cazuri în care putem folosi coduri chiar mai scurte; pentru culorile care au aceleași caractere pentru fiecare componentă, putem folosi doar 3 caractere și vom obține aceeași culoare.

Codul #000 definește negrul, exact ca #000000, în timp ce #0ff creează aceeași culoare turcoaz (turquoise) ca #00ffff.

Coduri de culori HTML prescurtate

Versiunea scurtă a #cc2244 este #c24

Învață programare web la CodeBerry

Unde punem coduri de culori HTML?

Putem defini culori sub forma de atribute în interiorul tag-ului căruia i se aplică culoarea. Putem defini culoarea de fundal a unui site web în interiorul tag-ului <body>, iar culoarea rubricii principale ar trebuie să fie în interiorul tag-ului <h1> etc.

Atribute:

În interiorul tag-ului <body>, putem defini culoarea textului cu atributul ‘text’ și culoarea fundalului cu atributul ‘bgcolor’. Putem folosi atributul ‘color’ în tag-ul <font> pentru a schimba culoarea.

În HTML, putem folosi tag-ul <style> în toate celelalte elemente pentru a suprascrie orice informație definită global (ex. format, stil, culoare) pentru a afișa ceva diferit într-o locație specifică.

Alte opțiuni pentru coduri de culori HTML

RGB, RGBA

Putem defini proporțiile de roșu, verde și albastru într-o scară de la 0 la 255, nu doar în formă hexazecimală. Pentru asta, trebuie să adăugăm cod înaintea atributelor text, bgcolor etc. în forma asta: rgb(192,192,192).

Când folosim coduri RGBA, pe lângă valorile culorilor de bază, mai avem și o altă componentă care se referă la transparență care se numește Alpha Channel (canal alfa). Parametrul alfa este un număr între 0.0 (complet transparent) și 1.0 (deloc transparent). Așa arată o culoare în cod RGBA: rgba(255, 99, 71, 0.5)

Coduri de culori RGBA

HSL, HSLA

În HTML, putem defini culori folosind hue (nuanță), saturation (saturație) și lightness (luminozitate) – HSL. Valoarea unei nuanțe (hue) este exprimată în grade în funcție de poziția sa pe paleta de culori.

Saturația este o valoare procentuală, 0% definește o nuanță de gri, iar 100% definește culoarea întreagă. Luminozitatea este și ea o valoare procentuală, cu 0% fiind negru și 100% alb. Codurile de culori HSL arată așa:

hsl(36, 100%, 50%)

De asemenea, putem adăuga o valoare alfa, care se referă la transparența culorii.

Coduri de culori HSLA

Îți recomandăm să încerci diferiți selectori de culori și forme de coduri de culori și să găsești ce e mai potrivit pentru un proiect și cu ce poți lucra cât mai eficient. Cu puțin exercițiu, poți defini cele mai frumoase culori pe website-ul tău.

În seria „Ghidul începătorului” de la Școala de Programare CodeBerry, vom răspunde la întrebările pe care le poți avea despre limbajul de programare pe care trebuie să-l alegicât vei câștiga, ce poți face în calitate de programator și de unde să începi.