Conversie HSL în HEX Hue Saturation Lightness ↔ Hexadecimal Gratuit Online Sigur
Scrieți o valoare în HSL și o citiți pe loc în HEX. 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 HSL în HEX
Ați stabilit o culoare în HSL, pentru că este notația în care puteți gândi: nuanța 30, saturația 29%, luminozitatea 28%, un maro atenuat, și o variantă mai palidă la 34% pentru starea de hover. Acum culoarea trebuie să ajungă undeva unde se cere un cod hex: un fișier de tokeni de design, o fișă de brand, o unealtă care nu înțelege hsl(), un șablon de e-mail, un mesaj către un coleg. A converti HSL în HEX înseamnă a lua culoarea la care ați raționat și a o scrie în forma care este scurtă, lipsită de ambiguitate și înțeleasă de orice.
Conversia merge în sens opus celui pe care îl întâlnesc primul designerii. Pornește de la trei numere prietenoase pentru oameni și ajunge la trei octeți. Fiecare pas este aritmetică simplă, dar implică câteva cazuri asemănătoare trigonometriei și rotunjiri, motiv pentru care oamenii preferă să le facă altcineva. Pagina o face în browserul dumneavoastră, iar nimic nu este încărcat. Mai jos veți găsi cum devin cele trei numere cele șase cifre hex, ce păstrează conversia, de ce o culoare care a trecut prin HSL poate ateriza la un pas sau doi de unde a pornit, felurile în care designerii folosesc conversia și capcanele de evitat.
Cum funcționează conversia
De la nuanță, saturație și luminozitate la roșu, verde și albastru
Convertorul calculează mai întâi croma, adică cât de departe este culoarea de gri: crește cu saturația și scade pe măsură ce luminozitatea se îndepărtează de 50%. Apoi așază nuanța într-unul din cele șase sectoare ale cercului cromatic, fiecare lat de 60 de grade, și din sector hotărăște care dintre cele trei canale este la maximum, care la minimum și care se află între ele. În final adaugă o constantă ca luminozitatea să iasă corect, aduce cele trei valori de la intervalul 0 până la 1 la 0 până la 255 și rotunjește fiecare la un număr întreg. Acei trei octeți sunt scriși în baza șaisprezece, câte două cifre fiecare.
Un exemplu cu numere
Luați hsl(30, 29%, 28%). Croma este (1 − |2 × 0,28 − 1|) × 0,29 = 0,56 × 0,29 = 0,1624. Nuanța de 30 de grade se află la jumătatea primului sector, deci canalul de mijloc este jumătate din cromă, 0,0812. Constanta de adăugat este 0,28 − 0,0812 = 0,1988. Așadar roșul este 0,1624 + 0,1988 = 0,3612, verdele este 0,0812 + 0,1988 = 0,28, iar albastrul este 0,1988. Înmulțite cu 255 și rotunjite, acestea sunt 92, 71 și 51. În hex, aceasta este #5C4733.
Grișurile
Când saturația este 0%, culoarea este un gri oricare ar fi nuanța, iar cei trei octeți sunt egali. hsl(0, 0%, 50%) este #808080. Nuanța este ignorată, deci orice număr de nuanță dă același gri.
Ce păstrează conversia și ce nu poate
Păstrează culoarea așa cum ați descris-o
Rezultatul este culoarea ale cărei nuanță, saturație și luminozitate le-ați dat, scrisă ca octeți. Cele trei numere pe care le-ați tastat sunt 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, iar conversia duce alegerea dumneavoastră în hex fidel.
Nu poate promite aceleași numere la întoarcere
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. În exemplul nostru, #5A4632 era o culoare al cărei HSL este aproximativ hsl(30, 29%, 28%); convertind înapoi aceste cifre rotunjite se obține #5C4733, la doi pași în roșu. Dacă aveți nevoie de octeții exacți, păstrați hexul.
Semnele de procent și de grad
Pagina citește nuanța în grade și saturația și luminozitatea în procente. Le puteți scrie cu sau fără semne. O nuanță peste 360 sau sub 0 este înfășurată în jurul cercului, deci 390 este același lucru cu 30.
Utilizări practice
Scrierea unui fișier de tokeni de design
Un sistem de design stochează culorile ca tokeni. Multe echipe creează culori în HSL, pentru că pot raționa despre ele, și le publică în hex, pentru că fiecare unealtă îl citește. Convertiți HSL în HEX o dată pentru fiecare token, iar fișierul publicat este ceva ce poate folosi oricine.
Producerea de culori pentru unelte care nu citesc hsl()
Clienții de e-mail, unele editoare de documente, programele grafice mai vechi și multe biblioteci de grafice acceptă doar hex. Orice ați stabilit în HSL trebuie convertit înainte ca ele să-l poată folosi.
Verificarea unei palete generate
Un script care generează o paletă rotind nuanța dă o listă de valori hsl(). Ca să le vedeți ca codurile pe care le-ați pune într-o foaie de stil sau le-ați da unui designer, convertiți fiecare în hex. Vă lasă și să observați valorile care se rotunjesc la același cod și deci nu sunt de fapt diferite.
Partajarea unei culori într-un mesaj
Un cod hex este scurt, copiabil și înțeles de aproape oricine lucrează cu culoare. O valoare hsl() este mai lungă și mai puțin familiară în afara designului. Când trimiteți o culoare cuiva, hexul este forma politicoasă.
Cum convertiți aici HSL în HEX
Tastați sau lipiți valoarea hsl
Introduceți culoarea în primul câmp în forma hsl(30, 29%, 28%), sau doar cele trei numere. Nuanța este în grade, saturația și luminozitatea în procente.
Citiți codul hex
Răspunsul apare imediat, ca în hsl(30, 29%, 28%) = #5C4733. Este scris cu litere mari și cu semnul diez.
Copiați-l în lucrarea dumneavoastră
Folosiți codul în foaia de stil, în fișierul de tokeni sau în mesaj. Pentru sensul opus, HEX în HSL este la un clic distanță.
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 HSL în HEX
Așteptarea codului original înapoi
Dacă ați pornit de la un cod hex, l-ați convertit în HSL, n-ați ajustat nimic și ați convertit înapoi, puteți obține un cod diferit, la un pas sau doi distanță. Pentru o singură culoare este invizibil. Pentru un sistem de design, hotărâți care formă este masterul și tratați-o pe cealaltă ca derivată.
Amestecarea saturației cu luminozitatea
Cele două se schimbă ușor din greșeală: hsl(30, 28%, 29%) nu este hsl(30, 29%, 28%). Ordinea este nuanță, saturație, luminozitate. Dacă culoarea de pe ecran nu arată cum vă așteptați, verificați că nu le-ați inversat.
Uitarea faptului că luminozitatea nu este strălucire
Două culori cu aceeași luminozitate pot arăta diferit ca strălucire. Galbenul la 50% luminozitate pare mult mai strălucitor decât albastrul la 50%. Dacă alegeți culori pentru text și fundal, verificați contrastul lor cu o unealtă adecvată, nu comparând numerele de luminozitate.
Folosirea valorilor din afara intervalului
Saturația și luminozitatea sunt limitate la 0 până la 100 la sută. Valorile din afara acestui interval sunt tăiate la margine. O luminozitate de 120% nu este mai strălucitoare decât albul; este alb.
Întrebări pe care și le pun oamenii înainte de conversie
Ce este hsl(0, 100%, 50%) în hex?
#FF0000, roșu pur.
Ce este hsl(0, 0%, 100%) în hex?
#FFFFFF, alb.
Pot folosi zecimale?
Da. hsl(30.5, 28.6%, 27.8%) este acceptat. Rezultatul este rotunjit la octeți întregi.
Este conversia exactă?
Dă octeții exacți pentru numerele pe care le-ați tastat, rotunjiți la valori întregi. Întoarcerea poate ateriza la un pas distanță, pentru că numerele HSL au fost rotunjite.
Este culoarea mea încărcată?
Nu. Aritmetica rulează în browserul dumneavoastră și nimic nu este trimis nicăieri.
Cum mă întorc?
Cu HEX în HSL.
Alegeri înțelepte când convertiți HSL în HEX
Hotărâți care formă este masterul
Dacă proiectați în HSL, păstrați valorile HSL ca sursă și publicați hexul ca rezultat. Dacă brandul vă dă hex, păstrați-l și folosiți HSL doar pentru variații. Amestecarea celor două ca surse egale este ceea ce creează deriva.
Folosiți HSL pentru variație, hexul pentru fixare
Când aveți nevoie de o familie de nuanțe, lucrați în HSL. Când trebuie să fixați o culoare ca să fie identică în fiecare unealtă, scrieți-o ca hex.
Păstrați numerele pe care le-ați tastat
Notați valorile HSL lângă hex în nota paletei. Dacă cineva vrea mai târziu o variantă mai palidă, poate porni de la numerele dumneavoastră și nu de la un cod deja rotunjit.
Cele șase sectoare ale cercului
Care canal e sus, care e jos
Conversia împarte cercul în șase sectoare de 60 de grade, iar în fiecare dintre ele un canal este la maximum, unul la minimum, iar al treilea se schimbă lin. De la 0 la 60, roșul este la maximum, albastrul la minimum și verdele crește: roșul trece în galben. De la 60 la 120, verdele este la maximum și roșul scade: galbenul trece în verde. De la 120 la 180, verdele rămâne sus și albastrul crește: verdele trece în cyan. De la 180 la 240, albastrul preia și verdele scade. De la 240 la 300, albastrul rămâne sus și roșul crește: albastrul trece în magenta. De la 300 la 360, roșul preia din nou și albastrul scade. Când convertiți HSL în HEX, ajută să știți în ce sector se află nuanța dumneavoastră, pentru că vă spune care dintre cele trei perechi din răspuns va fi cea mai mare.
De ce răspunsul are un aer de familie
Culorile cu aceeași nuanță și saturație, dar cu luminozitate diferită, dau coduri hex care arată ca niște rude: același tipar al perechii mari și al celei mici, doar scalat în sus sau în jos. #5C4733, #7A5F44 și #A38461 sunt toate din aceeași familie, cu roșul cel mai mare, apoi verdele, apoi albastrul. Puteți învăța să citiți asta dintr-o privire, iar greșelile devin mai ușor de prins.
Construirea unei rampe de luminozitate
O nuanță, nouă trepte
O utilizare foarte practică a conversiei este construirea unei rampe dintr-o singură culoare, de la foarte palidă la foarte închisă, genul de scală pe care sistemele de design o etichetează 50, 100, 200 și tot așa până la 900. Alegeți o nuanță și o saturație și treceți luminozitatea prin valori precum 96, 90, 80, 70, 60, 50, 40, 30 și 20 la sută. Convertiți HSL în HEX pentru fiecare treaptă și aveți nouă coduri care se potrivesc. Reducerea ușoară a saturației la extreme, câteva puncte la cele mai palide și cele mai închise trepte, arată adesea mai firesc decât menținerea ei constantă.
Numirea treptelor
Dați fiecărei trepte un nume care îi înregistrează rolul, nu valoarea: suprafață pentru cea mai palidă, chenar pentru următoarea, text pentru cea mai închisă. În cod, un nume îi spune următorului cititor pentru ce este culoarea și puteți schimba numărul din spatele lui fără să atingeți regulile care îl folosesc.
Teme deschise și întunecate
Oglindirea rampei
O temă întunecată este adesea tema deschisă cu rampa întoarsă: treapta cea mai palidă devine fundalul paginii în tema deschisă, iar cea mai închisă devine fundalul în cea întunecată. Dacă ați construit rampa în HSL, tema întunecată nu vă costă decât un al doilea set de conversii. Păstrați nuanța fixă, ceea ce păstrează caracterul brandului, și ajustați puțin saturația, deoarece culorile saturate tind să pară aspre pe fundaluri întunecate.
Verificarea ambelor teme
Testați contrastul fiecărei perechi text-fundal din ambele teme. O culoare care merge pe alb poate eșua pe aproape negru, iar verificarea durează un minut cu o unealtă de contrast și codurile hex pe care tocmai le-ați produs.
Când aveți doar o idee vagă despre culoare
Porniți de la cerc, apoi rafinați
Uneori nu aveți deloc un cod hex, doar o idee: un albastru calm, un portocaliu cald, un verde proaspăt. HSL este un loc bun de pornire, pentru că puteți alege o nuanță dintre reperele cercului, puteți seta o saturație moderată și o luminozitate la mijloc, apoi puteți converti HSL în HEX ca să vedeți ce aveți. Dacă pare prea țipător, scădeți saturația; dacă pare plat, mutați luminozitatea. Fiecare încercare costă secunde, iar la sfârșit aveți un cod hex pe care îl puteți pune direct într-o foaie de stil.
Convertoare înrudite
Aceeași familie de unelte acoperă conversiile învecinate. Ca să vă întoarceți, folosiți HEX în HSL. 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 face pentru lungimi ce face această pagină pentru culori.
Un exemplu lucrat
Să spunem că ați ales un verde pentru starea de succes a unei aplicații: hsl(145, 55%, 38%). Îl tastați și citiți #2C9658. Folosiți acel cod în fișierul de tokeni ca --success. Pentru fundalul unei notificări de succes luați aceeași nuanță, hsl(145, 45%, 94%), și citiți #E9F7EF. Pentru chenar, hsl(145, 45%, 78%), care se citește #AEE0C3. Trei coduri, o singură nuanță, toate derivate într-un minut, iar fiecare este un simplu cod hex pe care îl poate deschide orice unealtă din echipă.
O listă scurtă de verificare
Înainte de conversie
Verificați ordinea celor trei numere: nuanță, saturație, luminozitate. Hotărâți care formă este masterul dumneavoastră.
În timpul conversiei
Tastați valorile, citiți hexul și copiați-l cu semnul diez.
După conversie
Priviți culoarea pe ecran, în context, și notați valorile HSL lângă cod pentru mai târziu.
Greșeli frecvente
Inversarea saturației cu luminozitatea
Ordinea este nuanță, saturație, luminozitate.
Așteptarea de a recupera hexul vechi
Poate ateriza la un pas distanță. Păstrați originalul dacă contează.
Compararea luminozității în loc de contrast
Folosiți o unealtă de contrast pentru text și fundal.
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 HSL în HEX.
Rezumat
Ca să convertiți aici HSL în HEX, tastați nuanța în grade și saturația și luminozitatea în procente și citiți imediat codul hex. Conversia păstrează culoarea așa cum o sortează ochiul: o nuanță pe cerc, cât de saturată este, cât de deschisă. Cele două notații 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, păstrați hexul. Nimic nu este încărcat.