HSL e modul prietenos de a alege o culoare, RGB este ceea ce consumă efectiv ecranele, API-urile canvas și codul pentru imagini. Acest convertor transformă orice triplet de nuanță, saturație și luminozitate în canale exacte 0–255.
Cum funcționează conversia din HSL în RGB
- Convertește S și L în fracții și calculează croma C = (1 − |2L − 1|) × S.
- Împarte nuanța la 60 pentru a-i găsi segmentul pe roata culorilor și calculează valoarea intermediară X = C × (1 − |(H/60 mod 2) − 1|).
- Atribuie C, X și 0 sloturilor R, G și B conform acelui segment.
- Adaugă offset-ul de luminozitate L − C/2 la toate cele trei canale și înmulțește cu 255.
Exemplu de aplicare
Rezultatul este exact până la rotunjirea finală la canale întregi. Valorile fracționare pentru nuanță sau saturație sunt suportate și se vor transforma pur și simplu în triple RGB cele mai apropiate.
HSL și RGB, explicate
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
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()
HSL în RGB tabel de referință
Cele mai comune culori CSS, convertite din HSL în RGB.
| Culoare | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |