Què fa aquesta pàgina i per què és diferent
Aquesta eina permet carregar una imatge des del dispositiu, desplaçar‑hi el punter (o el cursor de teclat) i obtenir, a l’instant, el codi hexadecimal del píxel que es troba sota el punt de mostra. El resultat principal és un valor HEX de sis dígits (per exemple #1E90FF), el format estàndard al CSS i als editors gràfics. A més del codi hex, es mostren els valors RGB (vermell, verd, blau) i HSL (to, saturació, lluminositat) del mateix píxel.
Allò que distingeix aquesta pàgina de les seves germanes (que presenten el color en notació funcional RGB o en HSL) és que aquí el codi hex apareix en primer lloc: no porta cap canal alfa en la seva forma de sis dígits. Si el píxel és semitransparent, la transparència es reporta per separat com un percentatge, per exemple “Alpha 45% — aquest píxel és parcialment transparent.” Com que l’hexadecimal és un format compacte i nadiu del web, aquesta pàgina és la tria natural quan es necessita un valor que es puga enganxar directament a color, background-color o qualsevol propietat CSS sense parèntesis ni sintaxi addicional.
Com funciona l’extracció del color hex des d’una imatge
L’usuari carrega un arxiu d’imatge —PNG, JPG, WebP, GIF, AVIF o HEIC— amb una mida màxima que no superi els 4096 píxels al costat més llarg (si ho fa, la imatge es redimensiona automàticament). Un cop carregada, la pàgina mostra les dimensions (amples × altura) i calcula el color del píxel central, que es visualitza immediatament juntament amb les seves coordenades (x, y). A mesura que el punter es mou sobre la imatge, els valors s’actualitzen píxel a píxel. Una lupa ampliada ajuda a seleccionar el punt exacte, especialment útil en zones amb degradats o vores antialiades.
Per a una precisió més gran, es pot fer clic sobre la imatge: llavors el color actual es desa a l’historial (fins a 12 entrades) i es mostra el missatge “Desat ‹hex› a les teves mostres.” Si es fa clic sobre qualsevol dels valors de color (HEX, RGB o HSL), aquest es copia al porta‑retalls del navegador, sempre que el navegador ho permeta. En cas de bloqueig, apareix l’avís “No s’ha pogut copiar — el navegador ha bloquejat l’accés al porta‑retalls.”
Els formats de color: HEX, RGB i HSL
Cada píxel d’una imatge digital s’emmagatzema com una combinació de canals de color. L’eina mostra tres representacions diferents del mateix píxel, i és fonamental entendre’n les relacions.
HEX (hexadecimal) és una notació que expressa els valors de vermell, verd i blau en base 16, amb dos dígits per canal. Per exemple, #1E90FF significa: vermell = 0x1E (30 decimal), verd = 0x90 (144 decimal), blau = 0xFF (255 decimal). Aquesta forma compacta és la més utilitzada al CSS perquè no requereix cap funció ni parèntesi. No incorpora cap informació de transparència; si el píxel és semitransparent, el codi hex només reflecteix els canals RGB, i l’alpha es mostra per separat.
RGB utilitza la notació funcional rgb(30, 144, 255), idèntica en valors al codi hex, però escrita en decimal. És la forma que molts dissenyadors troben més intuïtiva perquè cada canal es veu com un nombre entre 0 i 255.
HSL descriu el color amb tres paràmetres: to (0–360°), saturació (0–100%) i lluminositat (0–100%). Per al mateix blau #1E90FF, l’HSL seria hsl(210, 100%, 56%). Aquest model és útil per ajustar tons de manera intuïtiva (per exemple, augmentar la saturació o enfosquir un color), però no és tan immediat per a la reproducció exacta com el hex o l’RGB.
L’eina mostra els tres formats perquè l’usuari puga triar el que millor s’adapti al seu flux de treball. Fer clic sobre qualsevol d’ells el copia directament al porta‑retalls, sense haver de seleccionar‑lo manualment.
Tractament de la transparència i les imatges comprimides
Un dels detalls més importants és com l’eina maneja la transparència. El codi hex de sis dígits no codifica el canal alfa; per tant, si el píxel és semitransparent (per exemple, un PNG amb opacitat inferior al 100%), la pàgina mostra “Alpha 45% — aquest píxel és parcialment transparent.” i el valor hex correspon als canals RGB purs del píxel, sense considerar cap fons. Això segueix el principi que l’eina llegeix el valor exacte emmagatzemat a la imatge, sense interpretar què hi ha al darrere.
Cal tenir en compte que les imatges comprimides (com JPEG) o les captures de pantalla poden haver alterat els colors degut a la compressió i l’antiàligues. Dos píxels que a simple vista semblen idèntics poden tenir valors lleugerament diferents; per això la lupa i la possibilitat de navegar amb tecles són eines crítiques per seleccionar el píxel precís. L’eina no aplica cap correcció ni filtre: mostra el valor exacte del píxel tal com està al fitxer.
Si es carrega un tipus d’arxiu no suportat, apareix “Aquest tipus de fitxer no és compatible. Prova amb una imatge PNG, JPG, WebP, GIF, AVIF o HEIC.” I si la imatge no es pot obrir (possiblement perquè està corrupta o en un format no reconegut), es mostra “Aquesta imatge no s’ha pogut obrir. Pot estar corrupta o en un format no compatible.”
L’historial de colors i la còpia al porta‑retalls
Cada vegada que l’usuari fa clic sobre la imatge (o prem Enter/Espai si navega amb teclat), el color actual es desa a l’historial de mostres. L’historial pot contenir fins a 12 elements. Si afegeixes un tretzè color, el més antic es descarta. Una característica important: colors amb els mateixos valors RGB però amb alfa diferent es consideren entrades separades. Per exemple, un píxel amb rgba(30, 144, 255, 0.5) i un altre amb rgba(30, 144, 255, 0.8) es guardaran com a dos elements diferents, perquè la transparència és un atribut del píxel que l’eina reporta per separat.
Des de l’historial es pot fer clic sobre qualsevol mostra per carregar de nou aquell color als espais de valors (HEX, RGB, HSL) i, si es vol, copiar‑lo. La funció de còpia al porta‑retalls està disponible per a qualsevol dels tres formats, i també per al codi hex mostrat a la mostra. Com que la còpia depèn de l’API navigator.clipboard, alguns navegadors la poden bloquejar. En eixos casos, l’eixa mostra el missatge d’avís esmentat.
Navegació per teclat i accessibilitat
L’eina no requereix ratolí per funcionar. Es pot desplaçar una creu sobre la imatge mitjançant les tecles de fletxa. La creu es mou un píxel per cada pulsació simple; si es manté premuda la tecla Majúscules mentre es prem una fletxa, el moviment és de 10 píxels, cosa que permet saltar ràpidament per zones grans i després apropar‑se amb precisió. Per desar el color actual, es pot prémer Enter o Espai. Aquesta funcionalitat és útil per a persones amb dificultats motrius o per a qui treballa amb un teclat com a únic dispositiu d’entrada.
També cal destacar que, en carregar una imatge, els valors del píxel central es mostren immediatament, sense necessitat de cap acció addicional. Això ofereix un punt de partida immediat, fins i tot si l’usuari no ha mogut el ratolí.
Preguntes freqüents
Per què el codi hex no mostra la transparència?
El codi hex de sis dígits (com #1E90FF) representa només els canals RGB. La transparència és un valor extra que no es pot codificar en sis dígits. Si necessites incloure l’alfa, hauries d’usar la notació de vuit dígits (ex. #1E90FF80) o la notació funcional rgba(). Aquesta eina reporta l’alfa per separat com a percentatge.
Puc usar aquesta eina amb imatges en format HEIC?
Sí, si el navegador ho suporta. Els formats acceptats són PNG, JPG, WebP, GIF, AVIF, HEIC i HEIF. Si el fitxer no es pot obrir, rebràs un missatge indicant que no és compatible.
Per què dos píxels que semblen iguals donen valors diferents?
Sovint és degut a la compressió amb pèrdua dels JPEG o a l’antiàligues en vores de text o objectes. Aquests processos alteren lleugerament els colors. La lupa i la navegació per teclat et permeten seleccionar el píxel que més s’aproxime al que vols.
Què passa si l’historial s’omple?
L’historial pot guardar fins a 12 colors. Quan en deses un tretzè, el més antic s’elimina automàticament.
Es pot copiar un valor sense fer clic damunt?
No. La còpia només s’activa en fer clic sobre el valor HEX, RGB o HSL que apareix a la pantalla. No hi ha cap altre mètode (per exemple, doble clic o botó dret) per copiar.
L’eina modifica la imatge?
No. Tot el processament es fa al navegador, sense enviar la imatge a cap servidor. Si la imatge té el costat més llarg superior a 4096 píxels, es redimensiona per a la visualització, però l’arxiu original no es modifica.