Limbajul HTML - culori | www.pbinfo.ro

În anumite situații trebuie să precizăm culori. Marcajele și atributele HTML care lucrează cu culori au devenit in mare măsură învechite și au fost înlocuite cu proprietăți CSS.

Așa cum știm, în calculator culorile sunt formate prin “amestecul” a trei culori de bază: red, green și blue. “Cantitatea” culorilor de bază variază între 0 și 255.

Culori în HTML

În HTML, culoarea poate fi precizată prin denumirea ei, (de exemplu red) sau prin codul ei hexazecimal (de exemplu #ff0000).

Codul hexazecimal este un șir de șase cifre hexazecimale (0, 1, .., 9, A, B, …, F), interpretate astfel:

primele două cifre reprezintă cantitatea de red: 00 reprezintă 0, adică minim, iar FF reprezintă 255, adică maxim;
următoarele două cifre reprezintă cantitatea de green
ultimele două cifre reprezintă cantitatea de albastru

Sunt 16 culori cu denumire în HTML, deși este posibil ca browser-ele să recunoască mai multe denumiri de culoare:

`black` – #000000	`silver` – #C0C0C0	`bgray` – #808080	`white` – #FFFFFF
`maroon` – #800000	`red` – #FF0000	`purple` – #800080	`fuchsia` – #FF00FF
`green` – #008000	`lime` – #00FF00	`olive` – #808000	`yellow` – #FFFF00
`navy` – #000080	`blue` – #0000FF	`teal` – #008080	`aqua` – #00FFFF

Culori în CSS

Cele mei multe atribute HTML care desemnează culori sunt învechite. Ele au fot înlocuite cu proprietăți CSS. Există mai multe proprietăți CSS care au ca valoare o culoare, de exemplu:

color – culoarea textului dintr-o casetă
background-color – culoarea fundalului unei casete
border-color – culoarea chenarului unei casete

Culorile pot fi precizate în CSS astfel:

prin nume. Toate denumirile de culoare din HTML sunt disponibile în CSS. În plus, există multe alte denumire, disponibile aici: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
prin codul hexazecimal #RRGGBB, cunoscut deja, sau prin codul hexazecimal extins #RRGGBBAA, unde AA reprezintă gradul de opacitate al culorii – 00 înseamnă complet transparent, iar FF înseamnă complet opac

<div style="background: url('wall-red.png'); padding:20px;">
	<div style="background-color: #800080CC; color: teal; font-size: 2em; padding:20px; text-align: center;">
    	Culori
    </div>
</div>

prin codul hexazecimal scurt:
- #RGB este identic cu #RRGGBB
- #RGBA este identic cu #RRGGBBAA
folosind notația funcțională rgb(r,g,b), unde r, g și b sunt numere (naturale scrise în baza 10 cu valori între 0 și 255) sau procente (100%) corespunde cu 255
folosind notația funcțională rgb(r,g,b,a), unde r, g și b sunt numere (naturale scrise în baza 10 cu valori între 0 și 255) sau procente (100%) corespunde cu 255. a este un număr intre 0 (complet transparent) și 1 (complet opac) sau un procent (100% corespunde cu 1);
folosind notația funcțională hsl(h,s,l) sau hsl(h,s,l,a) – reprezentarea colorilor pe modelul HSL (hue, saturation, value). Detalii: https://en.wikipedia.org/wiki/HSL_and_HSV.