color în CSS

Setează culoarea textului și a elementelor decorative asociate (sublinieri, borduri implicite).

Sintaxă CSS
color: #2563eb;                 /* hexazecimal */
color: rgb(37, 99, 235);         /* rgb */
color: rgba(37, 99, 235, 0.8);   /* rgba cu transparență */
color: hsl(221, 83%, 53%);       /* hsl */
color: oklch(0.55 0.22 260);     /* spațiu de culoare modern */

Ce face color

Proprietatea color dictează culoarea caracterelor dintr-un element de text.

Formate suportate în CSS:
• HEX: #ffffff, #2563eb (cel mai răspândit).
• RGB / RGBA: rgb(255, 0, 0) sau cu transparență rgba(0, 0, 0, 0.5).
• HSL: Hue (nuanță 0-360), Saturation (saturație %), Lightness (luminozitate %).
• OKLCH: cel mai modern format CSS, oferind o percepție uniformă a luminozității pe monitoarele moderne (P3 wide-gamut).

Valori uzuale

Valoare Descriere
#hex Cod hexazecimal din 3, 6 sau 8 caractere (ex. #1e293b).
rgb() / rgba() Valori Roșu, Verde, Albastru între 0-255 și alfa 0-1.
hsl() Nuanță (unghi), saturație și luminozitate.
currentcolor Cuvânt cheie care moștenește culoarea curentă a textului.

Exemple

Exemplul 1: Diferite moduri de scriere a culorii

Toate formatele produc culori vibrante în browser.

h1 { color: #0f172a; }
p { color: rgba(15, 23, 42, 0.8); }
.accent { color: oklch(0.6 0.2 250); }

Efect vizual în browser

Titlul este bleumarin foarte închis, paragraful are o tentă ușor mai palidă (80% opacitate), iar accentul este albastru vibrant.

Greșeli frecvente

  • Folosirea unui contrast insuficient între culoarea textului și fundal (ex. text gri-deschis pe fundal alb), ceea ce face pagina ilizibilă și pică auditul de accesibilitate WCAG.

Comenzi înrudite

  • background-color: Setează culoarea solidă sau semi-transparentă a fundalului unui element.
  • opacity: Setează gradul de transparență al unui element întreg, inclusiv al tuturor copiilor săi.