Extragerea codului hex dintr-o imagine: instrumentul de referință
Instrumentul de pe această pagină permite selectarea unei imagini de pe dispozitiv și, prin simpla plasare a cursorului sau printr-un click, identifică exact culoarea pixelului aflat sub indicator. Rezultatul principal este codul hexadecimal (hex) al acelei culori, alături de valorile RGB și HSL. O lupă mărită ajută la alegerea precisă a pixelului, iar istoricul culorilor salvate reține până la 12 selecții.
Ce face această pagină diferit față de instrumentele similare
Spre deosebire de paginile surori care se concentrează pe notația funcțională RGB sau pe HSL, această pagină oferă reprezentarea hex. Codul hex, în forma sa standard de șase cifre (de exemplu #1E90FF), nu poartă un canal alfa. Orice transparență este raportată separat ca procent: „Alpha ‹n›% – acest pixel este parțial transparent”. Deoarece hex este un format compact, nativ web, această pagină este alegerea principală atunci când ai nevoie de o valoare cromatică care poate fi inserată direct în CSS, în color, background-color sau în orice proprietate, fără paranteze suplimentare sau sintaxă adițională.
Cum funcționează extragerea culorii hex dintr-o imagine
Procesul este simplu și se execută în întregime în browser, pe client. Utilizatorul încarcă un fișier imagine dintr-unul dintre formatele acceptate: PNG, JPG, WebP, GIF, AVIF, HEIC. MIME-urile corespunzătoare sunt image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif. După încărcare, instrumentul afișează mesajul „Imaginea este pregătită – deplasați cursorul pentru a preleva, faceți click pentru a salva o culoare”. Sunt prezentate imediat dimensiunile imaginii (lățime × înălțime) și coordonatele pixelului central, împreună cu valorile sale cromatice.
La mutarea cursorului peste imagine, culorile pixelilor sunt prelevate în timp real, iar datele se actualizează: coordonatele (x, y), codul hex (de exemplu #A52A2A), valorile RGB (de exemplu rgb(165, 42, 42)) și HSL (de exemplu hsl(0, 59%, 41%)). Făcând click pe imagine, culoarea curentă este salvată în istoric, iar instrumentul afișează „Salvat ‹hex› în selecțiile dvs.”.
Pentru utilizatorii care preferă tastatura, este disponibilă o cruce de ochire ce poate fi deplasată cu tastele săgeți. Apăsând Shift în timpul mișcării, pasul devine 10 pixeli. Tastele Enter sau Space salvează culoarea curentă.
Formatele cromatice: hex, RGB și HSL – de ce hex este standardul web
Codul hex, sau hexadecimal, reprezintă o culoare prin combinarea a trei perechi de cifre hexazecimale (00–FF) pentru roșu, verde și albastru. De exemplu, #FF5733 înseamnă roșu 255 (FF), verde 87 (57) și albastru 51 (33). Este cea mai compactă notație care poate exprima 16.777.216 de culori distincte. În CSS, hex este preferat deoarece nu necesită funcții (rgb(), hsl()) și este rapid de citit și de scris.
RGB (Red, Green, Blue) este notația zecimală, cu valori între 0 și 255 pentru fiecare componentă. HSL (Hue, Saturation, Lightness) descrie culoarea după nuanță (0–360°), saturație și luminozitate (ambele în procente). În timp ce HSL este intuitiv pentru ajustări vizuale, hex rămâne standardul de facto în dezvoltare web și în multe instrumente de design (Figma, Photoshop, Sketch).
Un aspect crucial: hex nu poartă informație despre transparență. O valoare ca #FF5733 este întotdeauna opacă. Dacă pixelul este semitransparent, instrumentul raportează „Alpha ‹n›% – acest pixel este parțial transparent”. De exemplu, pentru un pixel cu opacitate 50%, vei vedea „Alpha 50% – acest pixel este parțial transparent”. Aceasta este o limitare inerentă a formatului hex standard; pentru a codifica transparența s-ar folosi hex cu opt cifre (#RRGGBBAA), dar această pagină oferă doar forma pe șase cifre, care este cea mai răspândită.
Gestionarea cazurilor speciale și a limitelor instrumentului
Instrumentul funcționează cu imagini a căror latură cea mai lungă nu depășește 4096 de pixeli. Dacă o imagine depășește această dimensiune, ea este redusă proporțional pentru a se încadra. Aceasta este o măsură de performanță, deoarece prelucrarea pixel cu pixel a imaginilor foarte mari ar fi lentă și ar consuma multă memorie.
Dacă imaginea este un JPEG sau o captură de ecran, compresia și anti-aliasingul pot modifica valorile pixelilor. De exemplu, într-o zonă aparent uniformă, pixelii adiacenți pot avea diferențe minore de culoare din cauza compresiei cu pierderi. De aceea, alegerea exactă a pixelului este critică – instrumentul citește valoarea exactă a pixelului din imagine, așa cum este stocată, fără a corecta eventuale artefacte.
Un pixel semitransparent este citit pe cont propriu, fără a lua în considerare ce s-ar afla în spatele lui (de exemplu, un fundal alb). Aceasta înseamnă că, dacă imaginea conține zone cu transparență, culoarea raportată este culoarea pixelului înainte de compunerea cu vreun fundal. Acest comportament este corect din punct de vedere tehnic, dar utilizatorii trebuie să știe că, dacă doresc culoarea aparentă pe un fundal specific, trebuie să o calculeze separat.
Dacă se încearcă încărcarea unui format neacceptat, apare mesajul „Acest tip de fișier nu este suportat. Încercați o imagine PNG, JPG, WebP, GIF, AVIF sau HEIC.” Dacă imaginea nu poate fi deschisă (de exemplu, este coruptă), mesajul este „Această imagine nu a putut fi deschisă. Poate fi coruptă sau într-un format nesuportat.”
Butonul „Reluare” (Start over) șterge imaginea, golește istoricul culorilor și resetează instrumentul la starea inițială.
Istoricul culorilor și clipboardul
Culorile salvate prin click sunt stocate într-un istoric care poate conține maximum 12 elemente. Fiecare intrare conține codul hex, iar făcând click pe o mostră din istoric, acea culoare este reîncărcată ca selecție curentă. Culorile cu aceleași valori RGB, dar cu alfa diferit, sunt tratate ca intrări separate, deoarece transparența este un atribut distinct.
Făcând click pe orice valoare cromatică afișată (hex, RGB sau HSL), aceasta este copiată automat în clipboard. Dacă browserul blochează accesul la clipboard, apare mesajul „Nu s-a putut copia – browserul dvs. a blocat accesul la clipboard.” Acest lucru se întâmplă de obicei în contexte nesigure (HTTP în loc de HTTPS) sau din cauza setărilor de securitate ale browserului.
Întrebări frecvente (FAQ)
1. De ce culoarea hex nu include transparența?
Hexul standard pe șase cifre nu poate reprezenta transparența. Pentru a include canalul alfa s-ar folosi opt cifre (#RRGGBBAA), dar această pagină oferă doar forma pe șase cifre, care este cea mai des întâlnită în CSS și design. Transparența este raportată separat ca procent.
2. Cum pot extrage culoarea dintr-un pixel exact atunci când imaginea este mică sau comprimată?
Folosiți lupa mărită care apare la hover. De asemenea, puteți utiliza tastele săgeți pentru a deplasa crucea de ochire pixel cu pixel. Pentru o precizie mai mare, apăsați Shift împreună cu săgețile pentru a sări 10 pixeli.
3. Ce se întâmplă dacă imaginea mea are zone cu transparență?
Pixelii semitransparenți sunt citiți așa cum sunt stocați în fișier, fără a fi compuși cu niciun fundal. Culoarea hex raportată este culoarea pixelului înainte de compunere. Transparența este indicată separat ca „Alpha ‹n›%”.
4. De ce unele culori din imagine par diferite față de cele extrase?
JPEG și alte formate cu compresie cu pierderi modifică valorile pixelilor. De asemenea, anti-aliasingul (netezirea muchiilor) creează pixeli intermediari. Instrumentul citește valoarea exactă a pixelului din imaginea stocată, care poate să nu corespundă percepției vizuale dacă imaginea a fost comprimată.
5. Cum pot șterge culorile din istoric?
Butonul „Reluare” șterge întregul istoric și imaginea. Nu există o funcție de ștergere individuală a intrărilor din istoric; pentru a elimina doar câteva culori, va trebui să reîncărcați imaginea și să salvați din nou doar culorile dorite.
6. Pot extrage culori din imagini cu dimensiuni mari?
Da, dar numai dacă latura cea mai lungă nu depășește 4096 de pixeli. Dacă imaginea este mai mare, ea este redusă automat. Acest lucru asigură performanță optimă și consum redus de memorie.