HSL descrie o culoare așa cum vorbesc oamenii: ce nuanță, cât de saturată, cât de luminoasă. Conversia unui cod HEX în HSL e cea mai rapidă cale de a aduce o culoare într-o formă pe care o poți ajusta — luminați-o, estompați-o sau construiește o scară întreagă din ea.
Cum funcționează conversia din HEX în HSL
- Convertește codul HEX în RGB și împarte fiecare canal la 255, astfel încât toate trei să fie între 0 și 1.
- Găsește valoarea cea mai mare și cea mai mică dintre cele trei. Media lor este luminozitatea L.
- Distanța dintre ele determină saturația S: împarte-o la (2 − max − min) pentru culorile deschise, sau la (max + min) pentru cele închise.
- Canalul care are valoarea maximă decide nuanța H — roșu la 0°, verde la 120°, albastru la 240° — iar celelalte două canale poziționează nuanța în interiorul acelui segment.
Exemplu de aplicare
Calculul e exact, dar valorile HSL sunt de obicei rotunjite la grade întregi și procente. Conversia înapoi poate deci să difere cu una-două trepte RGB față de original — invizibil în practică, dar util de știut dacă reprocesați culorile repetat.
HEX și HSL, explicate
Ce este HEX?
Un cod HEX este un număr hexazecimal de șase cifre care stochează canalele roșu, verde și albastru ale unei culori, precedat de #. Fiecare pereche de cifre reprezintă un canal, de la 00 (niciunul) la FF (maxim), oferind aceleași 16,7 milioane de culori ca RGB, dar într-o notație mai scurtă. HEX este implicitul în CSS, în instrumentele de design și în ghidurile de brand.
- Sintaxă:
- #RRGGBB
- Interval:
- 00–FF per canal
- Ideal pentru:
- CSS, predare design, ghiduri de brand
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
HEX în HSL tabel de referință
Cele mai comune culori CSS, convertite din HEX în HSL.
| Culoare | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |