L'eina Selector de color d'imatges permet carregar una imatge des del vostre dispositiu per analitzar i extreure els valors cromàtics exactes de qualsevol dels seus píxels. Mitjançant una vista ampliada que actua com una lupa de precisió, podeu situar-vos sobre el punt exacte que us interessa. Un cop seleccionat el píxel, l'aplicació mostra els codis de color en els formats HEX, RGB i HSL, i us permet desar una llista de seleccions per copiar-les fàcilment i utilitzar-les en altres aplicacions.
Funcionament i interacció amb la imatge
Quan es carrega un fitxer, l'eina mostra immediatament els valors de color i les coordenades corresponents al píxel central de la imatge. A partir d'aquest moment, disposeu de dos mètodes per explorar i seleccionar colors:
- Ús del punter: En moure el punter del ratolí sobre la imatge, el sistema analitza els colors píxel a píxel en temps real. Per desar un color a la llista de seleccions, només cal fer clic sobre el píxel desitjat.
- Navegació per teclat: Per a una precisió mil·limètrica, podeu moure un punt de mira sobre la imatge utilitzant les tecles de direcció del teclat. Cada premuda desplaça el punt de mira exactament 1 píxel. Si manteniu premuda la tecla Shift mentre feu servir les tecles de direcció, el desplaçament serà de 10 píxels. Per desar el color del píxel seleccionat mitjançant el teclat, premeu la tecla Enter o Space.
L'historial de colors desats pot emmagatzemar un màxim de 12 elements. Si deseu un color nou quan l'historial ja és ple, aquest anirà desplaçant els anteriors. Podeu fer clic a qualsevol dels valors de color obtinguts (HEX, RGB o HSL) per copiar-lo directament al porta-retalls del vostre sistema operatiu. Si el navegador bloqueja aquesta acció per motius de seguretat, es mostrarà el missatge d'error: "No s'ha pogut copiar: el navegador ha bloquejat l'accés al porta-retalls."
Per reiniciar l'eina, el botó "Torna a començar" neteja la imatge carregada, buida completament l'historial de colors desats i restableix l'aplicació al seu estat inicial.
Formats de fitxer i límits de resolució
L'eina admet la càrrega d'un únic fitxer d'imatge cada vegada. Els formats de fitxer i els tipus MIME compatibles són els següents:
| Format | Tipus MIME |
|---|---|
| PNG | image/png |
| JPG / JPEG | image/jpeg |
| WebP | image/webp |
| GIF | image/gif |
| AVIF | image/avif |
| HEIC / HEIF | image/heic, image/heif |
Si intenteu carregar un format no admès, l'eina mostrarà l'advertiment: "Aquest tipus de fitxer no és compatible. Proveu-ho amb una imatge PNG, JPG, WebP, GIF, AVIF o HEIC." En cas que el fitxer estigui corromput o el navegador no el pugui processar, es mostrarà el missatge: "No s'ha pogut obrir la imatge. Pot ser que estigui malmesa o en un format no compatible."
Pel que fa a les dimensions, si la imatge té un costat que supera els 4096 píxels, l'eina la redimensionarà automàticament cap avall per mantenir un rendiment òptim durant l'anàlisi.
Comprensió dels models de color obtinguts
L'eina tradueix instantàniament el punt seleccionat a tres dels models de color més utilitzats en el disseny i el desenvolupament web:
- HEX: Representació hexadecimal de base 16 (per exemple,
#3f51b5), molt comuna en fulls d'estil CSS i programes de disseny gràfic. - RGB: Defineix el color mitjançant la barreja de vermell (Red), verd (Green) i blau (Blue) amb valors que van de 0 a 255 per a cada canal (per exemple,
rgb(63, 81, 181)). - HSL: Representa el color segons el seu matís (Hue) en graus de 0° a 360°, la saturació (Saturation) en percentatge i la lluminositat (Lightness) també en percentatge (per exemple,
hsl(231, 48%, 48%)).
El canal alfa i la transparència
Quan s'analitzen imatges que admeten transparència (com ara PNG, WebP o GIF), els píxels poden contenir un canal alfa. L'eina llegeix el valor del píxel de manera aïllada, exactament com està emmagatzemat en el fitxer, sense tenir en compte el fons que hi pugui haver darrere de la imatge a la pantalla.
Si un píxel és parcialment transparent, el sistema ho detectarà i mostrarà un avís que indica el percentatge de opacitat amb el format: "Alfa {n}% — aquest píxel és parcialment transparent." on {n} correspon al valor numèric del canal alfa. Cal tenir en compte que si deseu dos colors que tenen els mateixos valors RGB però diferents nivells de transparència (alfa), l'eina els tractarà com a elements diferents i els desarà com a entrades separades a l'historial.
Factors que afecten la precisió dels píxels
L'eina llegeix el valor de color real codificat en el fitxer d'imatge. No obstant això, el color que observeu visualment pot diferir del valor digital obtingut a causa de dos factors tècnics clau:
- Compressió amb pèrdues: Els formats com el JPEG apliquen algorismes de compressió que agrupen píxels i fan una aproximació dels colors per reduir la mida del fitxer. Això significa que una zona que visualment sembla d'un color sòlid pot contenir petites variacions de color píxel a píxel.
- Antialiasing (suavitzat de vores): Quan es fan captures de pantalla de textos o de vectors, els sistemes operatius apliquen un suavitzat a les vores per evitar l'efecte de "dent de serra". Aquest procés crea píxels de transició amb colors intermedis entre l'objecte i el fons, de manera que si seleccioneu exactament la vora d'una lletra o d'una línia, obtindreu un color de barreja i no el color pur de l'objecte.
Privadesa i processament de dades
La privadesa de les vostres imatges està assegurada pel mètode d'execució de l'eina. La imatge es llegeix directament des del vostre dispositiu i mai surt del navegador. No es puja cap fitxer ni dada a BroBroGo, ja que tot el processament de descodificació i lectura de píxels es realitza de manera local a la memòria del vostre propi navegador web.
Preguntes freqüents
Com puc seleccionar un color de la imatge? Moveu el punter sobre la imatge i el panell mostrarà el color que hi ha a sota, amb una lupa d'augment per ajudar-vos a seleccionar el píxel exacte. Feu clic per desar el color a la vostra llista. També podeu enfocar la imatge i moure el cursor amb les tecles de direcció, i després prémer Retorn.
Quins formats de color s'obtenen? Cada píxel que analitzeu es mostra simultàniament en formats HEX, RGB i HSL. Feu clic a qualsevol valor per copiar-lo i enganxar-lo directament al vostre codi CSS o eina de disseny.
Per què el color seleccionat no sempre coincideix amb el que esperava? Obteniu el valor exacte del píxel emmagatzemat a la imatge. Si és un JPEG o una captura de pantalla, la compressió i l'antialiasing poden haver alterat lleugerament els píxels adjacents, i els píxels semitransparents es llegeixen de manera aïllada, sense tenir en compte el fons que hi ha al darrere.
Quantes imatges puc analitzar alhora? L'eina està dissenyada per processar una sola imatge cada vegada. Si voleu analitzar una imatge diferent, podeu prémer el botó per tornar a començar i carregar un nou fitxer.