Convertorul acceptă orice formă hex din CSS: forma pe 6 cifre #3366cc, forma prescurtată pe 3 cifre #36c, precum și formele pe 4 și 8 cifre cu canal alfa, cu sau fără #. Afișează șirul hsl() sau hsla(), valorile brute și o defalcare pe fiecare componentă - plus un rând invers HSL în HEX, pentru când ai nevoie de conversie în cealaltă direcție. Totul se întâmplă în browserul tău - fără încărcare pe server, fără cont, fără limite.
Convertor HEX în HSL
Rulează integral în browserul tău - fără încărcare, fără cont.
CSS
hsl(220, 60%, 50%)Cum se convertește
Nuanță220
Saturație60%
Luminozitate50%
Mergi în sens invers? HSL în HEX
#3366ccCum convertesc HEX în HSL?
Mai întâi citești codul hex ca roșu, verde și albastru (0-255), apoi rescrii acea culoare ca nuanță, saturație și luminozitate. Nuanța este unghiul de pe cercul cromatic (0-360), saturația arată cât de vie este culoarea (0-100%), iar luminozitatea cât de deschisă este (0-100%). #3366cc devine hsl(220, 60%, 50%). Acest convertor face asta instant, pe măsură ce scrii.
Cum se folosește
- 1Introdu un cod hex. Scrie sau lipește o culoare hex precum #3366cc (sau #36c), sau alege-o cu selectorul de culoare. Simbolul # este opțional.
- 2Citește valoarea HSL. Șirul hsl(), valorile brute și previzualizarea live a culorii se actualizează pe măsură ce scrii, împreună cu o defalcare pe componente pentru nuanță, saturație și luminozitate.
- 3Copiază formatul de care ai nevoie. Apasă Copiază lângă șirul hsl() sau valorile brute. Ai nevoie de sensul invers? Introdu mai jos nuanța, saturația și luminozitatea ca să recuperezi codul hex.
Pentru cine este
- Dezvoltatorii front-end care transformă un cod hex în hsl(), ca să ajusteze luminozitatea pentru stările de hover și focus fără să aleagă o culoare complet nouă.
- Designerii care construiesc palete și păstrează nuanța fixă, variind saturația și luminozitatea ca să genereze tonuri și nuanțe dintr-o singură culoare de brand.
- Autorii de teme și design tokens care păstrează culorile în format HSL, mult mai ușor de citit și ajustat manual decât un șir hex.
- Oricine potrivește culori între instrumente unde unul cere hex (Figma, majoritatea CSS-ului) și altul cere HSL (utilitare SCSS, unele sisteme de culoare).
Întrebări frecvente
Este gratuit acest convertor HEX în HSL?
Da - este 100% gratuit, fără cont și fără limite. Rulează în întregime în browserul tău.
Sunt culorile mele trimise undeva?
Nu. Conversia este simplu JavaScript care rulează pe dispozitivul tău - nimic nu este trimis către un server, iar instrumentul continuă să funcționeze offline după ce pagina s-a încărcat.
Ce este HSL?
HSL înseamnă nuanță (hue), saturație (saturation) și luminozitate (lightness). Nuanța este un unghi de la 0 la 360 de grade pe cercul cromatic, saturația arată cât de vie este culoarea, de la 0 la 100 la sută, iar luminozitatea merge de la 0 la sută (negru), prin culoarea pură la 50 la sută, până la 100 la sută (alb).
Cum convertesc hex în HSL manual?
Convertești hex-ul în roșu, verde și albastru și împarți fiecare la 255. Iei maximul și minimul dintre cele trei valori: luminozitatea este media lor, saturația este (maxim - minim) împărțit la (1 - |2L - 1|), iar nuanța rezultă din canalul care are valoarea maximă, redusă la o scală de 0-360 de grade.
Acceptă forma prescurtată pe 3 cifre, precum #36c?
Da. În notația prescurtată CSS, fiecare cifră se dublează, deci #36c se extinde la #3366cc și se convertește în hsl(220, 60%, 50%). Forma pe 4 cifre funcționează la fel, cu ultima cifră drept valoare alfa.
Cum gestionează transparența (HSLA)?
Un cod hex pe 8 cifre poartă valoarea alfa în ultima pereche. Acel octet (0-255) este împărțit la 255 pentru a obține valoarea alfa între 0 și 1 cerută de hsla(), rotunjită la trei zecimale - astfel #3366cc80 devine hsla(220, 60%, 50%, 0.502).
Poate converti HSL înapoi în HEX?
Da. Folosește rândul HSL în HEX de sub rezultat: introdu nuanța (0-360), plus saturația și luminozitatea (0-100%), și primești instant codul hex. Valorile aflate în afara intervalului sunt limitate.
De ce este util HSL în locul hex-ului?
HSL este lizibil pentru oameni: poți deschide o culoare crescând L, o poți estompa scăzând S, sau îi poți schimba familia modificând H, toate fără să ghicești cifre hex. Asta îl face ideal pentru construirea unor palete consistente, stări de hover și design tokens.