Fonctionnement du Sélecteur de couleur d'image
Cet outil permet de sélectionner une image depuis votre appareil pour analyser et extraire la valeur colorimétrique de n'importe quel pixel. Lors du chargement d'une image, l'outil affiche immédiatement les coordonnées et les valeurs de couleur du pixel central.
Pour explorer l'image, il suffit de déplacer le pointeur sur sa surface. Une loupe intégrée offre une vue agrandie de la zone survolée afin de faciliter le ciblage précis d'un pixel unique. Un clic sur l'image enregistre la couleur active dans un historique de prélèvements.
L'outil propose également une navigation au clavier: vous pouvez déplacer une mire pixel par pixel à l'aide des touches fléchées de votre clavier. Pour accélérer le déplacement, maintenez la touche Shift enfoncée afin de déplacer la mire par paliers de 10 pixels. Appuyez ensuite sur la touche Entrée ou Espace pour enregistrer la couleur sélectionnée.
L'historique peut mémoriser jusqu'à 12 couleurs distinctes. Si vous prélevez des couleurs ayant les mêmes valeurs RGB mais des niveaux de transparence différents, elles seront enregistrées comme des entrées distinctes dans l'historique. Un clic sur l'une des valeurs affichées (HEX, RGB ou HSL) copie directement cette donnée dans votre presse-papiers pour vos intégrations ou vos feuilles de style CSS.
Formats d'image acceptés et limites techniques
L'outil prend en charge un large éventail de formats d'images courants:
- PNG (
image/png) - JPG / JPEG (
image/jpeg) - WebP (
image/webp) - GIF (
image/gif) - AVIF (
image/avif) - HEIC / HEIF (
image/heic,image/heif)
Si vous tentez de charger un fichier dont le format n'est pas supporté, l'outil affiche le message d'erreur suivant: "Ce type de fichier n'est pas pris en charge. Essayez une image PNG, JPG, WebP, GIF, AVIF ou HEIC."
Dans le cas d'un fichier corrompu ou illisible, le message d'erreur est: "Impossible d'ouvrir cette image. Elle est peut-être endommagée ou dans un format non pris en charge."
Afin de garantir des performances optimales lors de l'affichage et de l'analyse, les images dont le côté le plus long dépasse 4096 pixels sont automatiquement redimensionnées à une échelle inférieure. Le bouton "Recommencer" permet de réinitialiser complètement l'outil: il efface l'image active, vide l'historique des couleurs enregistrées et rétablit l'état initial de l'interface.
Comprendre les données de sortie et les modèles de couleur
Pour chaque pixel analysé, l'outil extrait et affiche plusieurs informations et formats de couleur:
- Taille: Les dimensions en pixels de l'image chargée.
- Pixel: Les coordonnées exactes (X, Y) du pixel actuellement survolé ou sélectionné.
- HEX: Le code hexadécimal de la couleur (par exemple, #FFFFFF pour le blanc).
- RGB: Les valeurs de rouge, vert et bleu (comprises entre 0 et 255).
- HSL: Les valeurs de teinte (en degrés, de 0° à 360°), de saturation (en %) et de luminosité (en %).
Gestion de la transparence (Canal Alpha)
Lorsqu'un pixel présente une transparence partielle, l'outil lit sa valeur propre, de manière isolée, sans tenir compte de la couleur de l'arrière-plan de l'interface. Si le pixel est semi-transparent, l'outil affiche l'indicateur suivant: "Alpha {n}% : ce pixel est partiellement transparent." (où {n} représente le pourcentage d'opacité).
Impact de la compression et de l'anticrénelage
L'outil extrait la valeur exacte stockée dans le fichier image. Cependant, si vous analysez une image au format JPEG ou une capture d'écran, les valeurs de pixels d'origine peuvent avoir été altérées. La compression avec perte (propre au JPEG) crée des artefacts, tandis que l'anticrénelage (anti-aliasing) lisse les bordures en mélangeant les couleurs des pixels adjacents. Cela explique pourquoi un pixel peut présenter une nuance légèrement différente de la couleur théorique attendue.
Confidentialité et traitement des données
Le traitement de vos fichiers respecte des règles strictes de confidentialité:
- L'image est lue directement depuis votre appareil et ne quitte jamais votre navigateur.
- Aucune donnée, image ou coordonnée n'est envoyée à BroBroGo.
- L'intégralité du décodage et de l'échantillonnage s'effectue localement sur votre machine.
Intégration dans le flux de travail numérique
L'extraction précise de couleurs répond aux besoins de plusieurs profils professionnels:
- Développeurs web: Récupération rapide des codes HEX, RGB ou HSL pour les intégrer directement dans les fichiers de style CSS.
- Designers d'interfaces (UI): Prélèvement de nuances exactes sur des maquettes ou des images de référence pour concevoir des chartes graphiques cohérentes.
- Créateurs de contenu: Échantillonnage de couleurs spécifiques pour harmoniser des visuels de marque ou effectuer des retouches d'images.
En cas de restriction de sécurité de votre navigateur empêchant l'écriture automatique dans le presse-papiers, l'outil affiche l'avertissement suivant: "Copie impossible : votre navigateur a bloqué l'accès au presse-papiers."
FAQ
Comment prélever une couleur sur l'image?
Déplacez le pointeur sur l'image: le panneau affiche la couleur située dessous, et une loupe agrandit la zone pour viser le pixel exact. Cliquez pour enregistrer cette couleur dans vos prélèvements. Vous pouvez aussi cibler l'image, déplacer la mire avec les flèches, puis appuyer sur Entrée.
Quels formats de couleur puis-je obtenir?
Chaque pixel prélevé s'affiche à la fois en HEX, RGB et HSL. Cliquez sur une valeur pour la copier, prête à coller dans du CSS ou un outil de design.
Pourquoi la couleur prélevée ne correspond-elle pas toujours à ce que j'attendais?
Vous obtenez la valeur exacte du pixel enregistrée dans l'image. S'il s'agit d'un JPEG ou d'une capture, la compression et l'anticrénelage ont pu déjà modifier légèrement les pixels voisins; et un pixel semi-transparent est lu seul, sans ce qui se trouve derrière.
Quelle est la limite de l'historique des couleurs?
L'historique peut conserver jusqu'à 12 couleurs enregistrées. Lorsque vous cliquez sur un échantillon de cet historique, ses valeurs de couleur et ses coordonnées sont rechargées dans l'affichage principal.