HEX și RGB: două moduri de a scrie aceeași culoare
Fiecare culoare pe care o vezi pe un ecran este amestecată din trei lumini: roșu, verde și albastru. Dă-le pe toate trei la maximum și obții alb; stinge-le pe toate și obții negru. HEX și RGB sunt pur și simplu două notații pentru a descrie cât de intens ar trebui să fie fiecare dintre cele trei canale. Ele indică exact aceeași culoare, așa că un convertor bun doar traduce între cele două sisteme de scriere, fără să schimbe vreodată nuanța reală. Exact asta face acest instrument, integral în browserul tău, arătându-ți în același timp un eșantion live, ca să poți confirma rezultatul cu propriii ochi.
Cum se citește un cod hex
O culoare hex arată ca #1E90FF. Semnul diez doar marchează începutul; cele șase caractere de după el sunt trei perechi, scrise în modelul #RRGGBB. Prima pereche este roșul, a doua este verdele, a treia este albastrul. Fiecare pereche este un număr scris în hexazecimal, adică în baza 16, unde cifrele merg de la 0-9, apoi A, B, C, D, E, F reprezintă 10 până la 15. O pereche poate reține valori de la 00 (canalul complet stins) până la FF (complet aprins). În zecimal simplu, acel interval este exact 0 până la 255, aceeași scală folosită de RGB. Cu 256 de niveluri posibile pe canal, forma de șase cifre poate descrie 16.777.216 culori distincte.
Conversia în ambele direcții, cu un exemplu lucrat
Pentru a merge din HEX în RGB, împarți codul în cele trei perechi și convertești fiecare din baza 16 în zecimal obișnuit. Ia #1E90FF. Perechea roșie este 1E: adică 1 înmulțit cu 16, plus 14 (E), ceea ce dă 30. Perechea verde 90 este 9 înmulțit cu 16, plus 0, ceea ce dă 144. Perechea albastră FF este 15 înmulțit cu 16, plus 15, ceea ce dă 255. Așadar #1E90FF devine rgb(30, 144, 255) — familiarul albastru dodger.
Mergând în direcția opusă, este același proces, invers. Ia fiecare număr RGB și scrie-l ca două cifre hex. Roșu pur, rgb(255, 0, 0), dă FF, 00 și 00, care se unesc în #FF0000. Un lucru de reținut: dacă o valoare este sub 16, tot ai nevoie de ambele cifre, deci 5 se scrie 05 și nu doar 5. Convertorul se ocupă de acest padding pentru tine, dar încurcă lumea atunci când îl face manual.
Unde este folosit fiecare format
HEX este limbajul de zi cu zi al web-ului. CSS, HTML și majoritatea codului pe care îl scrii apelează la coduri hex pentru că sunt compacte și ușor de copiat. RGB tinde să apară în instrumentele de design și imagine — Figma, Photoshop, Sketch și Illustrator afișează de obicei slidere sau câmpuri în intervalul 0-255, iar aplicațiile de înregistrare video sau editare video așteaptă adesea tot RGB. Așadar iei frecvent un cod hex dintr-o foaie de stiluri și ai nevoie de forma sa RGB pentru a o introduce într-un panou de design, sau invers. Acel drum dus-întors este întregul motiv pentru care un convertor este util. Dacă trebuie să construiești un set întreg de nuanțe asortate, nu doar să traduci una singură, generatorul nostru de palete de culori este punctul de plecare mai bun, iar vei găsi mai multe utilitare de acest fel la instrumente pentru dezvoltatori.
Alpha, opacitate și HSL
Ambele notații au o formă extinsă care adaugă transparență. RGB devine rgba(30, 144, 255, 0.5), unde a patra valoare este alpha — 0 este complet transparent și 1 este complet opac. HEX adaugă o a patra pereche cu același scop, dând un cod pe opt cifre #RRGGBBAA; 80, de exemplu, este aproximativ 50 la sută opacitate. Câteva convertoare oferă și HSL (nuanță, saturație, luminozitate), care descrie culoarea așa cum ar face-o un om — alegi o nuanță de pe roata culorilor, apoi îi reglezi vivacitatea și luminozitatea. HSL este un model mental diferit, nu o paletă diferită, așa că poate fi mai intuitiv atunci când vrei să faci o culoare mai deschisă sau mai estompată fără să jonglezi cu trei numere separate.
Întrebări frecvente
Semnul diez face parte din codul hex?
Diezul este un marcaj care le spune CSS-ului și instrumentelor de design că oferi o culoare hex. Culoarea propriu-zisă este formată din cele șase caractere de după el. Majoritatea instrumentelor acceptă codul cu sau fără diez și îl adaugă înapoi automat.
Care este diferența dintre un cod hex pe 3 cifre și unul pe 6 cifre?
Un cod pe 3 cifre este o prescurtare în care fiecare cifră este dublată, deci #1AF înseamnă #11AAFF. Ajunge la doar 4.096 de culori, în timp ce forma completă pe 6 cifre ajunge la peste 16 milioane.
De ce codul meu hex are opt caractere?
Un cod hex pe 8 cifre adaugă o a patra pereche pentru alpha, adică transparență. Primele șase caractere rămân roșu, verde și albastru, iar ultimele două stabilesc opacitatea de la 00 (invizibil) la FF (solid).
Codurile hex sunt sensibile la majuscule?
Nu. #1e90ff și #1E90FF descriu exact aceeași culoare. Literele hexazecimale funcționează la fel, indiferent dacă sunt scrise cu majuscule sau minuscule, așa că folosește ce preferă echipa ta.
HEX și RGB arată vreodată diferit pe ecran?
Nu. Când descriu aceleași valori de canal, sunt culoarea identică. Orice diferență vizibilă vine dintr-o greșeală de scriere sau dintr-un cod care include transparență, pe care celălalt nu o are.
Câte culori poate afișa un cod hex standard?
Un cod hex pe 6 cifre oferă 256 de niveluri pentru fiecare dintre cele trei canale, ceea ce înmulțit dă 16.777.216 de culori posibile.