Convertor HSL în RGB

Convertor HSL în RGB – Cum funcționează și de ce ai nevoie de el

Când proiectezi o paletă de culori în mintea ta, lucrezi în mod natural cu nuanța (hue), saturația și luminozitatea. Dacă vrei să folosești acea culoare pe ecran, ai nevoie de exact numărul pe care îl înțelege hardware-ul: tripletul RGB (roșu, verde, albastru). Pagina de față face exact acest lucru: primește o culoare exprimată în HSL (hue în grade 0–360, saturație și luminozitate în procente) și afișează instantaneu echivalentul RGB (0–255), plus alte formate.

Ce face această pagină diferită de altele?

Majoritatea convertoarelor online aruncă pur și simplu o formulă – dar nu explică de ce ai folosi HSL în loc de RGB. Aici, diferența fundamentală este că HSL este construit pentru raționamentul uman, în timp ce RGB este spațiul de lucru matematic pentru ecrane. Când ajustezi luminozitatea în HSL, nuanța rămâne intactă, ceea ce face acest model ideal pentru generarea de teme și palete. De exemplu, dacă vrei o variantă mai deschisă a aceleiași culori, în HSL doar crești luminozitatea; în RGB ar trebui să recalculezi toate cele trei canale proporțional, ceea ce este greoi și nesigur.

Conversia este fără pierderi: fiecărei valori valide HSL îi corespunde un singur triplet RGB, iar acesta se află întotdeauna în intervalul afișabil (0–255). Spre deosebire de conversiile din LAB sau CMYK în RGB, nu există tăiere în afara gamutului – culoarea nu se schimbă atunci când o convertești înapoi. Practic, poți merge înainte și înapoi între HSL și RGB de câte ori dorești fără să pierzi informație.

Introducerea datelor și rezultatele instantanee

Pe pagină, introduci o culoare HSL sub forma 243, 75%, 59%. Nu exista buton de „convertire” – toate câmpurile se actualizează instantaneu după fiecare tastă. Ieșirile afișate sunt:

• HEX – codul hexadecimal standard, de exemplu #4F46E5
• RGB – trei numere între 0 și 255, de exemplu 79, 70, 229
• HSL – confirmarea intrării
• HSV – nuanță, saturație, valoare (un alt model util pentru ajustarea luminozității pure)
• CMYK – cian, magenta, galben, negru – dar acesta este o estimare pe ecran, nu o valoare exactă pentru tipar profesional
• LAB – model perceptual CIE Lab, folosit în sisteme de gestionare a culorii

Toate se actualizează sincron. Dacă introduci o valoare incorectă – de exemplu, omiti un procentaj sau folosești o nuanță în afara intervalului 0–360 – pagina va afișa un mesaj clar: „Introduceți HSL ca nuanță 0–360 cu două procente, de exemplu 243, 75%, 59%.”

Reguli și cazuri limită

Câteva lucruri de știut pentru a evita confuziile:

Acest comportament este intenționat: pagina nu încearcă să ghicească ce ai vrut să scrii – îți spune exact ce este greșit.

De ce ai nevoie de această conversie?

Designerii construiesc palete și teme vizuale. În loc să experimenteze cu numere RGB abstracte, ei ajustează nuanța pentru a obține variații armonioase și apoi modifică luminozitatea pentru a crea ierarhie. De exemplu, un buton primar poate fi hsl(243, 75%, 59%), iar varianta sa hoveră, mai întunecată, este hsl(243, 75%, 45%). Design tool-uri precum Figma sau Sketch afișează adesea culori în HSL. Pentru a transpune acele valori în cod CSS sau în cod pentru aplicații, ai nevoie de RGB (sau HEX).

Dezvoltatorii front-end întâlnesc frecvent situația în care un fișier de design conține o culoare HSL, dar framework-ul CSS folosește numai valori RGB (sau HEX). Deși browserele moderne suportă și HSL direct în CSS (hsl(243, 75%, 59%)), multe instrumente de testare, biblioteci de culori sau API-uri așteaptă tripletul RGB. Conversia manuală este predispusă la erori; această pagină o face instantaneu și corect.

Oricine preferă să gândească în termeni umani de culoare – nuanță (roșu, albastru, galben), saturație (intensitate) și luminozitate (claritate) – va găsi util să obțină numerele exacte pe care ecranul le poate emite. De exemplu, vrei un mov pastel? Ajustezi saturația la 30% și luminozitatea la 80%. Pagina îți spune că acel mov este rgb(179, 163, 230).

Aspecte tehnice ale conversiei HSL → RGB

Conversia nu este o simplă interpolare liniară. Se bazează pe formula standard din specificația CSS Colors Level 4 și este implementată în JavaScript în browserul tău. Algoritmul:

1. Normalizează nuanța la intervalul 0–360 (dacă este în afara, se aplică modul 360).
2. Convertește saturația și luminozitatea din procente în fracții zecimale (0–1).
3. Calculează valorile intermediare:
   • Dacă luminozitatea este sub 0,5, atunci t2 = L * (1 + S), altfel t2 = L + S - L * S
   • t1 = 2 * L - t2
4. Pentru fiecare canal (roșu, verde, albastru), se aplică o funcție de nuanță care depinde de poziția pe cercul cromatic. Rezultatul este adus în intervalul 0–255 și rotunjit la cel mai apropiat întreg.

De aceea, valorile RGB nu sunt niciodată fracționare (deși ar putea fi din punct de vedere matematic; standardul CSS recomandă rotunjirea la întreg pentru afișare). Această conversie este bijectivă între spațiul HSL (cu S și L în) și spațiul RGB (cu fiecare canal în). Singura excepție apare la nuanțe aproape de negru sau alb, unde saturația devine irelevantă – dar HSL continuă să funcționeze corect.

Înțelegerea diferitelor modele de culoare

Pagina afișează șase formate. Iată pe scurt rostul fiecăruia:

CMYK-ul afișat este cu titlu informativ. În tipărirea profesională, fiecare combinare de hârtie și cerneală are propriul profil ICC, iar conversia exactă necesită cunoașterea acestuia. Valoarea dată este o estimare pe ecran, utilă pentru a vedea orientativ cum ar arăta culoarea pe hârtie, dar nu trebuie folosită pentru producție fără verificare.

Întrebări frecvente

1. Pot introduce nuanța ca număr zecimal (de exemplu 243,7)? Da, nuanța poate fi orice număr real între 0 și 360 (sau chiar în afara acestui interval, dar pagina va aplica modul 360). Saturația și luminozitatea trebuie să fie procente, cum ar fi 75% sau 59%. Nu este permisă scrierea lor ca numere zecimale simple.

2. De ce CMYK-ul afișat nu este același cu cel din imprimanta mea? Deoarece conversia nu ține cont de profilul specific al imprimantei, al hârtiei și al cernelei. Valorile sunt calculate folosind un algoritm standard (de obicei transformarea inversă din RGB în CMY și apoi adăugarea K), dar aceasta nu este o conversie de încredere pentru producție.

3. Pot converti invers, din RGB în HSL? Această pagină specială face doar conversia HSL → RGB și afișează și celelalte formate. Dacă ai nevoie de conversia inversă, există o pagină separată pe site (RGB → HSL). Totuși, poți verifica cu ușurință: introduci o culoare HSL, obții RGB, apoi poți folosi acea valoare RGB pe pagina soră.

4. Ce se întâmplă dacă introduc o nuanță mai mare de 360 sau mai mică de 0? Pagina acceptă nuanțe în afara intervalului standard și aplică modul 360 – de exemplu, 450° devine 90°. Totuși, pentru a evita confuzia, este recomandat să folosești intervalul 0–360.

5. Există vreo diferență între culorile afișate pe ecran și cele reale? Nu pentru conversia în sine – algoritmul este standardizat. Însă calibrarea monitorului tău poate face ca o culoare RGB să pară diferită față de alt ecran. Aceasta este o limitare hardware, nu a paginii.

6. Pot folosi această pagină offline? Da, toate conversiile se execută în browserul tău; nu se trimit date pe server. Poți salva pagina local și o vei putea folosi chiar și fără conexiune la internet.