Comment Extraire Les Codes Couleurs Dans Les Captures D'écran?

Quelle est la méthode la plus efficace pour extraire les codes de couleur d'une certaine capture d'écran ?

Si vous effectuez une recherche rapide en ligne pour ce type de question, vous découvrirez qu'il n'y aura pas beaucoup d'articles sur ce sujet. 

Pour cette raison, nous avons décidé d'écrire un article qui l'expliquerait de la manière la plus complète et la plus informative possible.

Que ce soit via un site Web, une application ou une extension Chrome, chacun a ses propres avantages et inconvénients.

Voici cinq méthodes pour extraire HEX, RGB , HSL et d'autres codes de couleur à partir de captures d'écran.

1- Utiliser ImageColorFinder.com

Nous promettons que le but de cet article n'est pas uniquement de promouvoir notre propre outil, mais c'est un peu le cas :)

Après avoir fait quelques recherches sur le Web, nous avons découvert que les solutions disponibles n'étaient pas très conviviales ou comportaient beaucoup trop de publicités sur chaque page.

C'est pourquoi  >ImageColorFinder.com a été créé.

page d'accueil de l'outil de recherche de couleurs d'image

Non seulement notre application vous permet de télécharger votre propre image, de trouver automatiquement la palette de couleurs idéale et de sélectionner manuellement une couleur, mais elle peut également produire des photos aléatoires à partir d'Internet pour vous inspirer de ces couleurs.

Dans cette occasion spécifique, nous parlerons simplement de la recherche de couleurs dans une capture d'écran, mais dans d'autres cas, vous pourriez voir comment quelque chose comme cela peut être utile pour un concepteur ou un programmeur.

Voici comment cela fonctionne :

Étape 1 : Téléchargez votre propre image

Appuyez simplement sur le bouton de téléchargement et sélectionnez la photo sur votre appareil.

Tous les formats d'image, ainsi que les fichiers GIF et SVG, peuvent être téléchargés.

Une fois que vous avez téléchargé votre capture d'écran, notre outil l'analysera, vous affichera et vous recommandera des couleurs qui pourraient être similaires à celles que vous recherchez.

Si ce n'est pas le cas, la prochaine étape vous aidera malgré tout.

Étape 2 : cliquez, survolez ou appuyez sur le conteneur d'images

Vous pouvez sélectionner manuellement les couleurs de n'importe quelle image si les couleurs générées ne correspondent pas à ce que vous recherchez.

Pour ce faire, vous utiliserez la pipette pour plus de précision et de commodité.

Lorsque vous appuyez, cliquez ou appuyez sur l'image, cette pipette apparaît.

Après cela, vous pouvez survoler et rechercher la couleur exacte que vous recherchez.

Les coins de la pipette vous montreront également la couleur sur laquelle vous survolez, et le carré rouge à l'intérieur vous aidera à déterminer où vous vous trouvez dans l'image.

Étape 3 : Copiez la valeur de couleur  

Après avoir terminé l'étape 2, il ne vous reste plus qu'à copier les codes de couleur que vous avez obtenus à partir de notre outil.

Pour ce faire, appuyez simplement sur le conteneur de couleur et la valeur sera automatiquement copiée dans votre presse-papiers.

D'autres fonctionnalités supplémentaires que vous pouvez utiliser sont les personnalisations au bas de l'outil.

Ceux-ci vous permettront de choisir entre les systèmes de couleurs HEX, RGB et HSL, de pixelliser l'image pour plus de commodité, et également d'augmenter ou de diminuer le zoom de la pipette.

2- Utilisation des outils de développement Chrome

Si vous êtes un développeur ou si vous avez une certaine compréhension du fonctionnement de Chrome et de ses outils de développement, vous pouvez utiliser cette option ; sinon, je recommanderais de s'en tenir à la méthode n ° 1.

Dans cette situation, vous pouvez ouvrir l'image dans Chrome, puis inspecter la page pour trouver les codes de couleur de l'image à l'aide de la pipette intégrée de Chrome.

Voici comment cela se passerait :

Étape 1 : Ouvrez ou faites glisser le fichier image sur Chrome

Pour cette étape, vous pouvez simplement cliquer avec le bouton droit sur une image et sélectionner Ouvrir avec > Chrome.

Vous pouvez, en revanche, lancer Chrome directement et faire glisser l'image vers un nouvel onglet ou un existant.

Étape 2 : Inspectez la page 

Après avoir ouvert votre image dans un onglet Chrome, inspectez simplement la page à l'aide des outils de développement Chrome.

Vous pouvez inspecter une page en cliquant dessus avec le bouton droit de la souris et en sélectionnant inspecter la page, ou en appuyant sur Ctrl + Maj + I.

Cela ouvrira un nouvel onglet à droite de votre écran.

Étape 3 : Cliquez sur ou créez n'importe quelle couleur dans le conteneur Styles 

Dans cette étape, nous rechercherons dans le conteneur de styles toute propriété de couleur d'un élément aléatoire, ou nous en créerons une aléatoire.

Après cela, nous pouvons cliquer sur ladite couleur et la remplacer par celle dont nous essayons d'obtenir la valeur de couleur exacte.

3- En utilisant le Paint de Windows intégré

Si vous avez un ordinateur Windows, Paint est un moyen simple d'y parvenir.

Au lieu d'utiliser Chrome pour ouvrir l'image cette fois, nous allons simplement cliquer dessus avec le bouton droit de la souris et sélectionner Modifier.

Maintenant, dans le tableau de bord Paint, sélectionnez le sélecteur de couleurs et choisissez la couleur exacte à partir de laquelle vous souhaitez copier sa valeur.

Après cela, sélectionnez "Modifier les couleurs" et Paint affichera la dernière couleur que vous avez sélectionnée dans les valeurs RGB et HSL.

4- Télécharger et utiliser les extensions Chrome

Ces deux dernières sont mes options les moins préférées car elles vous obligent à installer un logiciel supplémentaire sur votre appareil, mais elles peuvent certainement vous aider dans ce cas.

Il existe de nombreuses extensions Chrome qui vous permettent d'obtenir les codes de couleur sur n'importe quel site Web en utilisant cette méthode.

Ils sont extrêmement similaires aux deux premiers moyens de cette liste, c'est pourquoi je ne pense pas qu'ils soient très utiles.

C'est également une bonne alternative pour les personnes qui ne savent pas comment inspecter un site Web dans Chrome et qui ne veulent pas faire l'effort supplémentaire d'utiliser la pipette de Chrome.

Je vous recommande d'aller sur le Chrome Web Store et de rechercher un sélecteur de couleurs qui réponde à vos exigences et fonctionne bien.

Colorgrab et Color Picker sont deux que je recommanderais.

Si vous êtes sur un téléphone mobile, l'option suivante pourrait certainement être meilleure pour vous.

5- Utiliser des applications mobiles

Pour certaines personnes, l'utilisation d'applications mobiles peut être incroyablement pratique, mais pas tellement pour ceux d'entre vous qui ont juste besoin d'effectuer ce type d'activité de temps en temps.

La majorité des applications mobiles fonctionneront de la même manière que la première stratégie que nous avons mentionnée.

Vous allez télécharger une image, puis sélectionner une couleur à l'intérieur.

Dans les appareils IOs, >Color Names AR serait le premier que je vérifierais, et sur Android, ce serait >Color Picker .

Cependant, vous devez savoir que lorsque vous ouvrez l'application pour la première fois, une offre payante premium vous sera présentée. cliquez simplement sur le bouton X pour rejeter l'offre et utiliser la version gratuite à la place.

Conclusion

En fin de compte, tout dépend de ce que vous voulez et des efforts que vous êtes prêt à y consacrer.

Si vous n'en avez besoin que maintenant et que vous n'en aurez plus besoin, les deux premières procédures sont les meilleures. si vous en avez besoin régulièrement, les deux premières méthodes sont nettement plus pratiques.

Merci d'avoir pris le temps de lire et de visiter! 🤘