Mode d’emploi
- Choisissez une image ou déposez-la dans la zone.
- Déplacez le pointeur sur l'image ; la loupe affiche les pixels autour.
- Cliquez ou touchez pour prélever la couleur et la copier en HEX, RGB ou HSL.
- Faites défiler vers le bas pour voir les couleurs dominantes, choisissez le nombre souhaité, puis copiez-les ou téléchargez-les sous forme de variables CSS.
Fonctionnement
L’image est dessinée sur un canvas dans votre navigateur et la couleur du pixel exact situé sous le pointeur y est lue. La loupe affiche une zone de 11 × 11 pixels agrandie, avec le pixel sélectionné entouré. Les images de plus de 4096 pixels de côté sont d’abord réduites, si bien que sur les très grandes photos, un pixel prélevé correspond à la moyenne de quelques pixels d’origine.
Les couleurs dominantes sont déterminées par partitionnement k-means : les pixels sont d’abord regroupés en 32 768 petits groupes de couleurs, puis ces groupes sont fusionnés pour obtenir le nombre de couleurs que vous choisissez, en les pondérant par le nombre de pixels qu’ils contiennent. Les points de départ sont choisis de manière déterministe, de sorte que la même image donne toujours la même palette.
Les couleurs sont lues dans l’espace sRGB utilisé par le navigateur pour l’affichage. Si une image contient un profil colorimétrique à large gamme, les valeurs peuvent différer légèrement de celles affichées par un éditeur photo. Dans les navigateurs qui le prennent en charge (Chrome et Edge sur ordinateur), le bouton Prélever à l’écran utilise l’outil EyeDropper intégré pour prélever une couleur n’importe où sur votre écran.
Exemples
Retrouver la couleur d’une marque
Importez une capture d’écran d’un logo, cliquez sur sa couleur principale et copiez #1a73e8 ou rgb(26, 115, 232) dans votre CSS.
Palette à partir d’une photo
Une photo de plage répartie en 6 couleurs donne des tons de sable, de mer et de ciel, chacun avec la part de l’image qu’il couvre, triés de la plus grande à la plus petite.
Vérifier une nuance
Zoomez avec la loupe pour prélever le pixel exact d’une ligne fine plutôt que le bord anticrénelé situé à côté.
Foire aux questions
Pourquoi la couleur diffère-t-elle légèrement de celle de mon éditeur photo ?
Les navigateurs convertissent les images en sRGB pour l’affichage. Les photos avec un profil à large gamme (Display P3, Adobe RGB) peuvent afficher des valeurs légèrement différentes dans un éditeur qui conserve le profil d’origine.
Pourquoi le bouton « Sélectionner à l'écran » est-il absent ?
Cela nécessite l'API EyeDropper, prise en charge uniquement par certains navigateurs, actuellement Chrome et Edge sur ordinateur. La sélection depuis l'image importée fonctionne partout.
Comment les couleurs dominantes sont-elles choisies ?
Par regroupement k-means de tous les pixels, pondéré par la fréquence de chaque couleur. Les détails petits mais vifs peuvent être fusionnés avec une couleur proche plus présente ; augmentez le nombre de couleurs pour les séparer.
L'image est-elle téléversée ?
Non. Elle est décodée et analysée par cette page dans votre navigateur et ne quitte jamais votre appareil.
Confidentialité
L'image est traitée entièrement dans votre navigateur. Elle n'est pas téléversée et les couleurs prélevées ne sont ni envoyées ni stockées.