Conversie HEX în HSL Hexadecimal ↔ Hue Saturation Lightness Gratuit Online Sigur
Scrieți o valoare în HEX și o citiți pe loc în HSL. Socoteala se face în browserul dumneavoastră, nu se trimite nimic nicăieri, iar de ce depinde rezultatul scrie mai jos, nu se presupune.
Nu se încarcă nimic
De unde vin aceste notații
Hex și RGB sunt același lucru scris de două ori. O culoare de ecran înseamnă trei numere — câtă lumină roșie, verde și albastră să emită — fiecare de la 0 la 255, adică un octet; hexul scrie pur și simplu acei octeți în baza șaisprezece, așa că #FF8800 și rgb(255, 136, 0) sunt aceeași poruncă dată aceluiași pixel. HSL a fost născocit fiindcă niciuna din ele nu e citibilă de un om: dă nuanța ca un unghi pe roata culorilor, iar saturația și luminozitatea ca procente, așa încât un designer poate face ceva mai deschis fără să recalculeze trei cifre. CMYK ține de cu totul altă lume — de cerneală, nu de lumină. E substractiv, făcut din patru plăci de tipar, și nu poate ajunge la orice culoare pe care o poate da un ecran, fiindcă ecranul emite lumină, pe când hârtia doar o reflectă.
Unde le întâlniți
Hexul e ce scrieți într-o foaie de stil și ce vă dă o unealtă de design. RGB apare oriunde o culoare are nevoie de aritmetică — degradeuri, transparență, cod care calculează o nuanță. HSL e cel la care ajungeți când potriviți o paletă de mână, fiindcă schimbările pe care le vreți sunt de obicei schimbări ale uneia dintre cele trei cifre. CMYK e ce cere tipografia, iar conversia în el e clipa în care un design încetează să mai fie lumină și devine cerneală.
Întrebări frecvente
De ce rezultatul meu în CMYK diferă de ce îmi dă tipografia?
Fiindcă nu există o singură conversie corectă. Socoteala de pe această pagină e cea simplă, independentă de dispozitiv, și e răspunsul potrivit când aveți nevoie de un punct de plecare sau de un echivalent aproximativ. O tipografie convertește printr-un profil de culoare care ține cont de cerneala, de hârtia și de mașina anume, iar aceeași culoare RGB va da alte valori CMYK pe hârtie lucioasă decât pe una necretată. Pentru orice trebuie să se potrivească exact, cereți tipografiei profilul lor, în loc să vă încredeți într-o formulă.
De ce unele culori de ecran nu se pot tipări?
Fiindcă cele două nu ajung la aceleași culori. Ecranul face culoare adunând lumină și poate da un cyan sau un verde viu, saturat, pe care cerneala pur și simplu nu-l poate egala; hârtia face culoare absorbind lumina, iar cel mai luminos lucru la care poate ajunge e albul paginii. Mulțimea de culori la care ajunge fiecare se numește gamă, iar acolo unde ele nu se suprapun, o conversie trebuie să aleagă cea mai apropiată culoare disponibilă. De aceea o culoare vie de pe ecran arată adesea puțin stinsă la tipar.
Răspunsul este exact?
Acolo unde cele două unități se definesc una prin alta prin numere întregi, da — pagina o spune deasupra cifrei, iar singura rotunjire e în câte zecimale se arată. Acolo unde raportul nu are zecimală finită, pagina scrie douăsprezece cifre semnificative și spune că relația e aproximativă, în loc să se prefacă.
Pleacă de pe dispozitivul meu ceva din ce scriu?
Nu. Socoteala se face în browserul dumneavoastră; nu se încarcă nimic și nici n-are unde. Odată deschisă pagina, funcționează și cu internetul oprit.
De ce convertiți HEX în HSL
Un cod hex precum #5A4632 este un mod bun de a stoca o culoare și unul slab de a o gândi. Nimic din cifre nu vă spune că e un maro, cât de luminoasă este sau cum ar arăta o variantă ceva mai palidă. HSL a fost inventat ca să rezolve asta. Descrie o culoare așa cum tindem să vorbim despre ea: ce nuanță are, cât de vie este și cât de deschisă. A converti HEX în HSL înseamnă a traduce o culoare din forma pe care v-o dă o unealtă de design în forma cu care puteți raționa: hsl(30, 29%, 28%) este un maro-portocaliu închis, atenuat, și vedeți imediat că mărirea ultimului număr îl va face mai palid.
Acesta este adevăratul motiv pentru care designerii și dezvoltatorii de front-end folosesc conversia. Au o culoare de brand în hex și au nevoie de o familie de culori înrudite: una mai deschisă pentru starea de hover, una mai închisă pentru butonul apăsat, una foarte palidă pentru o nuanță de fundal, una desaturată pentru un control dezactivat. În hex, fiecare dintre ele este o nouă vânătoare de trei perechi de cifre. În HSL, fiecare este o schimbare a unui singur număr. Culoarea este aceeași culoare, văzută printr-o lentilă mai utilă.
Această pagină convertește în browserul dumneavoastră, iar nimic nu este încărcat. Mai jos veți găsi cum se calculează cele trei numere ale HSL din cifrele hex, ce păstrează conversia și unde rotunjește, ce înseamnă în practică nuanța, saturația și luminozitatea, cum folosesc designerii HSL pentru a construi palete și stări și capcanele în care cad cei care convertesc HEX în HSL pentru prima dată.
Ce descrie HSL
Nuanța: poziția pe cercul cromatic
Nuanța este un unghi de la 0 la 360 de grade în jurul unui cerc cromatic. Roșul se află la 0, galbenul la 60, verdele la 120, cyanul la 180, albastrul la 240 și magenta la 300; la 360 sunteți înapoi la roșu. O nuanță de 30 se află între roșu și galben, adică portocaliu. Numărul spune în ce familie de culori vă aflați și nimic despre cât de luminoasă sau palidă este.
Saturația: cât de vie
Saturația este un procent. La 100% culoarea este atât de pură cât permite nuanța; la 0% și-a pierdut toată culoarea și este un gri. O saturație de 29%, ca în maroul nostru exemplu, este o culoare atenuată, pământie. Scăderea saturației este cea mai rapidă cale de a face o culoare țipătoare mai calmă fără să-i schimbați caracterul.
Luminozitatea: cât de palidă sau închisă
Luminozitatea este tot un procent. La 0% culoarea este neagră indiferent de nuanță și saturație; la 100% este albă; la 50% este culoarea plină, normală. Maroul nostru la 28% este pe partea închisă. Mărirea numărului dă o variantă mai palidă a aceleiași culori, iar micșorarea una mai închisă, exact schimbarea pe care designerii o vor cel mai des.
De ce este mai ușor decât hexul
În hex, a face o culoare mai palidă înseamnă a crește toate cele trei perechi cu valori diferite, ca nuanța să nu derapeze, ceea ce e aproape imposibil de făcut din ochi. În HSL înseamnă a schimba o singură cifră și a le lăsa în pace pe celelalte două.
Cum funcționează conversia
De la trei octeți la un unghi și două procente
Convertorul citește mai întâi cifrele hex ca valorile de roșu, verde și albastru, fiecare de la 0 la 255, și le aduce la o scară între 0 și 1. Găsește cea mai mare și cea mai mică dintre cele trei. Luminozitatea este media celor două. Saturația depinde de cât de departe sunt una de alta, în raport cu luminozitatea. Nuanța depinde de care canal este cel mai mare și de cum se compară celelalte două. Dacă toate trei sunt egale, culoarea este un gri, saturația este zero, iar nuanța nu are sens; convertorul arată atunci 0 pentru ea.
Exemplul
Pentru #5A4632 octeții sunt 90, 70 și 50. Roșul este cel mai mare, la 0,353, albastrul cel mai mic, la 0,196. Luminozitatea este jumătate din suma lor, 0,275, adică aproximativ 28%. Diferența este 0,157, deci saturația este 0,157 împărțit la suma 0,549, aproximativ 29%. Roșul este canalul cel mai mare, iar verdele se află între ele, ceea ce pune nuanța la 30 de grade. Rezultatul este hsl(30, 29%, 28%).
Numere întregi
Cele trei numere sunt rotunjite la grade întregi și la procente întregi când sunt scrise. Aceasta este forma pe care o folosesc oamenii și pe care o așteaptă CSS în lucrul de zi cu zi, dar înseamnă că o parte din informație se pierde la ultima cifră, după cum explică secțiunea următoare.
Ce păstrează conversia și ce nu poate
Păstrează culoarea așa cum o sortează ochiul
Rezultatul este culoarea așa cum o sortează ochiul: o nuanță pe cerc, cât de saturată este, cât de deschisă. De aceea merită să aveți HSL. Puteți face o culoare mai palidă sau o nuanță mai închisă schimbând un singur număr, ceea ce în hex este aproape imposibil.
Nu poate promite aceiași octeți înapoi
Cele două descriu aceleași culori, dar HSL ajunge la ele printr-o geometrie diferită, iar cele trei numere ale sale sunt rotunjite la grade întregi și la procente întregi când sunt scrise. Așa că o culoare dusă în HSL și înapoi poate ateriza la unu sau doi pași de unde a pornit: vizual aceeași, nu octet cu octet aceeași. Dacă aveți nevoie de octeții exacți înapoi, păstrați hexul. Convertiți HEX în HSL ca să lucrați cu o culoare și păstrați hexul ca master.
Grișurile nu au nuanță
Când cei trei octeți sunt egali, nu e nimic de spus despre nuanță. Convertorul dă o nuanță de 0 și o saturație de 0%, iar luminozitatea singură descrie griul. Nu citiți nimic în acel 0.
Folosirea HSL în practică
Construirea unei familii de nuanțe
Luați culoarea de bază hsl(30, 29%, 28%). O nuanță mai deschisă pentru hover este hsl(30, 29%, 34%). O nuanță foarte palidă pentru fundal este hsl(30, 29%, 94%). O nuanță mai închisă pentru stările apăsate este hsl(30, 29%, 22%). Nuanța și saturația rămân pe loc, deci culorile evident se potrivesc. A face același lucru în hex ar cere mai multe încercări și tot ar arăta puțin deplasat.
Teme și modul întunecat
O temă are adesea nevoie de aceeași paletă într-o versiune deschisă și una întunecată. Cu HSL păstrați nuanța și ajustați luminozitatea și saturația: deschideți fundalurile și închideți textul pentru tema deschisă, iar invers pentru cea întunecată. Definirea nuanței ca proprietate personalizată și variația doar a luminozității este un mod frecvent și ordonat de a o face.
Generarea paletelor
Ca să găsiți culori care se potrivesc cu una de bază, rotiți nuanța. Treizeci de grade de o parte și de alta dau culori analoage, 180 dă complementara, iar 120 sau 240 dau o triadă. Fixați saturația și luminozitatea, schimbați nuanța, iar culorile au un aer uniform. Este o cale rapidă de a începe o paletă care nu pare aleatorie.
Contrast accesibil
Luminozitatea este controlul principal pentru contrast. Dacă textul se citește greu pe un fundal colorat, soluția este de obicei să măriți diferența de luminozitate dintre ele, iar HSL face din asta o chestiune de ajustat un număr de fiecare parte.
Cum convertiți aici HEX în HSL
Tastați sau lipiți codul hex
Introduceți culoarea în primul câmp, cu sau fără semnul diez. Sunt acceptate formele cu trei și cu șase cifre, iar forma cu opt cifre, cu transparență, este citită și ea.
Citiți valoarea hsl
Răspunsul apare imediat, ca în #5A4632 = hsl(30, 29%, 28%). Cele trei numere sunt nuanța în grade și saturația și luminozitatea în procente.
Copiați-o în foaia de stil
Folosiți rezultatul așa cum este, într-o regulă precum color: hsl(30, 29%, 28%). Ca să ajustați culoarea, schimbați ultima cifră. Unealta pentru sensul opus este HSL în HEX.
De unde vin aceste notații
Hex și RGB sunt același lucru scris de două ori
O culoare de ecran înseamnă trei numere, cât roșu, verde și albastru să emită, fiecare de la 0 la 255, adică un octet. Hexul scrie pur și simplu acei octeți în baza șaisprezece. Ca să vedeți numerele, convertiți HEX în RGB.
HSL și CMYK
HSL a fost inventat pentru că niciunul dintre ele nu este lizibil pentru un om: dă nuanța ca un unghi pe un cerc cromatic, cu saturația și luminozitatea ca procente, astfel încât un designer poate face ceva mai deschis fără să recalculeze trei cifre. CMYK aparține unei lumi cu totul diferite, cea a cernelii, nu a luminii. Este subtractiv, construit din patru clișee de tipar, și nu poate atinge toate culorile pe care le poate un ecran, pentru că un ecran emite lumină, în timp ce hârtia doar o reflectă.
Capcane când convertiți HEX în HSL
Așteptarea unui dus-întors perfect
Din cauza rotunjirii, conversia înapoi poate da un cod la unu sau doi pași de original. Pentru o singură culoare este invizibil. Pentru un sistem de design în care multe culori sunt convertite încoace și încolo, se poate acumula. Păstrați hexul ca sursă.
Presupunerea că luminozitate egală înseamnă strălucire egală
Două culori cu aceeași luminozitate HSL pot arăta destul de diferit ca strălucire: un galben la 50% pare mult mai strălucitor decât un albastru la 50%. Luminozitatea HSL este un număr comod, nu o măsură a strălucirii percepute. Pentru verificări de contrast, folosiți o unealtă adecvată de contrast.
Uitarea semnelor de procent
În CSS, saturația și luminozitatea din hsl() poartă semne de procent, iar nuanța este un număr simplu sau un număr cu deg. Omiterea semnelor este o greșeală clasică.
Citirea prea multor lucruri într-un gri
Un gri nu are nuanță. Dacă convertorul arată 0 pentru el, nu înseamnă că este roșiatic.
Întrebări pe care și le pun oamenii înainte de conversie
Ce este #FF0000 în HSL?
hsl(0, 100%, 50%), roșu pur.
Ce este #FFFFFF în HSL?
hsl(0, 0%, 100%), alb. Nuanța nu are sens pentru alb, iar convertorul arată 0.
Este HSL susținut peste tot?
Toate browserele actuale înțeleg hsl() și hsla(). Este în CSS de mulți ani.
Este conversia exactă?
Este exactă în sensul că descrie aceeași culoare, dar numerele sunt rotunjite la grade și procente întregi, deci întoarcerea poate ateriza la un pas distanță.
Este culoarea mea încărcată?
Nu. Aritmetica rulează în browserul dumneavoastră și nimic nu este trimis nicăieri.
Cum mă întorc?
Cu HSL în HEX.
Alegeri înțelepte când convertiți HEX în HSL
Folosiți HSL ca să lucrați, hexul ca să stocați
Păstrați paleta master în hex, unde este lipsită de ambiguitate, și folosiți HSL când vreți să creați variații. Dusul-întors pierde puțin; masterul nu.
Luați în calcul spațiile de culoare mai noi
CSS oferă acum oklch() și notații similare în care luminozitatea egală chiar arată egală. Merită învățate pentru sistemele de design noi. HSL rămâne notația pe care aproape toată lumea o înțelege și pe care o susține fiecare unealtă.
Folosiți proprietăți personalizate
Definiți --hue, --sat și --light și construiți culorile din ele: hsl(var(--hue) var(--sat) var(--light)). O temă se schimbă atunci editând câteva numere.
Citirea și scrierea HSL cu încredere
Câteva repere de ținut minte
Câteva numere fac HSL mai ușor de citit. Nuanțele la multipli de 60 sunt culorile pure: 0 roșu, 60 galben, 120 verde, 180 cyan, 240 albastru, 300 magenta. O luminozitate de 50 cu o saturație de 100 dă versiunea cea mai pură a oricărei nuanțe, iar o luminozitate de 95 sau mai mult este o tentă atât de palidă încât funcționează ca fundal. Când convertiți HEX în HSL și vedeți o nuanță aproape de unul dintre aceste repere, puteți numi familia de culori dintr-o privire.
Trecerea între familii
Adăugarea lui 180 la o nuanță dă culoarea opusă pe cerc, care este complementara și de obicei contrastul cel mai puternic. Adăugarea sau scăderea lui 30 dă o vecină care stă confortabil lângă original. Designerii folosesc acești pași ca să aleagă accente care se potrivesc cu o culoare de brand fără să ghicească.
Notarea valorilor convertite
Când convertiți HEX în HSL pentru o paletă, scrieți rezultatele într-un tabel cu hexul original alături. Tabelul arată cum se raportează culorile între ele, iar dacă o nuanță sau o luminozitate iese din rând față de celelalte, ciudățenia se vede imediat. Oferă și echipei dumneavoastră o referință comună.
Testarea pe ecrane reale
Culorile care arată echilibrat pe un monitor calibrat pot arăta diferit pe un telefon la soare sau pe un laptop ieftin. Verificați paleta finită pe cel puțin două dispozitive și ajustați puțin luminozitatea dacă tentele palide dispar pe unul dintre ele.
Convertoare înrudite
Aceeași familie de unelte acoperă conversiile învecinate. Ca să vă întoarceți, folosiți HSL în HEX. Pentru numerele din spatele codului, există HEX în RGB și RGB în HEX, iar pentru tipar, HEX în CMYK și CMYK în HEX. Pentru dimensiunile din aceeași foaie de stil, px în rem și px în em fac pentru lungimi ce face această pagină pentru culori.
Un exemplu lucrat
Să spunem că culoarea dumneavoastră de brand este #1E7A5C. Convertiți HEX în HSL și citiți hsl(160, 61%, 30%). Pentru o stare de hover scrieți hsl(160, 61%, 36%), puțin mai deschis. Pentru o stare apăsată, hsl(160, 61%, 24%). Pentru un fundal foarte palid în spatele unei notificări, hsl(160, 40%, 95%). Pentru un buton dezactivat, hsl(160, 12%, 60%), aceeași nuanță cu cea mai mare parte a culorii scoasă. Cinci culori, o singură nuanță, scrise într-un minut, iar toate arată de parcă s-ar potrivi. Când culoarea brandului se schimbă, schimbați o singură dată numărul nuanței.
O listă scurtă de verificare
Înainte de conversie
Hotărâți ce vreți să faceți cu culoarea: s-o variați, s-o includeți într-o temă sau doar s-o citiți.
În timpul conversiei
Lipiți hexul, citiți valoarea hsl și notați cele trei numere.
După conversie
Faceți variațiile schimbând câte un număr o dată și priviți-le pe fundalul real.
Greșeli frecvente
Tratarea numerelor rotunjite ca exacte
Sunt numere întregi. Păstrați hexul ca master.
Echivalarea luminozității cu strălucirea
Două culori la aceeași luminozitate pot diferi mult ca strălucire percepută.
Omiterea semnelor de procent
Saturația și luminozitatea au nevoie de ele în CSS.
Culorile dumneavoastră rămân pe dispozitiv
Calculul are loc local. Valorile dumneavoastră sunt folosite de propriul browser și nimic nu este trimis nicăieri. Nu rămâne nimic de șters după aceea și nu trebuie creat niciun cont. Aceasta este calea simplă de a converti HEX în HSL.
Rezumat
Ca să convertiți aici HEX în HSL, tastați sau lipiți codul hex și citiți imediat valoarea hsl. Conversia păstrează culoarea așa cum o sortează ochiul: o nuanță pe cerc, cât de saturată este, cât de deschisă. De aceea merită să aveți HSL, fiindcă puteți face o culoare mai palidă sau o nuanță mai închisă schimbând un singur număr, ceea ce în hex este aproape imposibil. Cele două descriu aceleași culori, dar HSL ajunge la ele printr-o geometrie diferită, iar cele trei numere ale sale sunt rotunjite la grade întregi și la procente întregi, deci o culoare dusă în HSL și înapoi poate ateriza la unu sau doi pași de unde a pornit. Dacă aveți nevoie de octeții exacți înapoi, păstrați hexul. Nimic nu este încărcat.