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.