Pipette de couleur d’image
Prélevez des couleurs sur n’importe quelle image en cliquant sur un pixel. Une loupe montre les pixels exacts ; HEX, RGB et HSL et historique des couleurs prélevées.
S'exécute entièrement dans votre navigateur. Vos données ne sont jamais envoyées.
Outils Connexes
Voir ToutQu'est-ce que Pipette de couleur d’image ?
Importez ou collez une image et cliquez sur un point pour lire la couleur exacte de ce pixel en HEX, RGB (ou RGBA si semi-transparent) et HSL. Une loupe montre les pixels autour du curseur, des champs X/Y permettent de viser un pixel précis, et chaque couleur prélevée est conservée dans un historique cliquable.
Comment utiliser Pipette de couleur d’image
- Déposez, choisissez ou collez une image (une capture d’écran collée avec Ctrl+V fonctionne très bien).
- Déplacez le pointeur sur l’image pour voir la vue agrandie, puis cliquez pour prélever une couleur.
- Ou saisissez les coordonnées exactes X et Y du pixel.
- Cliquez sur une valeur HEX, RGB ou HSL pour la copier ; réutilisez d’anciennes couleurs depuis Couleurs prélevées.
Exemple
Image 40×20 dont le quart supérieur droit est vert pur, pixel X=25, Y=5
#00FF00 · rgb(0, 255, 0) · hsl(120, 100%, 50%)
Quand utiliser Pipette de couleur d’image
Utilisez-le pour retrouver la couleur d’une marque à partir d’un logo ou d’une capture, échantillonner des couleurs d’une photo pour un design ou vérifier la couleur exacte d’un élément d’interface. Notez que la compression JPEG et l’anticrénelage modifient légèrement les couleurs des pixels : échantillonnez des aplats plutôt que des bords. Pour obtenir toute une palette d’un coup, utilisez la palette de couleurs d’image.
Comment fonctionne Pipette de couleur d’image
L’image est dessinée sur un canevas à sa pleine résolution et ses pixels sont lus une seule fois avec getImageData. Un clic est converti des coordonnées écran en coordonnées de pixel de l’image, puis la valeur RGBA à cet indice est convertie en HEX et HSL (teinte en degrés, saturation et luminosité en pourcentage). La loupe redessine un voisinage de 11×11 pixels sans lissage.
Cas d'utilisation courants
- Trouver le code HEX d’une couleur de marque dans un logo.
- Échantillonner une couleur d’une capture de site web pour la réutiliser en CSS.
- Vérifier que deux éléments d’interface utilisent vraiment la même couleur.
- Collecter des couleurs d’une photo pour un moodboard.
Note de Sécurité
Les images sont décodées, traitées et encodées localement dans votre navigateur avec l’API Canvas. Rien n’est envoyé à un serveur.
Questions Fréquentes
Pourquoi la couleur diffère-t-elle légèrement de celle attendue ?
Les formats avec perte comme le JPEG et le lissage sur les bords modifient les valeurs des pixels. Prélevez au milieu d’un aplat, ou utilisez les champs X/Y pour choisir un pixel exact.
Cela fonctionne-t-il avec des images transparentes ?
Oui. Les pixels semi-transparents s’affichent en rgba() avec leur valeur alpha ; la valeur HEX indique la partie RGB.
Puis-je prélever des couleurs en dehors du navigateur ?
Non, uniquement depuis l’image chargée. Faites une capture d’écran et collez-la avec Ctrl+V pour prélever n’importe quoi à l’écran.