Obtenir un code hexadécimal à partir d'une photo prend un clic. Obtenir le bon code demande un peu plus de soin, car la compression JPEG et les bords adoucis modifient les pixels avant votre clic. Ce guide montre où les couleurs se faussent et comment l'éviter, et chacun de ses chiffres a été mesuré dans un vrai navigateur.
Par Md. Delwar Hossen · mesures effectuées le 25 août 2026· Dernière mise à jour
Trois étapes, et la seule chose à savoir
Chargez une image, survolez-la pour trouver le pixel voulu, cliquez pour le garder. La suite reprend ces trois étapes en expliquant pourquoi.
Dans votre onglet de navigateur
Votre image
Déposée, collée, choisie dans vos fichiers ou récupérée depuis une URL.
Décodée une fois
createImageBitmap, avec l'orientation EXIF appliquée pour qu'une photo de téléphone soit dans le bon sens.
Canvas source
Conservé à la résolution native de l'image et jamais redimensionné. Toute lecture de couleur se fait ici.
↓ le même canvas alimente les deux ↓
Le canvas d'affichage
ce que vous voyez
Dessiné via une transformation de zoom et de déplacement, lissage désactivé au-delà de 200 % pour que vous voyiez chaque pixel. Rien n'y est jamais échantillonné.
L'échantillonneur
ce que vous obtenez
Lit le canvas source au pixel sous votre curseur, en moyennant le carré choisi dans le réglage Échantillon.
Votre image ne déclenche une requête réseau que si vous en collez l'URL. Un fichier que vous déposez ou collez est décodé en mémoire et n'est envoyé nulle part. Pour le vérifier, ouvrez l'onglet Réseau de votre navigateur pendant vos prélèvements : aucune requête n'apparaît.
L'embranchement du milieu mérite un second regard, car il répond à la question la plus fréquente. Zoomer à 6 400 % ne donne pas une lecture plus précise, et dézoomer n'en donne pas une plus floue. Le zoom existe pour que vous voyiez sur quel pixel vous allez cliquer. La lecture, elle, vient toujours de l'original intact.
Cinq façons de charger une image, et leurs pièges
Elles mènent toutes au même résultat. Elles ne diffèrent que par ce qui peut mal tourner.
La déposer
Glissez un fichier n'importe où sur l'outil. La zone de dépôt s'éclaire quand vous la survolez.
Déposer une seconde image remplace la première et efface vos repères.
La coller
Une capture d'écran, ou une image copiée de n'importe où. Fonctionne depuis toute la page.
Sans effet tant que le curseur est dans un champ de texte : coller un lien dans le champ URL ne fait donc qu'une seule chose.
La choisir
Le sélecteur de fichiers habituel, filtré sur les images.
Sur téléphone, c'est là que se trouve votre pellicule. La plupart des sélecteurs de fichiers mobiles proposent aussi l'appareil photo.
Indiquer une URL
Collez le lien d'une image : elle est récupérée et décodée dans votre navigateur.
Ne fonctionne que si l'hébergeur autorise les autres sites à lire ses images. Beaucoup ne le font pas. En cas de refus, téléchargez le fichier et déposez-le.
Utiliser l'exemple
Une photo intitulée « Powder at sunset », là pour que vous puissiez tout essayer avant d'utiliser vos propres fichiers.
Les grilles de pixels de la section sur la loupe, plus bas, proviennent de cette photo.
Poids maximal
40 Mo
Dimensions maximales
Sans limite
Formats
Tout ce que votre navigateur sait décoder
Orientation des photos
EXIF respecté
Il n'y a pas de limite de dimensions, car l'image n'est jamais redimensionnée pour être échantillonnée : elle est conservée à sa résolution native et lue directement. Le seul format qui pose problème est le vectoriel : un SVG sans largeur ni hauteur sur son élément racine n'a aucune résolution à échantillonner et sera refusé.
La loupe, et le pixel que vous visiez vraiment
Au survol, la loupe agrandit le carré de 13 × 13 pixels autour de votre curseur. Cette fenêtre n'est pas décorative : au zoom normal, un pixel est bien plus petit que la pointe du curseur, et sans elle vous visez à l'aveugle.
Zone
Pixel 435, 204 de la photo d'exemple, agrandi environ 20 fois.
Échantillon
#E79983
Le pixel unique sous le curseur.
#CE8472
À 6,64 du prélèvement sur 1 pixel.
#B97262
À 12,92 du prélèvement sur 1 pixel.
#A8675D
À 17,9 du prélèvement sur 1 pixel.
Coût d'un écart d'un pixel
12,14
Écart max. entre moyennes
11,37
Deux sujets se rencontrent dans ces treize pixels. Élargir l'échantillon revient à faire la moyenne de part et d'autre de la frontière et donne une couleur qui n'appartient à aucun des deux : c'est le seul cas où il faut rester à un pixel et zoomer.
Pixel 149, 336 de la photo d'exemple, agrandi environ 20 fois.
Échantillon
#877978
Le pixel unique sous le curseur.
#524442
À 19,53 du prélèvement sur 1 pixel.
#554745
À 18,55 du prélèvement sur 1 pixel.
#584948
À 17,79 du prélèvement sur 1 pixel.
Coût d'un écart d'un pixel
21,44
Écart max. entre moyennes
1,95
Du détail et du bruit de compression, sans frontière nette qui les traverse. Rater d'un pixel vous emmène ailleurs : c'est précisément pour ce cas qu'existe l'échantillon élargi.
Pixel 72, 17 de la photo d'exemple, agrandi environ 20 fois.
Échantillon
#283270
Le pixel unique sous le curseur.
#283371
À 0,36 du prélèvement sur 1 pixel.
#283371
À 0,36 du prélèvement sur 1 pixel.
#283371
À 0,36 du prélèvement sur 1 pixel.
Coût d'un écart d'un pixel
0,31
Écart max. entre moyennes
0
Il ne se passe rien dans ces treize pixels. Toutes les tailles d'échantillon tombent au même endroit et rater d'un pixel ne coûte rien : l'échantillon le plus étroit est le bon.
Les deux valeurs sont des écarts CIEDE2000. En dessous d'environ 1, l'œil ne distingue plus deux couleurs ; au-delà de 10, ce sont des couleurs différentes.
Lire les trois zones
Passez de l'une à l'autre ci-dessus et regardez les deux chiffres en dessous. Ils résument toute la règle du réglage Échantillon, et vous pouvez la retrouver vous-même plutôt que de l'admettre sur parole :
Un bord franc. Rater d'un pixel coûte cher et les échantillons moyennés ne s'accordent pas entre eux. Ce désaccord est révélateur : il y a une frontière dans la fenêtre. Restez à un pixel, zoomez, et éloignez-vous de la jointure.
Une texture fine. Rater d'un pixel coûte tout aussi cher, mais cette fois les échantillons moyennés tombent tous au même endroit. Aucune frontière à franchir : élargissez l'échantillon.
Une zone uniforme. Rater d'un pixel ne coûte rien et toutes les tailles d'échantillon s'accordent. Prenez la plus étroite et passez à la suite.
Écart entre l'échantillon et la couleur réellement présente
200 prélèvements à des endroits aléatoires d'une zone bruitée dont la vraie moyenne est #10A99B. Plus la valeur est basse, plus on est proche.
1 px
6,45
3 × 3
2,07
5 × 5
1,16
11 × 11
0,57
Passer de 1 px à 11 × 11 fait tomber l'erreur de 6,45 à 0,57 : on passe d'une couleur manifestement fausse à une couleur que l'œil ne distingue plus de la bonne. Cela ne vaut que là où les pixels autour du curseur appartiennent au même sujet ; de part et d'autre d'un bord, la même moyenne joue contre vous.
Ce que fait le zoom
Une image plus petite que la zone d'affichage est agrandie pour la remplir, mais jamais au-delà de 800 % : un minuscule favicon ne remplit donc pas votre écran de quatre carrés colorés.
Vous pouvez monter jusqu'à 6 400 %. Au-delà de 200 %, le lissage est désactivé : vous voyez les vrais bords des pixels plutôt qu'un dégradé flou.
La molette zoome autour du pointeur : le pixel sous votre curseur reste sous votre curseur.
Le déplacement laisse toujours au moins un quart de l'image à l'écran : elle ne peut pas disparaître hors du cadre.
Mesuré dans un vrai navigateur
Pourquoi la couleur prélevée n'est pas celle que vous vouliez
Trois phénomènes abîment une couleur avant même que vous cliquiez. Aucun n'est le fait de la pipette, tous sont évitables, et tous les trois se mesurent : les graphiques ci-dessous montrent ce que coûte chacun d'eux.
Augmenter la qualité JPEG ne sauve pas les bords
Un dessin en aplats de couleurs de marque, enregistré à cinq niveaux de qualité puis relu. Les barres sont l'écart CIEDE2000 moyen par rapport à l'original, sur 51 362 pixels situés dans un aplat et 5 019 posés sur une frontière.
Dans un aplat
Sur un bord
q95
0,37
6,91
q85
0,6
7,28
q75
0,77
7,58
q60
0,98
8,2
q40
1,2
8,98
Même au réglage de qualité le plus élevé, un pixel sur un bord s'écarte déjà de 6,91, alors qu'un pixel dans un aplat ne s'écarte que de 0,37, ce que personne ne voit. Descendre à q40 modifie ces deux valeurs bien moins que s'éloigner du bord. L'endroit où vous cliquez compte davantage que le réglage de qualité.
Jusqu'où une frontière contamine la zone voisine
Deux aplats se rencontrant sur un bord franc, enregistrés en q90 puis relus pixel par pixel en s'éloignant de la jointure.
19,04
4,95
0,76
1,53
0,76
0,36
1,41
0,3
0,3
1,1
visible au premier coup d'œil · 2,3
12345678910
distance à la frontière (px)
Le premier pixel après la jointure est à 19,04 de la couleur qu'il devrait avoir : il ressort en #648187, une couleur qui n'existe dans aucune des deux moitiés de l'image. À partir de 3 pixels, l'erreur passe sous le seuil où l'écart se voit au premier coup d'œil. Le même fichier enregistré en q60 a donné le même résultat : un réglage de qualité plus élevé n'y change rien.
Dans un fichier sans perte aussi, chaque bord est inventé
Un cercle dessiné sur un fond, sans la moindre compression.
#24409A
La forme
ce que vous vouliez prélever
#7A736A
Son bord
à 34,96 de la forme
#FBBF24
Le fond
l'autre couleur réelle
Pour qu'une courbe paraisse lisse, le moteur de rendu mélange la forme avec l'arrière-plan sur tout son contour. Ce seul cercle compte 77 couleurs distinctes sur son pourtour, et aucune ne figure dans le dessin. Cliquez au milieu visuel d'un bord et vous obtenez #7A736A : une couleur que personne n'a choisie, à 34,96 de celle que vous visiez. Aucun format de fichier ne l'empêche : la solution est de zoomer jusqu'à voir la grille de pixels, puis de cliquer à l'intérieur de la forme.
Que faire
Demandez le fichier sans perte. Quand une couleur doit être exacte, un PNG ou un SVG n'a aucun artefact de compression à échantillonner par erreur.
Cliquez au cœur des formes. Pas au bord du logo, pas sur le contour de la lettre, pas sur la bordure du bouton. Quelques pixels vers l'intérieur font la différence entre la vraie couleur et une couleur inventée.
Zoomez avant de cliquer. Au-delà de deux fois, la grille de pixels est visible et vous cessez de deviner où passe une frontière.
Adaptez l'échantillon à la surface. Un pixel sur les aplats et près des bords, plus large sur le bruit et la texture.
Comment ces chiffres ont été produits
Chaque valeur de cette page provient de scripts/measure-color-drift.mjs, qui tourne sous Chromium 151.0.7922.34. Il a été exécuté pour la dernière fois le 25 août 2026. L'encodage et le décodage JPEG sont ceux du navigateur lui-même : les résultats montrent donc ce que fait un vrai navigateur. Chaque écart est une valeur CIEDE2000 calculée par la même fonction que l'outil. Le script dessine ses propres images de test ; les grilles de pixels viennent de la photo d'exemple fournie.
Clavier et gestes
Les flèches sont le moyen le plus fiable d'atteindre un pixel précis. Cliquez une fois sur l'image pour lui donner le focus : les touches ci-dessous fonctionnent alors.
Sur l'image
Flèches
Déplacer le curseur d'un pixel
MajFlèches
Se déplacer de dix pixels
Entrée
Épingler la couleur sous le curseur
Espace
Maintenir, puis glisser pour déplacer
+
Zoom avant
-
Zoom arrière
0
Afficher l'image entière
Rien de tout cela ne fonctionne tant qu'aucune image n'est chargée, et c'est voulu : un canvas vide n'a aucun pixel à parcourir.
Pointeur et tactile
Clic
Prélever une couleur et l'épingler
Molette
Zoomer autour du pointeur
Clic molette + glisser
Déplacer sans maintenir Espace
Un doigt
Glisser pour déplacer, toucher pour prélever
Deux doigts
Pincer pour zoomer
Un clic qui glisse de plus de quatre pixels est traité comme un déplacement et ne prélève rien : une main un peu tremblante ne pose donc jamais un repère non voulu.
Un raccourci fonctionne partout sur la page plutôt que sur la seule image : Ctrl + V charge l'image présente dans votre presse-papiers, ou suit un lien d'image si c'est ce que vous avez copié. Il est désactivé pendant que vous tapez dans un champ de texte.
D'un pixel à une palette
Un code hexadécimal seul suffit rarement. Les quatre onglets à côté de l'image transforment chacun votre prélèvement en matière première exploitable.
Palette de l'image
Les couleurs dont la photo est réellement faite, avec la part de pixels que chacune occupe. L'image est réduite à 160 pixels sur son grand côté, découpée par median cut, puis affinée par k-moyennes pondérées en CIE LAB pour que les groupes correspondent à la façon dont on regroupe réellement les couleurs, et non à la façon dont un ordinateur trie des nombres.
Les zones entièrement transparentes sont exclues : un logo sur fond transparent vous donne donc les couleurs du logo, et non une grande part de vide.
Mes couleurs
Chaque clic laisse un repère numéroté sur l'image. Renommez-les, réordonnez-les, supprimez ceux dont vous ne voulez pas. L'ordre dans lequel vous les laissez est celui dans lequel ils sortent à l'export, et les noms deviennent les noms de variables.
Les repères appartiennent à l'image. En charger une autre les efface : exportez d'abord si vous voulez les garder.
Harmonies
Six combinaisons construites en faisant tourner la teinte de votre couleur. La rotation se fait en OKLCH plutôt qu'en HSL, ce qui compte plus qu'il n'y paraît : en HSL, les jaunes ressortent boueux et les bleus criards, parce que des pas égaux en HSL ne sont pas des pas égaux pour l'œil.
Choisissez une couleur presque grise et toutes les combinaisons se réduisent à la même nuance. Le panneau le dit au lieu de faire semblant.
Nuances
Les tons clairs vers le blanc, les tons foncés vers le noir et les tons grisés vers le gris, dix paliers chacun. La quatrième option est celle qu'il vous faut pour une interface : une échelle de 50 à 950 à des clartés perceptuelles fixes, la forme qu'attend un design system.
Le survol met à jour la pastille et les neuf notations en direct ; les harmonies et les échelles attendent un vrai clic, pour ne pas défiler sur un millier de valeurs pendant que vous bougez la souris. Pour aller plus loin avec une couleur (34 formats, contraste, daltonisme, tracé du gamut), collez-la dans le sélecteur de couleur.
Récupérer les couleurs
Tout ce que vous voyez, vous pouvez l'emporter. Choisissez quoi exporter et sous quelle forme.
Quoi exporter
Mes couleurs
Les repères que vous avez posés, dans votre ordre, avec vos noms.
Palette de l'image
Les couleurs dominantes trouvées par l'extracteur.
Harmonie actuelle
Toutes les couleurs des six harmonies.
Échelle actuelle
Celle que vous avez ouverte.
Sous quelle forme
Variables CSS
Propriétés personnalisées sur :root
Tailwind v4
Un bloc @theme, à déposer dans votre CSS
SCSS
Variables et map $palette
JSON
Toutes les notations de chaque couleur
HEX brut
Un code par ligne
Nuancier SVG
Un nuancier légendé
Copiez ou téléchargez. Pas d'export en image : le nuancier SVG est ce qui s'en rapproche le plus, et il reste modifiable.
Le lien, c'est la couleur
Chaque couleur que vous validez est inscrite dans l'adresse de la page. Ajoutez ce lien à vos favoris, envoyez-le ou collez-le dans un ticket : il s'ouvre sur cette couleur exacte. Rien d'autre de votre session ne l'accompagne.
Couleurs récentes
Les 24 dernières couleurs prélevées sont conservées sur votre appareil et y seront encore demain. Elles ne le quittent jamais, et un seul bouton les efface.
Quatre cas concrets, de A à Z
Quatre tâches courantes, avec le parcours complet à travers les deux outils.
Retrouver une couleur de marque sur un logo
1Utilisez le PNG ou le SVG si vous en avez un. Un JPEG de logo a presque toujours des bords abîmés.
2Zoomez jusqu'à voir la grille de pixels, puis placez-vous plusieurs pixels à l'intérieur de la forme, loin de tout contour.
3Gardez l'échantillon à 1 px. La couleur est déjà unie : une moyenne ne pourrait qu'y mêler autre chose.
4Prélevez à nouveau quelques pixels plus loin. Si les deux prélèvements donnent le même HEX, vous êtes sur un aplat et la valeur est fiable.
Bâtir une palette d'interface à partir d'une photo
1Chargez la photo et lisez l'onglet Palette de l'image. Ce sont les couleurs dont l'image est réellement faite, avec la part de pixels de chacune.
2Cliquez sur celle qui servira de base : elle devient la couleur en cours.
3Ouvrez Nuances et passez à l'échelle 50–950, ajustée en OKLCH pour que les paliers paraissent régulièrement espacés, et pas seulement numérotés régulièrement.
4Exportez l'échelle en Tailwind v4 et collez le bloc @theme dans votre feuille de style.
2Prélevez la couleur du texte, puis lisez les deux tuiles d'accessibilité : votre couleur sur blanc et sur noir, avec le rapport et le niveau WCAG pour chacune.
3Pour une paire qui n'est ni noire ni blanche, reportez le code hexadécimal dans le vérificateur de contraste et réglez les deux couleurs.
4Si la paire échoue, prenez la couleur conforme suggérée. Elle garde la teinte et le chroma et ne déplace que la clarté : elle ressemble donc toujours à votre couleur.
Vérifier qu'une couleur d'état reste lisible pour tous
1Prélevez la couleur que vous employez pour une erreur, un avertissement ou une réussite.
2Passez-la dans la simulation du daltonisme pour la voir comme la perçoivent les personnes atteintes des quatre formes les plus courantes.
3Regardez la barre de séparation pour le type qui vous préoccupe. En dessous de 10 environ, la couleur est trop proche de sa complémentaire pour porter seule un sens.
4Si elle est en dessous, gardez la couleur et ajoutez une icône, une forme ou un libellé, pour qu'elle ne soit jamais le seul signal.
Chaque message que l'outil peut afficher, ce qu'il signifie et ce qu'il faut faire ensuite.
Cette image est trop lourde.Essayez-en une de moins de 40 Mo.
La limite porte sur le poids du fichier, pas sur les dimensions. Une grande photo passe ; un export en calques de 60 Mo, non. Enregistrez une copie aplatie.
Ce fichier n'est pas une image.PNG, JPEG, WebP, AVIF, GIF, BMP et SVG fonctionnent tous.
En général un PDF, un fichier de design ou un ZIP. Exportez-en d'abord une image matricielle ou vectorielle.
Cette image n'a pas de taille fixe.Un fichier vectoriel a besoin d'une largeur et d'une hauteur pour être échantillonné.
Un SVG sans largeur ni hauteur sur son élément racine n'a pas de résolution naturelle à échantillonner. Ajoutez-les, ou ouvrez-le et exportez un PNG.
Cette image n'a pas pu être récupérée.Le site qui l'héberge interdit aux autres sites de lire ses images. Téléchargez-la et déposez plutôt le fichier ici.
C'est la règle du navigateur, et aucune page web ne peut la contourner. Téléchargez le fichier et déposez-le.
Seules les URL d'image en http et https sont prises en charge.
Vous avez collé quelque chose qui n'est pas une adresse web, ou une URL en data: ou file:. Utilisez le bouton Parcourir pour un fichier local.
Votre navigateur a bloqué l'accès au presse-papiers
Copier demande une autorisation, que certains navigateurs refusent en navigation privée ou quand la page n'a pas le focus. Cliquez sur la page et réessayez, ou sélectionnez la valeur et copiez-la à la main.
Questions fréquentes
Pourquoi Ctrl + V ne colle-t-il pas mon image ?
Le raccourci de collage est ignoré tant que le curseur se trouve dans un champ de texte : ainsi, coller un lien dans le champ URL ne tente pas aussi de charger le presse-papiers comme image. Cliquez d'abord sur une zone vide de la page, puis collez.
Le zoom modifie-t-il le code couleur obtenu ?
Non. Le zoom et le déplacement ne concernent que le canvas affiché. Chaque lecture se fait sur un second canvas, caché, conservé à la résolution native de l'image : le même pixel renvoie donc la même valeur à 100 % comme à 6 400 %. Zoomez uniquement pour voir sur quel pixel vous allez cliquer.
Quelle taille d'échantillon choisir ?
Commencez à 1 px. Élargissez seulement quand les pixels autour du curseur appartiennent au même sujet mais sont bruités : c'est là que la moyenne aide le plus. Sur une zone bruitée, un échantillon de 11 × 11 s'est écarté en moyenne de 0,57 de la vraie couleur, contre 6,45 pour 1 px. Près d'un bord, faites l'inverse et restez à 1 px : un échantillon plus large y fait la moyenne de part et d'autre de la frontière et renvoie une couleur qui n'appartient à aucun des deux côtés.
Pourquoi le code HEX prélevé ne correspond-il pas à la charte graphique ?
Presque toujours pour l'une de ces trois raisons. Vous avez cliqué à un ou deux pixels d'un bord, là où la compression a mélangé les deux couleurs : mesuré sur une frontière franche, le premier pixel s'écarte de 19,04, et il faut 3 pixels pour retrouver la bonne couleur. Ou vous avez cliqué sur un bord lissé, mélange de la forme et de ce qui se trouve derrière, qui n'existe dans aucun fichier de design. Ou l'image est la capture d'écran d'une capture d'écran. Zoomez, décalez-vous de quelques pixels vers l'intérieur de la forme, puis prélevez à nouveau.
Comment se déplacer d'un seul pixel ?
Cliquez une fois sur l'image pour lui donner le focus, puis utilisez les flèches. Chaque appui déplace le curseur d'un pixel, et Maj avec une flèche le déplace de dix. Appuyez sur Entrée pour épingler la couleur sous le curseur.
Pourquoi une image ne se charge-t-elle pas depuis son URL ?
Le site qui héberge cette image interdit aux autres sites d'en lire les pixels. C'est le navigateur qui applique cette règle, et aucune page web ne peut la contourner : l'outil affiche donc une erreur. Téléchargez l'image, puis déposez le fichier.
Mes couleurs sont-elles conservées si je recharge la page ?
Votre couleur en cours, oui, parce qu'elle vit dans la barre d'adresse et que vous pouvez mettre ce lien en favori ou le partager. Les couleurs récemment utilisées sont gardées sur votre propre appareil et survivent aussi. Les repères sur l'image, non : ils ne survivent pas à un rechargement, et charger une nouvelle image les efface aussi, donc exportez ou copiez ce que vous voulez garder avant de passer à la suite.
Comment prélever une couleur dans un PDF ?
Ouvrez le PDF, zoomez jusqu'à ce que la couleur occupe une bonne partie de l'écran, faites une capture d'écran et collez-la ici avec Ctrl + V (Cmd + V sur Mac). Cliquez ensuite sur le pixel. Une capture PNG garde les couleurs telles que votre écran les affiche, ce qu'il faut pour le travail web.
Comment prélever la couleur d'une image sur mon téléphone ?
Ouvrez cette page dans le navigateur de votre téléphone, touchez « Choisir une image » pour prendre une photo dans la galerie ou en prendre une nouvelle, puis écartez deux doigts pour zoomer et touchez le pixel voulu. Les codes s'affichent sous l'image, et chacun se copie d'une touche.
Vous savez tout
Ouvrez la pipette et essayez-la sur la photo d'exemple. Rien de ce que vous chargez ne quitte votre appareil, et aucune inscription n'est requise.
