Convertor RGB în HSL: Cum treci de la codurile de ecran la culori gândite pentru oameni
Ce face acest instrument
Acest pagină convertește o culoare exprimată în modelul RGB (roșu, verde, albastru) — trei numere întregi între 0 și 255 — în echivalentul său HSL (nuanță, saturație, luminozitate). Introduceți de exemplu 79, 70, 229 și vedeți instantaneu că acea culoare are o nuanță de 243°, saturația 75% și luminozitatea 59%. Pe lângă HSL, instrumentul afișează aceeași culoare și în formatele HEX, HSV, CMYK (estimare pentru ecran) și LAB. Orice câmp pe care îl editați actualizează toate celelalte câmpuri instantaneu. Toate conversiile se petrec în browserul dumneavoastră: nimic din ceea ce introduceți nu este trimis pe vreun server.
RGB vs. HSL: de ce există această pagină
Conversia de la RGB la HSL nu este doar o chestiune de format diferit. RGB este limbajul nativ al ecranelor: fiecare pixel primește trei semnale electrice care aprind subpixelii roșu, verde și albastru la intensități proporționale cu valorile 0–255. Este un model aditiv — pornind de la negru (0,0,0), adăugați lumină până ajungeți la alb (255,255,255). Problema este că, pentru un om, modificarea unei singure valori RGB (de exemplu, creșterea roșului) alternează de obicei și nuanța percepută a culorii. Nu puteți spune „fă această culoare mai deschisă păstrând aceeași nuanță” lucrând direct în RGB.
HSL a fost construit exact pentru acest scop. Nuanța (hue) este reprezentată ca un unghi pe un cerc de 0°–360°: 0° este roșu, 120° este verde, 240° este albastru. Saturația (saturation) este un procent de la 0% (gri, fără culoare) la 100% (culoare pură). Luminozitatea (lightness) este un procent de la 0% (negru) la 100% (alb). Puteți ajusta luminozitatea independent fără a atinge nuanța — asta face ca HSL să fie modelul preferat pentru generarea de palete de culori, teme și variații accesibile de contrast. Când un designer spune „vreau aceeași nuanță, dar mai deschisă cu 10%”, el lucrează mental în HSL, nu în RGB. Acest instrument face puntea între cele două lumi.
Matematica conversiei: cum se transformă trei numere în unghi și procente
Algoritmul de conversie de la RGB la HSL pornește de la normalizarea valorilor de la 0–255 la intervalul 0–1. Fie R', G', B' valorile normalizate. Se calculează:
- Cmax = maximul dintre R', G', B'
- Cmin = minimul dintre R', G', B'
- Delta = Cmax − Cmin
Luminozitatea (L) este media dintre Cmax și Cmin: L = (Cmax + Cmin) / 2
Saturația (S) depinde de luminozitate:
- Dacă Delta este 0 (culoare acromatică), S = 0%
- Altfel,
S = Delta / (1 − |2L − 1|)
Nuanța (H) se calculează în grade, în funcție de care canal este Cmax:
- Dacă Cmax este R':
H = 60 × ((G' − B') / Delta mod 6) - Dacă Cmax este G':
H = 60 × ((B' − R') / Delta + 2) - Dacă Cmax este B':
H = 60 × ((R' − G') / Delta + 4)
Dacă H rezultă negativ, se adună 360. Rezultatul final este o valoare între 0 și 360.
Să verificăm exemplul nostru: RGB (79, 70, 229). Normalizat: R' ≈ 0.310, G' ≈ 0.275, B' ≈ 0.898. Cmax = 0.898 (albastru), Cmin = 0.275, Delta = 0.623. L = (0.898 + 0.275) / 2 ≈ 0.586 → 58.6%, rotunjit la 59%. Saturația: Delta / (1 − |2×0.586 − 1|) = 0.623 / (1 − 0.172) ≈ 0.752 → 75.2%, rotunjit la 75%. Nuanța: deoarece Cmax este B', formula este 60 × ((R' − G') / Delta + 4) = 60 × ((0.310 − 0.275) / 0.623 + 4) = 60 × (0.056 + 4) ≈ 243.4° → 243°. Exact valorile pe care le afișează instrumentul.
Validarea intrărilor și cazurile limită
Instrumentul acceptă două moduri de intrare directă:
-
RGB: trei numere întregi între 0 și 255, separate prin virgulă sau spațiu. Introducerea unor valori invalide (litere, numere în afara intervalului, prea multe cifre) afișează mesajul: „Introduceți RGB ca trei numere 0–255, de exemplu 79, 70, 229.”
-
HSL: nuanța între 0–360 și două procente (de exemplu
243, 75%, 59%). Dacă formatul nu este respectat, apare: „Introduceți HSL ca nuanță 0–360 cu două procente, de exemplu 243, 75%, 59%.”
Un caz special apare când introduceți o valoare LAB sau CMYK care, prin conversie, ar cădea în afara gamei de culori afișabile pe un ecran standard sRGB. În această situație, instrumentul ajustează automat culoarea la cea mai apropiată culoare afișabilă. Dacă faceți conversia inversă a acelei culori ajustate, este posibil să obțineți o ușoară diferență — acesta este un compromis inerent al mapării pe gamă. De asemenea, culoarea CMYK afișată este o estimare pe ecran și nu trebuie utilizată pentru tipar profesional fără verificare separată.
Cine are nevoie de acest instrument și de ce
UI/UX designeri creează palete accesibile ajustând luminozitatea fără a schimba nuanța — de exemplu, pentru a respecta rapoartele de contrast WCAG (4.5:1 pentru text normal, 3:1 pentru text mare). Cu HSL, puteți spune: „păstrez nuanța la 210°, scad luminozitatea la 30%” și obțineți instantaneu o variantă închisă care păstrează identitatea culorii.
Dezvoltatorii front-end traduc token-urile de design din RGB (provenit din Figma, Sketch sau Adobe XD) în funcția CSS hsl() sau hsla(). De exemplu, în loc să scrieți background-color: rgb(79, 70, 229); puteți scrie background-color: hsl(243, 75%, 59%); — cod mai ușor de citit și de modificat dinamic cu JavaScript.
Cei care construiesc teme (light/dark mode) generează variante ale unei culori de brand păstrând nuanța centrală. O temă închisă poate folosi aceeași nuanță la 20% luminozitate, iar una deschisă la 80%.
Designerii de vizualizări de date au nevoie de scale colorimetrice ordonate perceptiv — iar canalul de luminozitate din HSL este intuitiv pentru scheme secvențiale (de la deschis la închis). Totuși, trebuie să știe că HSL nu este perceptiv uniform, despre care vom vorbi mai jos.
Limitări ale modelului HSL pe care trebuie să le cunoașteți
Deși HSL este excelent pentru ajustări rapide de paletă, nu este un model perceptiv uniform. Două culori cu aceeași valoare a luminozității (de exemplu, galben la 50% și albastru la 50%) nu par la fel de luminoase ochiului uman. Galbenul pare mult mai strălucitor decât albastrul la același L. Motivul ține de fiziologia ochiului: sensibilitatea la diferite lungimi de undă nu este liniară. Pentru aplicații care necesită uniformitate perceptivă reală (cum ar fi evaluarea diferențelor de culoare), modele alternative precum LAB (prezent și el în acest instrument) sau LCh sunt mai potrivite.
O altă limitare: atât RGB cât și HSL sunt modele dependente de dispozitiv, ancorate în spațiul de culoare sRGB. Conversiile din LAB sau CMYK pot genera valori în afara gamei sRGB — exact cazul pentru care instrumentul face ajustarea automată menționată mai sus. Dacă lucrați cu print profesional, utilizați un profil ICC dedicat și nu vă bazați pe estimarea CMYK a acestui convertor.
Întrebări frecvente
Cum introduc corect o culoare RGB?
Separați cele trei numere întregi între 0 și 255 prin virgulă sau spațiu. Exemplu valid: 45, 120, 200. Exemplu invalid: 45 120 200 (funcționează și așa), dar 45,120,200 sau 45 120 200,0 nu.
Pot introduce direct o valoare HSL pentru a vedea RGB-ul corespunzător?
Da. Introduceți nuanța (0–360), saturația ca procent și luminozitatea ca procent, separate prin virgulă. De exemplu 243, 75%, 59%. Instrumentul va afișa instantaneu RGB (79, 70, 229) și toate celelalte formate.
Ce se întâmplă dacă introduc o culoare LAB sau CMYK care nu poate fi afișată pe ecran?
Instrumentul ajustează automat culoarea la cea mai apropiată culoare din gama sRGB. Culoarea ajustată poate fi ușor diferită de cea originală. Dacă faceți conversia inversă, veți observa o ușoară derivă.
Este valoarea CMYK afișată potrivită pentru tipar?
Nu. Este o estimare pe ecran, utilă pentru referință rapidă, dar care nu înlocuiește o verificare cu un profil ICC și un monitor calibrat pentru print.
De ce aș folosi HSL în loc de RGB în CSS?
Codul hsl() este mai ușor de citit atunci când lucrați cu variante ale aceleiași culori. Puteți modifica doar luminozitatea pentru a crea efecte de hover, teme dark/light sau palete accesibile fără a recalcula manual trei valori RGB. De asemenea, manipularea din JavaScript (de exemplu, rotirea nuanței cu 30°) este trivială în HSL.
Există modele mai bune decât HSL pentru percepția umană?
Da. LAB (prezent în acest instrument) și LCh sunt proiectate să fie perceptiv uniforme — o diferență numerică egală corespunde unei diferențe vizuale aproximativ egale. HSL este mai simplu și mai rapid de utilizat în designul web, dar pentru analize colorimetrice riguroase, LAB este superior.