Imaginez que vous faites défiler des images et que vous trouviez la couleur parfaite - la nuance exacte dont vous avez besoin pour votre prochain projet de conception. Il existe des outils impressionnants sur Internet pour vous aider à identifier des couleurs spécifiques sur n'importe quelle application ou site Web. Jetons un coup d'œil à certaines des meilleures options.
1. Utilisation des outils de développement sur le navigateur Web Chrome
Une option que vous pouvez essayer est l'outil Chrome Developer. Chrome est livré avec de nombreuses fonctionnalités utiles pour les développeurs, ce qui facilite grandement les tâches. Vous pouvez utiliser les étapes suivantes pour identifier des couleurs spécifiques sur n'importe quelle application ou site Web.
- Ouvrez le site Web sur lequel vous souhaitez identifier une couleur sur le navigateur Web Chrome
- Cliquez sur l'icône à trois points en haut à droite de Chrome. Une fenêtre contextuelle avec un tas d'options apparaîtra.
- Cliquez sur « Plus d'outils », puis sélectionnez « Outils de développement » dans la fenêtre contextuelle résultante.
- Utilisez Ctrl + Shift + I si vous souhaitez ignorer les étapes ci-dessus
- Maintenant, la fenêtre se divise en deux écrans - le site Web à gauche et le code du site Web à droite
- Tapez Ctrl + Shift + C sur votre clavier. Cela vous montre tous les détails d'un élément particulier sur le site Web lorsque nous passons le curseur de notre souris sur les éléments.
- Vous pouvez trouver le code couleur de l'élément ainsi que d'autres informations utiles.
Exemple
Disons que vous êtes intéressé par les codes couleurs spécifiques de certains éléments sur le site suivant :
![](/f/3802f656e6aa739a132c4f46c8c3ef27.png)
Vous pouvez choisir les outils de développement en cliquant sur les trois points dans le coin de votre écran. Dans le menu déroulant, sélectionnez Plus d'outils, puis Outils de développement.
![](/f/c67916cfd69cd3c7eabf9c1f6bfefd3e.jpg)
![](/f/b91d07c986b33e04985c5b1ad4325050.png)
L'écran sera visuellement divisé en deux pages. Vous verrez le site Web à gauche et le code du site à droite.
![](/f/30ac7e027f77876a2636404d7a26f8a7.png)
Tapez la commande et le raccourci « Ctrl + Shift + C » et passez le curseur de la souris sur les éléments du site Web. Cela montrera la couleur de cet élément, ainsi que d'autres informations utiles. Ci-dessous deux exemples où l'on retrouve la couleur de la barre de navigation et un tableau de bord sous l'outil de recherche.
Ici, nous pouvons trouver le code de couleur sur la fenêtre contextuelle de la barre de navigation. Le code couleur est #3333333.
![](/f/fda260f224a5338b8e67e408e3366ecd.png)
La couleur du tableau de bord peut être trouvée avec d'autres détails utiles. Couleur: #333333, Couleur d'arrière-plan: #5D4A8E. Bien que cela puisse sembler un peu intimidant au début, le programme devient beaucoup plus facile à utiliser avec un peu de pratique.
2. Extension Chrome pour compte-gouttes
Eye Dropper est une extension Chrome populaire et largement utilisée pour vous aider à trouver certaines couleurs sur n'importe quel site Web ou application.
![](/f/ae124fff672568f73dab11c911f175c7.png)
Suivez les étapes ci-dessous pour identifier des couleurs spécifiques sur un site Web ou une application à l'aide de l'outil d'extension Eye Dropper.
- Ouvrez n'importe quel site Web ou application sur le navigateur Web Chrome
- Cliquez sur l'icône de l'extension Eye Dropper
- Sélectionnez « Choisir la couleur de la page Web » et placez le curseur de votre souris sur différents éléments de l'application ou du site Web.
![](/f/1585b6328edf37d75e66ab09e8baa8b8.png)
Vous pouvez trouver le code couleur des éléments répertoriés en bas à droite de la page Web.
Exemple
D'accord, utilisons l'outil d'extension pipette dans un exemple réel. Nous allons commencer par ouvrir un site Web et cliquer sur l'icône de l'extension Eye Dropper
![](/f/4cf6868d9a6e64113b41e9fb8d0f3fb2.png)
Lorsque vous passez votre curseur sur divers éléments du site Web, vous pouvez voir les codes de couleurs apparaître dans une section en bas à droite de l'écran.
![](/f/4a5cf6467115c08e46ef1c7a94122f05.png)
Lorsque je passe mon curseur sur l'icône en forme de V, je peux voir son code de couleur dans la fenêtre du bas, comme mentionné. L'avantage de cet outil est que vous pouvez également trouver le code RVB ainsi que le code couleur hexadécimal de l'élément. La méthode est flexible à utiliser pour ceux qui veulent un moyen simple et rapide de saisir les codes de leurs couleurs préférées.