Conversie HEX în RGB Hexadecimal ↔ Red Green Blue Gratuit Online Sigur
Scrieți o valoare în HEX și o citiți pe loc în RGB. 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 RGB
O unealtă de design vă dă o culoare ca #5A4632. O foaie de stil, un script pentru canvas, o bibliotecă de grafice sau un program de grafică o cere ca rgb(90, 70, 50). Este aceeași culoare, iar munca de a trece de la o scriere la alta apare tot timpul: un ghid de brand listează coduri hex, iar codul dumneavoastră are nevoie de numere ca să calculeze o nuanță mai deschisă, un client trimite o culoare dintr-un logo și trebuie să completați un rgba() cu transparență, o bibliotecă acceptă doar trei valori separate. A converti HEX în RGB este o sarcină mică, iar un convertor de încredere vă scutește de aritmetica în baza șaisprezece făcută în minte și greșită.
Conversia este exactă, ceea ce nu e adevărat pentru orice conversie de culoare. Hexul și rgb() sunt două scrieri ale acelorași trei numere, cantitățile de lumină roșie, verde și albastră pe care un ecran trebuie să le emită, fiecare de la 0 la 255. Nimic nu este aproximat, iar un dus-întors returnează ce a pornit. Această pagină o face în browserul dumneavoastră, iar nimic nu este încărcat. Mai jos veți găsi cum se transformă cifrele hex în cele trei numere, cum se duce transparența dintr-o parte în alta, ce face forma prescurtată, limitele lui sRGB și situațiile în care dezvoltatorii și designerii au nevoie să convertească HEX în RGB.
Cum funcționează conversia
Trei perechi de cifre devin trei numere
O culoare hex este un semn diez urmat de șase cifre hexazecimale, citite în perechi: prima pereche este roșul, a doua verdele, a treia albastrul. Fiecare pereche este un număr în baza șaisprezece între 00 și FF, adică 0 până la 255 în sistemul zecimal pe care îl folosiți zilnic. Așadar #5A4632 se împarte în 5A, 46 și 32. 5A este 5 × 16 + 10 = 90, 46 este 4 × 16 + 6 = 70, iar 32 este 3 × 16 + 2 = 50. Culoarea este rgb(90, 70, 50), exemplul cu care începe pagina.
De ce cifrele merg de la 0 la F
Baza șaisprezece are nevoie de șaisprezece simboluri, deci după 9 vin literele de la A la F, care înseamnă 10 până la 15. O pereche de asemenea cifre dă 16 × 16 = 256 de valori, exact cât poate ține un octet. O culoare de ecran înseamnă trei octeți, iar hexul este pur și simplu un mod compact de a-i scrie: șase caractere în loc de trei numere cu virgule și paranteze.
Litere mari și mici
#5a4632 și #5A4632 sunt aceeași culoare. CSS le acceptă pe amândouă, la fel și acest convertor. Alegeți o convenție pentru un proiect și rămâneți la ea, deoarece literele amestecate fac mai greu de căutat într-o foaie de stil.
Ce păstrează conversia și ce nu poate
Păstrează culoarea, exact
Hexul și rgb() sunt două scrieri ale acelorași trei numere, 0 până la 255 pentru roșu, verde și albastru, deci nimic nu este aproximat, iar un dus-întors returnează ce a pornit. Convertiți HEX în RGB și înapoi și aveți același cod cu care ați început, cu posibila excepție a literelor mari.
Duce transparența dintr-o parte în alta
O a patra valoare, pentru transparență, este dusă și ea: #RRGGBBAA devine rgba() și invers. Ultima pereche este canalul alfa, de la 00, complet transparent, la FF, complet opac. Așadar #5A463280 este rgba(90, 70, 50, 0.5), pentru că 80 în hex este 128, iar 128 din 255 este aproximativ o jumătate. Opt cifre sunt acceptate de toate browserele actuale.
Nu poate descrie culori din afara lui sRGB
Ambele scrieri descriu sRGB, spațiul de culoare pe care un ecran îl folosește de treizeci de ani. Nu pot descrie o culoare din afara lui, pentru asta există notațiile CSS mai noi, lab(), oklch() și color(). Afișajele moderne pot arăta culori mai saturate decât cuprinde sRGB, iar un designer care a ales o asemenea culoare într-o unealtă cu gamă largă o va vedea tăiată la sRGB când este scrisă ca hex.
Forma prescurtată este extinsă, nu păstrată
Forma prescurtată este extinsă, nu păstrată: #abc revine ca #AABBCC, care este aceeași culoare scrisă pe lung. Fiecare cifră este dublată. Asta înseamnă că puteți lipi un cod de trei cifre și obțineți numerele corecte, dar nu puteți recupera scrierea scurtă din cea lungă doar privind-o, ci doar verificând că fiecare pereche se repetă.
Culori comune și numerele lor
Câteva de ținut minte
Albul este #FFFFFF, adică rgb(255, 255, 255): toate cele trei lumini la putere maximă. Negrul este #000000, rgb(0, 0, 0): deloc lumină. Roșul pur este #FF0000, verdele #00FF00 și albastrul #0000FF. Un gri mediu este orice cod cu trei perechi egale, precum #808080, care este rgb(128, 128, 128). Perechile egale înseamnă întotdeauna gri, pentru că cantități egale din cele trei lumini nu dau nicio nuanță.
Citirea unui cod dintr-o privire
Odată ce știți modelul, puteți estima o culoare din cifrele ei hex. Un cod care începe cu o primă pereche mare este roșiatic, o pereche din mijloc mare este verzui, o ultimă pereche mare este albăstrui. #FF8800 înseamnă mult roșu, ceva verde și deloc albastru, adică portocaliu. Nu aveți nevoie de o unealtă pentru asta, dar aveți nevoie de una pentru numerele exacte.
Cum convertiți aici HEX în RGB
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, șase și opt cifre.
Citiți valoarea rgb
Răspunsul apare imediat în celălalt câmp, în forma rgb(90, 70, 50), sau rgba() dacă codul purta transparență. Pagina arată fraza #5A4632 = rgb(90, 70, 50) ca să puteți verifica dintr-o privire.
Copiați-o în codul dumneavoastră
Lipiți rezultatul în foaia de stil, în script sau în unealta care l-a cerut. Dacă aveți nevoie de cele trei numere separat, sunt cele din paranteze.
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, 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ă 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ă. Pentru acestea, vedeți HEX în HSL și HEX în CMYK.
Unde le întâlniți
În foile de stil
Hexul este ce tastați într-o foaie de stil și ce vă dă o unealtă de design. RGB apare oriunde o culoare are nevoie de aritmetică: degrade, transparență, cod care calculează o nuanță. A cunoaște ambele scrieri și a putea trece de la una la alta face parte din munca de front-end de zi cu zi.
În scripturi și în desenul pe canvas
Codul de desen vrea adesea cele trei numere separat, ca să amestece două culori, să închidă una cu o valoare fixă sau să testeze dacă un pixel se potrivește cu o țintă. Conversia HEX în RGB vă dă direct numerele.
În uneltele de grafică și de imagine
Editoarele de imagini arată de obicei o culoare ca trei numere sau ca un cod hex și vă lasă să tastați oricare. Trecerea între cele două vă permite să reproduceți o culoare de pe o pagină web într-un program care vrea numere.
În documentație și ghiduri de brand
Un ghid de brand poate lista o culoare în hex pentru web, în RGB pentru ecrane și în CMYK pentru tipar. A face ca primele două să se potrivească înseamnă o singură conversie și este genul de verificare care prinde o greșeală de tastare înainte să fie tipărită pe o mie de fluturași.
Utilizări practice ale formei RGB
Transparență fără o a doua culoare
Cu rgba(90, 70, 50, 0.5) obțineți culoarea la jumătate de intensitate, astfel încât ce e în spatele ei se vede prin ea. Este modul standard de a face suprapuneri, umbre și fundaluri tentate dintr-o culoare de brand fără a inventa una nouă.
Calcularea nuanțelor mai deschise și mai închise
Ca să faceți o stare de hover puțin mai închisă, un script poate scădea o valoare fixă din fiecare dintre cele trei numere. A face același lucru pe un șir hex este incomod; pe rgb este aritmetică simplă. Dacă aveți nevoie de o ajustare bazată pe nuanță, convertiți în schimb HEX în HSL.
Verificări de contrast
Uneltele de accesibilitate calculează contrastul dintre două culori din valorile lor de roșu, verde și albastru. A avea numerele vă lasă să faceți singuri calculul sau să le lipiți într-un verificator, ca să confirmați că textul pe un fundal este lizibil.
Capcane când convertiți HEX în RGB
Uitarea perechii alfa
Un cod de opt cifre are transparența în ultimele două cifre. Dacă le tăiați, o pierdeți. Verificați lungimea codului înainte să hotărâți că rezultatul este culoarea.
Amestecarea ordinii
Hexul este roșu, verde, albastru. Câteva formate și unele API-uri grafice vechi folosesc albastru, verde, roșu. Dacă o culoare iese greșit într-un anumit program, verificați ordinea canalelor lui.
Copierea dintr-o captură de ecran
O culoare citită dintr-o captură de ecran este culoarea după gestionarea culorii de către ecran și după orice compresie. Poate diferi ușor de culoarea din fișierul sursă. Folosiți fișierul de design când puteți.
Presupunerea că ecranele se potrivesc
Două ecrane arată același cod ușor diferit. Numerele sunt exacte; ce vedeți depinde de afișaj și de profilul lui.
Întrebări pe care și le pun oamenii înainte de conversie
Ce este #FF0000 în RGB?
rgb(255, 0, 0), roșu pur.
Ce este #FFFFFF în RGB?
rgb(255, 255, 255), alb.
Pot converti un cod de trei cifre?
Da. Fiecare cifră este dublată: #09C devine #0099CC, care este rgb(0, 153, 204).
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 RGB în HEX, care scrie cele trei numere ca un cod hex.
Alegeri înțelepte când convertiți HEX în RGB
Știți de ce aveți nevoie în continuare
Dacă aveți nevoie de transparență, rgba() este forma firească. Dacă trebuie să ajustați luminozitatea sau nuanța, HSL este mai ușor. Dacă culoarea merge la tipar, CMYK este pasul următor, cu rezervele pe care le poartă conversia. Vedeți RGB în CMYK.
Păstrați hexul ca master
Pentru culorile dintr-o paletă de brand, păstrați codul hex ca referință. Este scurt, lipsit de ambiguitate și înțeles peste tot. Derivați din el celelalte forme când aveți nevoie.
Folosiți proprietăți personalizate
În CSS, definiți culorile o singură dată, ca --brand: #5A4632, și faceți trimitere la ele pe nume. Dacă aveți nevoie de numere pentru rgba(), definiți și --brand-rgb: 90 70 50. Conversia se face atunci o singură dată.
CSS modern și forma RGB
Sintaxa separată prin spații
CSS-ul actual acceptă rgb() cu spații și o bară oblică pentru transparență, ca în rgb(90 70 50 / 50%). Numerele sunt aceleași ca în forma cu virgule, deci rezultatul unei conversii funcționează în ambele. Browserele mai vechi și unele unelte așteaptă virgulele, deci forma cu virgule rămâne alegerea sigură când nu știți unde va fi folosită culoarea.
Procente și fracții
RGB se poate scrie și cu procente, precum rgb(35% 27% 20%), unde 100 la sută este 255. Pagina dă numere întregi, pentru că acelea stochează hexul și acelea așteaptă majoritatea uneltelor. Dacă aveți nevoie de procente, împărțiți fiecare număr la 255 și înmulțiți cu 100.
Proprietăți personalizate pentru cele trei numere
Un truc frecvent este să stocați doar cele trei numere într-o proprietate personalizată, --brand-rgb: 90 70 50, și să o folosiți ca rgb(var(--brand-rgb) / 0.5). O singură definiție servește atât utilizărilor pline, cât și celor translucide. Când convertiți HEX în RGB pentru acest scop, copiați doar numerele din răspuns.
Lucrul cu culoarea în practică
Verificați față de ghidul de brand
Dacă un ghid de brand dă și hex, și rgb pentru aceeași culoare, convertiți una și comparați cu cealaltă. O nepotrivire înseamnă de obicei o greșeală de tastare în ghid, iar găsirea ei înainte de a fi folosită pe fiecare pagină merită minutul pe care îl cere.
Țineți o paletă ca o listă scurtă
Majoritatea site-urilor folosesc de la cinci la opt culori. Scrieți-le într-o notă în ambele forme. De fiecare dată când trebuie să convertiți HEX în RGB pentru o componentă nouă, o puteți căuta în loc să o calculați din nou, iar paleta rămâne coerentă.
Numiți culorile după rol
Nume precum primar, suprafață și avertisment supraviețuiesc mai bine redesenărilor decât nume precum verde sau maro. Conversia vă dă numerele; numele spune pentru ce sunt.
Convertoare înrudite
Aceeași familie de unelte acoperă conversiile învecinate. Ca să vă întoarceți, folosiți RGB în HEX. Pentru culori descrise prin nuanță, HEX în HSL și HSL în HEX sunt la îndemână, iar pentru tipar, HEX în CMYK, CMYK în HEX și CMYK în RGB. 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 și vreți o versiune translucidă pentru fundalul unui card. Tastați codul și citiți rgb(30, 122, 92). În foaia de stil scrieți background: rgba(30, 122, 92, 0.12), o tentă foarte deschisă a aceluiași verde, și un chenar de rgba(30, 122, 92, 0.4). Cardul se așază confortabil pe o pagină albă și pe una gri, pentru că transparența lasă pagina să se vadă. Când culoarea brandului este schimbată mai târziu, înlocuiți cele trei numere într-o singură proprietate personalizată, iar fiecare tentă o urmează.
O listă scurtă de verificare
Înainte de conversie
Verificați lungimea codului: trei, șase sau opt cifre. Hotărâți dacă aveți nevoie de transparență.
În timpul conversiei
Lipiți codul, citiți valoarea rgb și copiați-o cu parantezele ei sau doar cele trei numere.
După conversie
Testați culoarea în context, pe fundalul real, și verificați contrastul oricărui text care stă pe ea.
Greșeli frecvente
Renunțarea la perechea de transparență
Opt cifre înseamnă alfa. Păstrați-o sau convertiți-o în rgba().
Confuzia ordinii canalelor
Hexul începe cu roșu. Unele unelte așteaptă albastrul primul.
Considerarea ecranului drept adevăr
Numerele sunt exacte. Aspectul depinde de afișaj.
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 RGB.
Rezumat
Ca să convertiți aici HEX în RGB, tastați sau lipiți codul hex și citiți imediat valoarea rgb. Conversia păstrează culoarea exact: hexul și rgb() sunt două scrieri ale acelorași trei numere, 0 până la 255 pentru roșu, verde și albastru, deci nimic nu este aproximat, iar un dus-întors returnează ce a pornit. O a patra valoare, pentru transparență, este dusă și ea, deoarece #RRGGBBAA devine rgba() și invers. Ambele scrieri descriu sRGB, deci nu pot descrie culori din afara lui, iar forma prescurtată este extinsă, nu păstrată: #abc revine ca #AABBCC. Nimic nu este încărcat.