Conversie RGB în HEX Red Green Blue ↔ Hexadecimal Gratuit Online Sigur
Scrieți o valoare în RGB ș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 RGB în HEX
Un editor de imagini, un selector de culori din sistemul de operare sau o linie de cod vă dă o culoare sub forma a trei numere: 90, 70, 50. O foaie de stil, un fișier de jetoane de design sau un mesaj către un coleg o vrea ca un singur cod scurt: #5A4632. Pasul dintre ele este ce face această pagină. A converti RGB în HEX înseamnă a scrie aceleași trei numere în baza șaisprezece, câte două cifre fiecare, și a pune în față semnul diez. Este ușor de făcut pentru o singură culoare și obositor pentru douăzeci, și este ușor de greșit când un număr cere un zero în față sau o cifră este o literă.
Conversia este exactă, ceea ce nu este adevărat pentru orice conversie de culoare. Hex și rgb() sunt două scrieri ale acelorași trei numere, cantitățile de lumină roșie, verde și albastră pe care ar trebui să le emită un ecran, fiecare de la 0 la 255. Nimic nu este aproximat, iar dus-întorsul readuce ce a pornit. Pagina o face în browserul dumneavoastră și nimic nu este încărcat. Mai jos veți găsi cum devine fiecare număr două cifre hex, cum este purtată transparența, limitele lui sRGB, locurile în care oamenii au nevoie să convertească RGB în HEX și câteva obiceiuri care păstrează culorile unui proiect consecvente.
Cum funcționează conversia
Fiecare număr devine două cifre hex
Luați rgb(90, 70, 50). Împărțiți fiecare număr la șaisprezece: 90 este 5 ori 16 plus 10, iar 10 este cifra A, deci 90 devine 5A. 70 este 4 ori 16 plus 6, deci 46. 50 este 3 ori 16 plus 2, deci 32. Puneți cele trei perechi la un loc și adăugați semnul diez: #5A4632. Pagina face asta în locul dumneavoastră în timp ce tastați și arată fraza rgb(90, 70, 50) = #5A4632 ca s-o puteți verifica.
Zerourile din față
Fiecare pereche trebuie să aibă două cifre. Un număr sub 16 cere un zero în față: 7 devine 07, iar 0 devine 00. Deci rgb(0, 7, 255) este #0007FF, nu #07FF, care ar însemna ceva cu totul diferit. Uitarea zeroului este cea mai frecventă greșeală când faceți conversia de mână.
Intervalul
Fiecare număr trebuie să se afle între 0 și 255. O valoare peste 255 nu poate fi scrisă în două cifre hex, iar o valoare negativă nu are sens. Dacă un calcul din codul dumneavoastră a produs 270 sau −5, limitați-l mai întâi la interval. Convertorul face la fel, ca să nu producă niciodată un cod invalid.
Ce păstrează conversia și ce nu poate păstra
Păstrează culoarea, exact
Hex și rgb() sunt două scrieri ale acelorași trei numere, de la 0 la 255 pentru roșu, verde și albastru, deci nimic nu este aproximat, iar dus-întorsul readuce ce a pornit. Convertiți RGB în HEX și înapoi și aveți numerele cu care ați început.
Poartă transparența mai departe
O a patra valoare, pentru transparență, este purtată și ea: #RRGGBBAA devine rgba() și invers. O transparență de 0.5 devine perechea 80, deoarece jumătate din 255 este aproximativ 128, care în hex este 80. Deci rgba(90, 70, 50, 0.5) este #5A463280. Hex-ul cu opt cifre este acceptat de toate browserele actuale.
Nu poate descrie culori din afara lui sRGB
Ambele scrieri descriu sRGB, spațiul de culoare pe care îl folosește un ecran de treizeci de ani. Nu pot descrie o culoare din afara lui, pentru ceea ce există notațiile CSS mai noi, lab(), oklch() și color(). Dacă porniți de la o culoare dintr-o unealtă cu gamă largă, cele trei numere pe care le copiați sunt deja versiunea sRGB, iar hex-ul este fidel acestora.
Nu păstrează forma prescurtată
Acolo unde un cod ar putea fi scris în trei cifre, precum #AABBCC ca #ABC, convertorul dă forma lungă. Forma lungă este întotdeauna validă și aceeași culoare; forma scurtă este doar o comoditate pentru cititor.
Culori uzuale și codurile lor
Câteva de ținut minte
rgb(255, 255, 255) este #FFFFFF, alb: toate cele trei lumini la putere maximă. rgb(0, 0, 0) este #000000, negru: deloc lumină. rgb(255, 0, 0) este #FF0000, roșu pur; rgb(0, 255, 0) este #00FF00, iar rgb(0, 0, 255) este #0000FF. Orice culoare cu trei numere egale este un gri, iar codul ei are trei perechi egale: rgb(128, 128, 128) este #808080.
Obiceiul „web-safe”
Ghidurile mai vechi vorbeau despre culori web-safe, ale căror perechi erau doar 00, 33, 66, 99, CC sau FF. Aparțin vremurilor ecranelor cu 256 de culori și nu au niciun motiv să supraviețuiască. Folosiți orice valoare doriți; ecranul le poate arăta pe toate.
Cum convertiți RGB în HEX aici
Introduceți cele trei numere
Scrieți culoarea în primul câmp sub forma rgb(90, 70, 50) sau cu numerele separate prin virgule sau spații. Procentele nu sunt necesare; folosiți numere de la 0 la 255.
Citiți codul hex
Răspunsul apare imediat în celălalt câmp, începând cu un semn diez, cu litere mari. Dacă ați dat o a patra valoare, pentru transparență, codul are opt cifre.
Copiați-l în lucrarea dumneavoastră
Lipiți codul în foaia de stil, în fișierul de jetoane sau în mesaj. Adăugați-l la nota paletei dumneavoastră, astfel încât următoarea conversie să fie o simplă căutare.
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. Hex pur și simplu scrie acei octeți în baza șaisprezece, deci #FF8800 și rgb(255, 136, 0) sunt aceeași instrucțiune pentru același pixel.
HSL și CMYK
HSL a fost inventat pentru că niciuna nu este lizibilă pentru om: dă nuanța ca 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 cu totul altei lumi, cerneala în loc de lumină. Este subtractiv, construit din patru plăci de tipar, și nu poate atinge fiecare culoare pe care o poate atinge un ecran, pentru că un ecran emite lumină, iar hârtia doar o reflectă. Vedeți HEX în HSL și RGB în CMYK.
Unde le întâlniți
În predarea designului
Un designer lucrează într-un editor care arată valori rgb sau un selector; dezvoltatorul are nevoie de hex pentru foaia de stil. Convertirea RGB în HEX este pasul din mijloc și se face pentru fiecare culoare dintr-o paletă.
În scripturi care calculează culori
Un script care amestecă două culori sau închide una lucrează cu numere și se încheie cu trei dintre ele. Ca să folosiți rezultatul într-o foaie de stil sau să-l afișați, trebuie scris ca un cod hex. A o face de mână în cod înseamnă câteva linii; verificarea rezultatului cu un convertor este mai rapidă.
În vizualizarea datelor
Bibliotecile de grafice acceptă culori ca șiruri hex. Paletele generate prin metode numerice ies ca triplete rgb. Un pas de conversie le transformă pe unele în celelalte.
În documente și prezentări
Programele de birou arată culorile ca numere RGB; editoarele web vor hex. Când o culoare de brand trebuie să apară în ambele, conversia le păstrează identice.
Capcane când convertiți RGB în HEX
Uitarea zeroului din față
Scrierea lui 7 ca 7 și nu ca 07 mută fiecare cifră următoare. Folosiți întotdeauna două cifre pe pereche.
Confuzia dintre procent și 0 până la 255
rgb(35%, 27%, 20%) este o altă scriere a numerelor, cu 100 la sută fiind 255. Dacă sursa dumneavoastră folosește procente, convertiți-le mai întâi la 0 până la 255: înmulțiți cu 2.55.
Erori de rotunjire în culorile calculate
Un script care produce 127.5 trebuie să hotărască dacă este 127 sau 128. Diferența este invizibilă, dar face două coduri pentru ceea ce credeați că este o singură culoare. Rotunjiți la fel peste tot.
Luarea culorii dintr-o captură de ecran
O culoare citită dintr-o captură de ecran a trecut prin gestionarea culorii ecranului și poate prin compresie. Poate diferi cu un pas sau doi de sursă. Folosiți fișierul de design când puteți.
Întrebări pe care și le pun oamenii înainte de conversie
Cât este rgb(255, 0, 0) în hex?
#FF0000, roșu pur.
Cât este rgb(0, 0, 0) în hex?
#000000, negru.
Pot folosi litere mici în codul hex?
Da. #5a4632 și #5A4632 sunt aceeași culoare. Pagina scrie cu majuscule.
Este conversia exactă?
Da. Sunt două scrieri ale acelorași trei numere.
Este culoarea mea încărcată?
Nu. Aritmetica rulează în browserul dumneavoastră și nimic nu este trimis nicăieri.
Cum mă întorc?
Cu HEX în RGB, care citește cele trei perechi ca numere.
Obiceiuri care păstrează culorile consecvente într-un proiect
Definiți fiecare culoare o singură dată
Puneți paleta în proprietăți personalizate, precum --brand: #5A4632, și faceți referire la culori după nume. Când convertiți RGB în HEX pentru o culoare nouă, adăugați o linie, iar fiecare folosire o urmează.
Alegeți o singură formă de scriere
Alegeți majuscule sau minuscule pentru codurile hex și rămâneți la ele. O căutare a unei culori în cod este atunci de încredere.
Notați sursa
Lângă fiecare culoare notați de unde vine: ghidul de brand, o siglă, o imagine eșantionată. Când apare întrebarea dacă o culoare este corectă, știți unde să verificați.
Testați contrastul
Pentru text pe un fundal colorat, verificați raportul de contrast cu o unealtă. Numerele din forma rgb intră direct în formulă, iar forma hex este ce scrieți în cele mai multe verificatoare.
De ce 256 de trepte și ce se află în spatele numerelor
Opt biți pentru fiecare lumină
Fiecare dintre cele trei numere este stocat în opt biți, ceea ce permite 256 de valori de la 0 la 255. Trei dintre ele împreună dau 256 × 256 × 256, aproximativ 16,7 milioane de combinații, mai mult decât poate distinge ochiul în cele mai multe condiții. Acesta este motivul pentru care codurile hex au exact șase cifre: două pentru fiecare lumină, nici mai multe, nici mai puține. Când convertiți RGB în HEX, scrieți trei octeți în cea mai compactă formă pe care au putut-o conveni oamenii.
De ce treptele egale nu par egale
Numerele nu sunt proporționale cu lumina care ajunge la ochi. Ecranele aplică o curbă, apropiată de o putere de 2.2, astfel încât tonurile închise primesc mai multe dintre cele 256 de trepte decât cele deschise, ceea ce se potrivește ochiului. O treaptă de la 10 la 20 pare o schimbare mai mare decât una de la 240 la 250. Pentru dumneavoastră asta înseamnă că media a două culori făcută prin media numerelor lor nu dă culoarea pe care ați vedea-o amestecând luminile, un fapt care contează când calculați degradeuri și amestecuri în cod.
Grisurile și diagonala
Toate grisurile se află pe dreapta unde cele trei numere sunt egale. Sunt 256, de la negru la 0 până la alb la 255. Dacă convertiți RGB în HEX și cele trei perechi se potrivesc, știți imediat că culoarea nu are nuanță. Un aproape-gri cu perechi care diferă cu un pas sau doi are o tentă slabă, pe care designerii o folosesc adesea ca să dea unei culori neutre un strop de căldură sau de răceală.
Construirea și verificarea unei palete
De la o mână de culori alese la o paletă
O paletă tipică are o culoare principală, un accent, un neutru pentru text, un neutru mai deschis pentru suprafețe și una sau două culori de semnal pentru succes și eroare. Alegeți fiecare în unealta de design, citiți numerele ei rgb și convertiți RGB în HEX pentru foaia de stil. Scrieți-le ca proprietăți personalizate cu nume care descriu rolul și paleta este gata de folosit în fiecare componentă.
Contrastul dintre text și fundal
Textul lizibil are nevoie de o diferență suficientă de luminozitate între litere și fundalul lor. Recomandările de accesibilitate definesc un raport de contrast calculat din valorile de roșu, verde și albastru ale celor două culori și cer cel puțin 4.5 la 1 pentru textul normal. Verificatoarele acceptă coduri hex, deci codurile pe care le produceți aici pot intra direct în ele. Verificați fiecare pereche pe care o plănuiți, nu doar culoarea principală pe alb.
Convertirea unei liste
Când aveți multe culori de convertit, treceți prin ele pe rând și lipiți fiecare rezultat într-un tabel cu numele și folosirea sa. Durează un minut pe culoare, iar tabelul devine referința pentru tot proiectul. Dacă o culoare este ajustată mai târziu, doar rândul ei trebuie schimbat.
Ținerea hex-ului și a rgb-ului în pas
Dacă proiectul dumneavoastră stochează unele culori ca hex și altele ca rgb, e ușor să se desprindă unele de altele când cineva editează una și o uită pe cealaltă. Alegeți una ca exemplar-matcă, de obicei hex, și derivați-o pe cealaltă cu convertorul ori de câte ori aveți nevoie.
Convertoare asemănătoare
Aceeași familie de unelte acoperă conversiile învecinate. Ca să vă întoarceți, folosiți HEX în RGB. Pentru culorile descrise prin nuanță, HEX în HSL și HSL în HEX vă stau la îndemână, iar pentru tipar, RGB în CMYK, CMYK în RGB și CMYK în HEX. Pentru mărimile din aceeași foaie de stil, px în rem face pentru lungimi ce face această pagină pentru culori.
Un exemplu lucrat
Să spunem că un selector de culori dintr-un editor de imagini vă spune că accentul unei fotografii este rgb(214, 98, 56). Introduceți cele trei numere și citiți #D66238. În foaia de stil scrieți --accent: #D66238 și îl folosiți pentru butoane și linkuri. Un coleg întreabă care este culoarea din ghidul de brand, iar dumneavoastră trimiteți codul. Mai târziu aveți nevoie de o versiune translucidă pentru un banner și o convertiți înapoi cu HEX în RGB ca să construiți rgba(214, 98, 56, 0.15). Ambele conversii sunt exacte, deci bannerul are aceeași nuanță ca butonul.
O scurtă listă de verificare
Înainte de conversie
Verificați că fiecare număr este între 0 și 255. Hotărâți dacă aveți nevoie de transparență.
În timpul conversiei
Introduceți cele trei numere, citiți codul și copiați-l cu semnul diez.
După conversie
Testați culoarea în context, pe fundalul real, și verificați contrastul oricărui text care stă pe ea.
Greșeli frecvente
Pierderea unui zero din față
Fiecare pereche are două cifre. 7 este 07.
Scrierea numerelor peste 255
Nu pot fi scrise în două cifre. Limitați-le mai întâi.
Tratarea ecranului drept adevăr
Numerele sunt exacte. Aspectul depinde de afișaj.
Culorile dumneavoastră rămân pe dispozitiv
Calculul se face 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 RGB în HEX.
Rezumat
Ca să convertiți RGB în HEX aici, introduceți cele trei numere și citiți imediat codul hex. Conversia păstrează culoarea exact: hex și rgb() sunt două scrieri ale acelorași trei numere, de la 0 la 255 pentru roșu, verde și albastru, deci nimic nu este aproximat, iar dus-întorsul readuce ce a pornit. O a patra valoare, pentru transparență, este purtată și ea, deoarece rgba() devine #RRGGBBAA și invers. Ambele scrieri descriu sRGB, deci nu pot descrie culori din afara lui. Fiecare pereche are două cifre, deci un număr sub 16 primește un zero în față. Nimic nu este încărcat.