Culori în HTML. Valori de culoare: RGB, HEX, HSL
Valori de culoare
În HTML, culorile pot fi de asemenea specificate folosind valori RGB, valori HEX, valori HSL, valori RGBA și valori HSLA:
La fel cu numele de culoare "Tomato":
La fel cu numele de culoare "Tomato", dar transparent 50%:
Exemplu:
Valoarea RGB
În HTML, o culoare poate fi specificată ca valoare RGB, folosind această formulă:
De exemplu, rgb (255, 0, 0) este afișat ca roșu, deoarece roșul este setat la cea mai mare valoare (255), iar celelalte sunt setate pe 0.
Pentru a afișa culoarea neagră, setați toți parametrii de culoare la 0, astfel: rgb (0, 0, 0).
Pentru afișarea albului, setați toți parametrii de culoare la 255, astfel: rgb (255, 255, 255).
Experimentați amestecând valorile RGB de mai jos:
Exemplu:
Nuanțele de gri sunt deseori definite folosind valori egale pentru toate cele 3 surse de lumină:
Exemplu:
Valoarea HEX
În HTML, o culoare poate fi specificată folosind o valoare hexadecimală sub forma:
De exemplu, # ff0000 este afișat ca roșu, deoarece roșul este setat la cea mai mare valoare (ff), iar celelalte sunt setate la cea mai mică valoare (00).
Exemplu:
Nuanțele de gri sunt deseori definite folosind valori egale pentru toate cele 3 surse de lumină:
Exemplu:
Valoare HSL
În HTML, o culoare poate fi specificată folosind nuanță, saturație și lumină (HSL) sub forma:
Saturation este o valoare procentuală, 0% înseamnă o nuanță de gri, iar 100% este culoarea completă.
Lightness este o valoare procentuală, 0% este negru, 50% nu este nici lumină, nici întunecată, 100% este alb
Exemplu:
În HTML, culorile pot fi de asemenea specificate folosind valori RGB, valori HEX, valori HSL, valori RGBA și valori HSLA:
La fel cu numele de culoare "Tomato":
La fel cu numele de culoare "Tomato", dar transparent 50%:
Exemplu:
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Valoarea RGB
În HTML, o culoare poate fi specificată ca valoare RGB, folosind această formulă:
rgb(red, green, blue)
Fiecare parametru (roșu, verde și albastru) definește intensitatea culorii între 0 și 255.De exemplu, rgb (255, 0, 0) este afișat ca roșu, deoarece roșul este setat la cea mai mare valoare (255), iar celelalte sunt setate pe 0.
Pentru a afișa culoarea neagră, setați toți parametrii de culoare la 0, astfel: rgb (0, 0, 0).
Pentru afișarea albului, setați toți parametrii de culoare la 255, astfel: rgb (255, 255, 255).
Experimentați amestecând valorile RGB de mai jos:
Exemplu:
Nuanțele de gri sunt deseori definite folosind valori egale pentru toate cele 3 surse de lumină:
Exemplu:
Valoarea HEX
În HTML, o culoare poate fi specificată folosind o valoare hexadecimală sub forma:
#rrggbb
În cazul în care rr (roșu), gg (verde) și bb (albastru) sunt valori hexadecimale între 00 și ff (aceeași ca zecimală 0-255).De exemplu, # ff0000 este afișat ca roșu, deoarece roșul este setat la cea mai mare valoare (ff), iar celelalte sunt setate la cea mai mică valoare (00).
Exemplu:
Nuanțele de gri sunt deseori definite folosind valori egale pentru toate cele 3 surse de lumină:
Exemplu:
Valoare HSL
În HTML, o culoare poate fi specificată folosind nuanță, saturație și lumină (HSL) sub forma:
hsl(hue, saturation, lightness)
Hue este un grad pe roata de culoare de la 0 la 360. 0 este roșu, 120 este verde și 240 albastru.Saturation este o valoare procentuală, 0% înseamnă o nuanță de gri, iar 100% este culoarea completă.
Lightness este o valoare procentuală, 0% este negru, 50% nu este nici lumină, nici întunecată, 100% este alb
Exemplu: