RGB spune unui ecran câtă lumină să emită; HSL îți spune cum arată efectiv culoarea. Conversia celor trei canale în nuanță, saturație și luminozitate face culoarea ușor de ajustat manual.
Cum funcționează conversia din RGB în HSL
- Împarte R, G și B la 255 astfel încât fiecare valoare să fie între 0 și 1.
- Ia maximul și minimul celor trei — media lor e luminozitatea L.
- Dacă maximul și minimul sunt egale, culoarea e gri: nuanța și saturația sunt ambele 0.
- Altfel, derivă S din diferența dintre maxim și minim, și citește H din canalul care e maxim.
Exemplu de aplicare
Exact în principiu. Pentru că H, S și L sunt de obicei afișate ca numere întregi rotunjite, conversia înapoi poate schimba un canal cu una-două trepte.
RGB și HSL, explicate
Ce este RGB?
RGB descrie o culoare ca trei canale de lumină — roșu, verde și albastru — fiecare între 0 și 255. Reflectă modul în care funcționează ecranele: toate la 255 dau alb, toate la 0 dau negru. RGB e alegerea potrivită când trebuie să calculezi cu o culoare, iar rgba() adaugă transparență peste.
- Sintaxă:
- rgb(R, G, B)
- Interval:
- 0–255 per canal
- Ideal pentru:
- cod, canvas, transparență cu rgba()
Ce este HSL?
HSL împarte o culoare în nuanță (0–360° pe roata culorilor), saturație (cât de colorată, 0–100%) și luminozitate (cât de deschisă, 0–100%). Deoarece fiecare parte se potrivește modului în care oamenii descriu culoarea, HSL e cel mai simplu format pentru a crea nuanțe, umbre și palete consistente — manual sau în cod.
- Sintaxă:
- hsl(H, S%, L%)
- Interval:
- 0–360°, 0–100%, 0–100%
- Ideal pentru:
- palete, nuanțe și umbre, tematizare
RGB în HSL tabel de referință
Cele mai comune culori CSS, convertite din RGB în HSL.
| Culoare | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |