CRX id
nehjikgeimnnhanmobkkfjlnnklgmneo
nehjikgeimnnhanmobkkfjlnnklgmneo
Description from extension meta
Récupérez n'importe quelle couleur de pixel de n'importe quelle page Web et copiez instantanément son code HEX.
Image from store
Description from store
La précision des couleurs est le fil conducteur de toute interface, élément de marque, tableau de bord de visualisation de données et campagne marketing. Pourtant, les designers et les ingénieurs front-end perdent encore un temps fou à examiner les codes hexadécimaux dans les outils de développement ou à faire des captures d'écran d'une page pour ensuite l'échantillonner dans Photoshop. L'outil Goutte d'Eau, une extension de navigateur légère basée sur Manifest V3, transforme cette difficulté en un geste unique et élégant : cliquez sur l'icône de la barre d'outils, sélectionnez un pixel dans la fenêtre d'affichage, et la valeur #RRGGBB exacte est copiée dans votre presse-papiers. Un toast discret confirme l'action, et vous pouvez reprendre votre travail sans interruption.
Pourquoi cette extension est importante
Les sélecteurs de couleurs natifs des navigateurs existent depuis des années, mais la plupart sont enfouis au cœur de l'inspecteur, limités aux éléments du DOM ou cachés derrière des sous-menus accessibles par clic droit. L'outil Goutte d'Eau offre la même puissance grâce à un bouton permanent qui fonctionne sur tout ce que votre écran affiche : images, canevas, images vidéo, SVG et même des plugins tiers.
Points forts des fonctionnalités
Activation en un clic – Pas de fenêtre contextuelle ni de panneau de configuration. Un service worker en arrière-plan injecte instantanément le script de sélection de contenu, limitant ainsi la surcharge mémoire en cas d'inactivité.
Échantillonnage universel de pixels – Étant donné que l’extension capture la mémoire tampon de l’écran plutôt que l’arborescence DOM, elle fonctionne sur les scènes WebGL rendues dynamiquement, les jeux et les vidéos diffusées en continu aussi bien que sur le HTML statique.
Copie instantanée du presse-papiers – La chaîne HEX est automatiquement écrite dans le presse-papiers ; vous pouvez la coller directement dans Figma, VS Code ou Slack sans boîte de dialogue intermédiaire.
Toast de confirmation visuelle – Une micro-interaction dans le coin de la page (« #ffcc33 copié ! ») vous rassure que l’action a réussi et disparaît après 1,5 seconde.
Avantages pour l'utilisateur
Gain de temps – Éliminez les détours par les outils de développement ou les applications externes. Au cours d'un sprint de conception, ces secondes se transforment en heures.
Charge cognitive réduite – Rester dans le même contexte mental maintient le flux créatif ; vous ne jonglez pas avec les fenêtres ou ne changez pas de focus.
Cohérence parfaite au pixel près – Vérifiez rapidement que le code de production correspond au guide de style de la marque ou que les maquettes marketing respectent les ratios de contraste d’accessibilité.
Prévention des erreurs – La saisie manuelle de codes hexadécimaux entraîne des fautes de frappe ; la copie dans le presse-papiers supprime ce risque, ce qui conduit à des validations plus propres et à moins de rapports de bogues.
Groupes d'utilisateurs cibles
Concepteurs UI/UX
Échantillonnez rapidement les couleurs de prototypes vivants pour les réutiliser dans les systèmes de conception
Ajustement précis des nuances lors d'une séance de révision Figma
Développeurs front-end
Valider que les variables CSS s'affichent correctement dans différents états
Passez la souris sur un bouton dans la mise en scène et récupérez sa couleur active
Ingénieurs AQ
Confirmer les ratios de contraste WCAG et la conformité de la marque
Lors des tests de régression, comparez la version de production à la spécification
Spécialistes du marketing numérique et créateurs de contenu
Associez les graphiques ad hoc à la palette du site Web
Tirez la bannière bleue du héros pour une tuile sociale de dernière minute