Image Color Picker: Extraire des couleurs

Qu'est-ce qu'Image Color Picker ?

Bientôt disponible: Image Color Picker est un outil basé sur le navigateur qui vous permet d'extraire des valeurs de couleur exactes de n'importe quelle image en cliquant directement sur les pixels. Téléversez une photo, survolez n'importe quelle zone pour prévisualiser la couleur dans une superposition de loupe en temps réel, puis cliquez pour capturer les valeurs précises HEX, RGB, HSL et CMYK à cet endroit. Contrairement aux outils de développement du navigateur ou aux pipettes de bureau, cet outil fonctionne avec des fichiers image téléversés, construit une palette à partir de vos sélections au cours d'une session et copie n'importe quel format dans le presse-papiers en un seul clic. Tout s'exécute dans votre navigateur — aucun téléversement vers un serveur, aucun compte requis.

Fonctionnalités principales

• Clic pour sélectionner des couleurs dans les images : Chaque clic de souris sur l'image chargée capture la couleur exacte du pixel à cette position, en tenant compte de la façon dont l'image est mise à l'échelle pour s'adapter à la zone d'affichage.
• Loupe de zoom pour la précision : Lorsque vous déplacez le curseur sur l'image, un carré de prévisualisation flottant de 60×60 px suit votre position, affichant la couleur sous le curseur et sa valeur HEX afin que vous puissiez voir exactement ce que vous allez sélectionner avant de cliquer.
• Extraire les valeurs HEX, RGB, HSL, CMYK : Chaque couleur sélectionnée est affichée dans les quatre formats simultanément. Le composant utilise les fonctions de conversion rgbToHex, rgbToHsl et rgbToCmyk de la bibliothèque partagée d'utilitaires de couleur.
• Construire une palette de couleurs : L'outil conserve jusqu'aux 10 dernières couleurs uniques que vous avez sélectionnées lors d'une session. Les valeurs HEX en double sont silencieusement ignorées — cliquer deux fois sur la même couleur n'ajoute pas de deuxième entrée.
• Suivi de l'historique des couleurs : Les swatches de palette cliqués vous permettent de revoir n'importe quelle couleur précédemment sélectionnée et de voir à nouveau toutes ses valeurs de format sans les resélectionner.
• Copier les couleurs en un clic : Chaque ligne de format dans le panneau de couleur actuel a son propre bouton de copie. Un bouton « Copy All Colors » exporte toute la palette de la session sous forme de liste de valeurs HEX séparées par des virgules.
• Traitement 100 % côté client : L'image est dessinée sur un élément canvas HTML5 caché. Toutes les lectures de pixels utilisent getImageData() localement — aucune donnée ne quitte votre navigateur.
• Fonctionne avec n'importe quel format d'image : L'entrée de fichier utilise accept="image/*", donc tout format que votre navigateur peut décoder (JPEG, PNG, WebP, GIF, AVIF, SVG) est pris en charge.

Comment utiliser Image Color Picker

Étape 1 : Téléversez votre image

Ouvrez l'Bientôt disponible: Image Color Picker. Vous verrez un panneau de téléversement avec une zone de dépôt en pointillés. Cliquez sur la zone pour ouvrir un sélecteur de fichiers ou faites glisser et déposez un fichier image directement dessus. Lorsque l'image se charge avec succès, l'outil affiche une notification toast « Image loaded » et efface les couleurs précédemment sélectionnées.

Étape 2 : Survolez pour prévisualiser les couleurs

Une fois que votre image apparaît, déplacez le curseur sur n'importe quelle zone. Un carré de couleur flottant de 60×60 px suit votre curseur, légèrement décalé vers le haut à droite pour ne pas masquer le pixel que vous inspectez. Le carré se remplit avec la couleur en direct sous votre curseur et affiche sa valeur HEX en texte contrasté. Cette loupe disparaît lorsque vous déplacez le curseur hors de l'image.

Étape 3 : Cliquez pour capturer une couleur

Cliquez sur n'importe quel point de l'image pour verrouiller cette couleur. Le panneau « Current Color » apparaît sous l'image affichant :

• Un grand swatch de couleur avec la valeur HEX centrée en texte contrasté
• Quatre lignes pour HEX, RGB, HSL et CMYK — chacune avec un bouton de copie

Par exemple, cliquer sur un ciel de mi-teinte dans une photographie pourrait produire :

HEX:  #6fa8dc
RGB:  rgb(111, 168, 220)
HSL:  hsl(210, 59%, 65%)
CMYK: cmyk(50%, 24%, 0%, 14%)

Étape 4 : Construisez une palette

Continuez à cliquer sur différentes zones de l'image. Chaque couleur unique que vous sélectionnez apparaît comme un swatch dans le panneau « Picked Palette » en bas. Cliquez sur n'importe quel swatch pour le recharger comme couleur active actuelle et voir toutes ses valeurs à nouveau. La palette conserve jusqu'à 10 couleurs uniques par session.

Étape 5 : Copiez vos couleurs

Copiez la valeur d'un format unique en utilisant le bouton de copie sur sa ligne. Pour exporter la palette complète, cliquez sur « Copy All Colors » — cela écrit toutes les valeurs HEX dans votre presse-papiers sous forme de chaîne séparée par des virgules, comme #6fa8dc, #2d5f8e, #f4c842, #e8573a. Chargez une nouvelle image avec la zone de téléversement à tout moment ; la palette se réinitialise automatiquement.

Exemples pratiques

Faire correspondre les couleurs d'une marque à partir d'un logo

Vous avez un PNG du logo de votre entreprise et avez besoin des couleurs exactes de la marque pour une feuille de style CSS. Téléversez le logo, survolez la couleur principale de la marque et cliquez pour la capturer. Sélectionnez ensuite les couleurs secondaires et d'accent. Utilisez « Copy All Colors » pour obtenir une liste séparée par des virgules de toutes les valeurs hexadécimales que vous avez sélectionnées, puis collez-les directement dans vos variables CSS :root.

Échantillonner une palette de couleurs depuis une photographie

Une photographie de produit a un schéma de couleurs naturel que vous souhaitez utiliser pour un design d'interface. Téléversez la photo et cliquez systématiquement sur les couleurs dominantes — le ton de fond, le reflet du produit, une zone d'ombre et un détail d'accent. Le panneau de palette accumule jusqu'à 10 swatches uniques. Lorsque c'est terminé, cliquez sur chaque swatch pour récupérer la valeur RGB à utiliser dans des outils de design qui acceptent des entrées numériques de couleur.

Identifier une couleur de pixel spécifique pour des rapports de bogues

Une interface a une couleur de texte incorrecte sur un état particulier d'un bouton et vous avez une capture d'écran. Téléversez la capture d'écran, survolez le texte du bouton et cliquez. Copiez la valeur HEX et incluez-la dans votre rapport de bogue avec la valeur attendue. Cela élimine l'ambiguïté sur quelle couleur exacte est rendue incorrectement.

Conseils et bonnes pratiques

Utilisez des images haute résolution lorsque la précision est importante. L'outil mappe la position du curseur aux coordonnées réelles des pixels de l'image en utilisant un facteur d'échelle basé sur la taille rendue par rapport à la taille du canvas, donc faire un zoom sur un détail dans votre éditeur d'image avant d'exporter vous donne plus de pixels adressables par zone visuelle.

La loupe affiche la valeur HEX avant de cliquer — utilisez-la pour confirmer que vous êtes exactement sur le bon pixel plutôt que sur un pixel d'arête anti-aliasée voisin, ce qui est particulièrement important lors de l'échantillonnage de texte ou de lignes fines.

La palette ignore les valeurs HEX en double. Si vous voulez comparer deux couleurs visuellement similaires qui diffèrent d'un seul canal, sélectionnez-en une, notez ses valeurs, puis sélectionnez l'autre.

Lors de la copie de toutes les couleurs de la palette, la sortie est des valeurs HEX séparées par des virgules. Collez cela directement dans l'entrée hexadécimale du Bientôt disponible: Palette Generator pour explorer des variations d'harmonie sur vos couleurs extraites.

Problèmes courants et dépannage

Toast « Load error » après la sélection d'un fichier : L'image n'a pas pu être décodée après la lecture. Cela se produit généralement avec des fichiers corrompus ou des formats que le navigateur ne peut pas analyser (certains fichiers TIFF et RAW d'appareil photo). Convertissez l'image en JPEG ou PNG et réessayez.

Le clic ne produit pas de couleur / la loupe n'apparaît pas : Cela se produit si le canvas n'a pas été initialisé correctement. Rechargez l'outil et retéléversez l'image. Si l'image est très grande (plus de 8000×8000 pixels), certains navigateurs limitent la taille du canvas — redimensionnez l'image avant de la téléverser.

Toutes les couleurs sélectionnées semblent identiques : Vous cliquez peut-être sur une zone uniforme (arrière-plan, remplissage uni). Faites un zoom sur l'image dans un éditeur de photos pour trouver des zones avec plus de détails, puis téléversez cette version recadrée.

Le swatch de palette ne répond pas au clic : Seules les 10 couleurs uniques sélectionnées les plus récemment sont conservées. Si vous avez déjà sélectionné 10 couleurs, les couleurs uniques suivantes remplacent l'entrée la plus ancienne. Cliquer sur un swatch fonctionne toujours pour recharger la couleur — si la palette semble ne pas répondre, vérifiez que votre clic est tombé sur le swatch et non sur l'espace entre les swatches.

Le glisser-déposer ne fonctionne pas : La zone de dépôt vérifie que file.type.startsWith('image/'). Les fichiers sans type MIME ou avec des types incorrects sont silencieusement ignorés. Utilisez la méthode clic pour naviguer comme solution de repli.

Confidentialité et sécurité

Image Color Picker traite vos fichiers entièrement dans votre navigateur. Lorsque vous téléversez une image, elle est lue comme une URL de données en utilisant l'API FileReader et dessinée sur un élément canvas caché — aucune donnée n'est transmise à un serveur. Vos images ne quittent jamais votre appareil. L'outil fonctionne sans connexion internet une fois la page chargée, ce qui le rend sûr pour les photographies confidentielles, les ressources de design propriétaires et les captures d'écran internes.

Foire aux questions

Image Color Picker est-il gratuit ?

Oui, Image Color Picker est entièrement gratuit sans limites d'utilisation. Vous n'avez pas besoin d'un compte, d'un abonnement ou d'un paiement pour l'utiliser. L'outil est disponible sur Bientôt disponible: Glyph Widgets et s'exécute directement dans votre navigateur.

Image Color Picker fonctionne-t-il hors ligne ?

Oui. Une fois la page chargée, tout le traitement utilise l'API Canvas HTML5 localement. Vous pouvez vous déconnecter d'internet et continuer à sélectionner des couleurs dans les images sans interruption. L'outil n'effectue pas de requêtes réseau pendant l'utilisation normale.

Mes données sont-elles sécurisées avec Image Color Picker ?

Vos images sont traitées entièrement côté client en utilisant FileReader et getImageData(). Aucune donnée d'image n'est téléversée sur un serveur. Glyph Widgets n'a pas accès au contenu des fichiers que vous ouvrez avec cet outil.

Quels formats de couleur l'outil produit-il ?

L'outil produit quatre formats pour chaque couleur sélectionnée : HEX (p. ex. #6fa8dc), RGB (p. ex. rgb(111, 168, 220)), HSL (p. ex. hsl(210, 59%, 65%)) et CMYK (p. ex. cmyk(50%, 24%, 0%, 14%)). Chaque format a son propre bouton de copie.

Combien de couleurs puis-je sélectionner en une session ?

La palette conserve les 10 dernières couleurs uniques sélectionnées. Les valeurs HEX en double ne sont pas stockées à nouveau — cliquer sur la même couleur une deuxième fois n'a aucun effet sur le nombre de la palette. Charger une nouvelle image réinitialise la palette à vide.

Quels formats d'image sont pris en charge ?

L'entrée de fichier accepte tout format d'image que votre navigateur peut décoder, en utilisant l'attribut accept="image/*". En pratique, cela inclut JPEG, PNG, WebP, GIF, AVIF et SVG. Les formats comme RAW ou TIFF que les navigateurs ne peuvent pas décoder nativement produiront une erreur de chargement.

Puis-je sélectionner des couleurs de la même image après avoir copié ?

Oui. L'image reste chargée dans l'outil jusqu'à ce que vous la supprimiez ou en chargiez une nouvelle. Vous pouvez continuer à cliquer, construire votre palette et copier des couleurs aussi longtemps que vous le souhaitez sans retéléverser.

Quelle est la précision de l'échantillonnage des couleurs ?

L'outil lit exactement un pixel à la position cliquée en utilisant getImageData(x, y, 1, 1). Le mappage d'échelle entre la taille d'image affichée et les dimensions réelles du canvas est calculé à partir de getBoundingClientRect(), de sorte que le résultat reflète avec précision la vraie couleur du pixel à cette position même lorsque l'image est affichée à une taille différente de sa résolution native.

À quoi sert la loupe ?

L'aperçu de loupe flottant montre la couleur actuelle sous votre curseur avant de vous engager dans une sélection. Cela vous aide à identifier exactement quel pixel vous êtes sur le point d'échantillonner, particulièrement utile le long des limites de couleur, des dégradés ou des arêtes anti-aliasées où les pixels adjacents diffèrent significativement.

Puis-je exporter la palette complète en une seule action ?

Cliquer sur « Copy All Colors » écrit toutes les valeurs HEX sélectionnées dans votre presse-papiers sous forme de liste séparée par des virgules. Vous pouvez ensuite les coller dans des outils de design, des variables CSS ou le Bientôt disponible: Palette Generator pour d'autres travaux de couleur.

Outils associés

• Bientôt disponible: Palette Generator — Génère des harmonies de couleurs complémentaires, analogues, triadiques et autres à partir d'une couleur de base que vous avez extraite avec le sélecteur.
• Color Converter — Convertit entre HEX, RGB, HSL, CMYK et d'autres formats avec pleine précision.
• Contrast Checker — Vérifie les ratios de contraste d'accessibilité WCAG entre deux couleurs de votre palette.
• Color Picker — Sélectionnez une couleur directement sans image, à l'aide d'une roue chromatique et de curseurs.

Essayez Image Color Picker maintenant : Bientôt disponible: Glyph Widgets Image Color Picker