Pagina HEX către HSL – Referință completă
Această pagină convertește un cod de culoare hexadecimal (HEX) în echivalentul său HSL (nuanță, saturație, luminozitate). Acceptă coduri HEX pe șase cifre (#1E90FF) sau pe trei cifre (#abc) și returnează instantaneu valoarea HSL (nuanță în grade 0–360, saturație și luminozitate în procente 0–100%). Pe lângă HSL, afișează și reprezentarea în HEX, RGB, HSV, CMYK și LAB, toate actualizându-se simultan la fiecare modificare. Totul se întâmplă în browser – nu se încarcă sau stochează nimic pe server.
Ce face această pagină diferită
HEX este o notație brută RGB: șase cifre hexazecimale (sau trei în formă scurtă) codifică direct componentele roșu, verde și albastru. Este compactă și larg utilizată în CSS și unelte de design, dar nu este intuitivă pentru ajustări umane. HSL, în schimb, este construită pentru raționamentul uman: nuanța se măsoară în grade pe un cerc cromatic, saturația exprimă intensitatea culorii, iar luminozitatea – cât de aproape este de alb sau negru. Modificarea doar a luminozității păstrează nuanța neschimbată, ceea ce face din HSL formatul preferat pentru generarea paletelor de culori și a sistemelor de teme.
Nu există canal alfa – HEX standard (șase sau trei cifre) nu transportă transparență, la fel nici HSL. Conversia tratează întotdeauna culori complet opace.
Cum funcționează codurile HEX
Un cod HEX pe șase cifre (de exemplu, #4f46e5) este de fapt o reprezentare în baza 16 a valorilor RGB. Primele două cifre (4f) indică roșul, următoarele doua (46) verdele, ultimele doua (e5) albastrul. Fiecare pereche este convertită dintr‑un număr hexazecimal (00–FF) în zecimal (0–255). Deci 4f = 4×16 + 15 = 79, 46 = 4×16 + 6 = 70, e5 = 14×16 + 5 = 229. Astfel, #4f46e5 corespunde RGB(79, 70, 229).
Forma prescurtată pe trei cifre (de exemplu, #abc) este o notație scurtă în care fiecare cifră este dublată: #abc devine #aabbcc. Aceasta este acceptată de pagină și extinsă automat înainte de conversie.
Reguli și cazuri limită:
- Pagina acceptă numai coduri valide de șase sau trei cifre hexazecimale, cu sau fără diez (
#). - La introducerea unei valori incorecte este afișată eroarea: “Enter a hex color like #4f46e5 or #abc.”
- Dacă treceți la un alt spațiu de culoare (de exemplu, LAB sau CMYK) și introduceți o valoare în afara gamutului vizibil RGB (culori pe care ecranul nu le poate reproduce), culoarea este ajustată la cea mai apropiată culoare afișabilă. Convertirea acelei culori înapoi în HEX poate produce o ușoară deplasare față de original.
- Valorile CMYK sunt o estimare pe ecran și nu trebuie folosite pentru tipărire profesională fără calibrare.
Structura HSL: nuanță, saturație, luminozitate
HSL este un model perceptiv, nu pur matematic. Cele trei componente sunt:
- Nuanța (Hue) – un unghi pe roata culorilor, de la 0° la 360°. 0° = roșu, 120° = verde, 240° = albastru.
- Saturația (Saturation) – procent 0–100%. 0% înseamnă gri desaturat, 100% culoare pură.
- Luminozitatea (Lightness) – procent 0–100%. 0% = negru, 100% = alb, 50% = culoarea „normală” (valoarea maximă a culorii pure).
De ce este mai intuitiv decât HEX?
- Pentru a obține o variantă mai deschisă a unei culori, măriți luminozitatea (L) și eventual reduceți saturația (S) – fără a atinge nuanța (H).
- Pentru a crea o paletă monocromatică, păstrați H constant și variați S și L.
- Pentru un contrast mai mare (accesibilitate), puteți modifica L păstrând H, ceea ce este mult mai simplu decât să recalculați manual hex.
Relația matematică dintre RGB și HSL
Conversia de la RGB la HSL nu este simplă, dar poate fi rezumată. Mai întâi, valorile RGB (0–255) se normalizează la intervalul 0–1 împărțind la 255. Apoi se calculează maximul (M) și minimul (m) dintre cele trei componente.
Luminozitatea = (M + m) / 2.
Saturația depinde de luminozitate:
- Dacă M = m (gri), saturația = 0.
- Altfel, delta = M - m.
Saturația = delta / (1 - |2L - 1|).
Nuanța se calculează în grade:
- Dacă roșul este maximul: H = 60 × ((G - B) / delta mod 6)
- Dacă verdele este maximul: H = 60 × ((B - R) / delta + 2)
- Dacă albastrul este maximul: H = 60 × ((R - G) / delta + 4)
Rezultatul este normalizat la 0–360. Această pagină execută exact acești pași în browser, fără intervenție externă.
Gama de culori și margini de eroare
Modelul HSL poate descrie culori care nu pot fi reproduse fizic pe un ecran sau în tipar. De exemplu, o nuanță cu saturație 100% și luminozitate 50% poate fi în afara gamutului sRGB. Pagina tratează această situație:
- Dacă introduceți o culoare în LAB sau CMYK (prin intermediul butoanelor de comutare) care depășește spațiul RGB, aceasta este ajustată la cea mai apropiată culoare afișabilă. Convertirea înapoi la HEX va da o valoare ușor diferită – nu este o eroare, ci o limitare fundamentală a ecranelor.
- CMYK este doar o estimare. Pentru tipărire profesională, folosiți un profil ICC și o unealtă dedicată.
Toate conversiile sunt locale – nu părăsesc niciodată calculatorul dumneavoastră.
Utilizări practice în dezvoltare web
- CSS custom properties: Folosiți HSL pentru a defini variabile și apoi ajustați luminozitatea pentru stări hover:
hsl(var(--hue), var(--sat), calc(var(--light) + 10%)). - Teme dark/light: Păstrați aceeași nuanță și saturație, modificați doar luminozitatea proporțional.
- Palete de culori: Generați culori complementare (H + 180), analogice (H ± 30) sau triadice (H ± 120) direct din HSL.
- Accesibilitate WCAG: Pentru contrast, HSL ajută rapid: măriți diferența de L între text și fundal. De exemplu, un text cu L=20% pe un fundal L=80% asigură de obicei un raport de contrast suficient.
Diferența dintre HSL și HSV/HSB
HSV (sau HSB – nuanță, saturație, valoare/brightness) este un alt model des întâlnit. Asemănările: ambele împart nuanța în grade. Diferența esențială: în HSV, „valoarea” (V) este luminozitatea maximă a componentei dominante, iar saturația este dispersia față de acea valoare. În HSL, luminozitatea este media dintre maxim și minim, iar saturația este distanța față de gri. Rezultatul: modificarea L în HSL produce un efect mai uniform perceptiv decât ajustarea V în HSV. De aceea, HSL este preferat pentru interfețe și generare de palete vizuale.
Întrebări frecvente
1. Pot introduce un cod HEX fără diez?
Da, pagina acceptă și coduri fără # (de exemplu, 4f46e5). Ea adaugă automat diezul intern.
2. De ce valorile CMYK diferă de cele din Photoshop?
Conversia CMYK de aici este o estimare generică (folosind un model simplificat fără profil ICC). Pentru tipărire reală, este necesar soft specializat cu separare corectă pe culori.
3. Se pierd informații când convertesc înapoi din HSL în HEX?
Teoretic nu, deoarece ambele modele descriu aceeași culoare RGB. Totuși, rotunjirile interne pot cauza diferențe de cel mult ±1 unitate (ex: #4f46e5 poate deveni #4f46e4). În practică, diferența este imperceptibilă.
4. Pot converti culori cu transparență (HEXA, RGBA)?
Nu, această pagină tratează numai culori opace complete. Formatele HEX standard (șase/trei cifre) și HSL nu includ canal alfa. Pentru transparență, consultați pagina dedicată RGBA/HSLA.
5. Ce se întâmplă dacă introdu un cod de trei cifre incorect (#xyz)?
Valorile x, y, z trebuie să fie cifre hexazecimale valide (0–9, a–f sau A–F). Altfel apare eroarea menționată.
6. De ce nu pot introduce #1234567?
Codul HEX standard are fie trei, fie șase cifre (plus eventual #). Șapte cifre nu sunt valide – nici măcar forma cu canal alfa (care ar fi opt cifre). Pagina respinge orice lungime diferită de 3 sau 6 cifre.