Pourquoi la couleur change-t-elle quand je bouge le curseur ?

Le JPG compresse les pixels voisins par blocs, donc deux pixels identiques à l'œil peuvent porter des valeurs légèrement différentes. Les photos ont aussi une texture naturelle (peau, tissu, feuillage) - prélever un seul pixel n'équivaut pas à « la couleur moyenne de cette zone ». Cliquez et comparez plusieurs pixels proches si le résultat semble étrange.

Puis-je prélever depuis une capture d'écran ?

Oui - c'est là que cet outil excelle. Les captures ont en général des zones de couleur plate (aplats d'UI, couleurs de marque, fonds de logo), donc un seul clic donne de façon fiable le hex canonique. Les captures PNG sont sans perte ; les captures JPG peuvent avoir du bruit de compression sur les aplats.

Comment le HSL est-il calculé ?

Conversion sRGB vers HSL standard - la même que celle utilisée en interne par CSS. La teinte est en degrés (0-360), saturation et luminosité en pourcentages. La valeur hex est canonique ; le HSL sert aux designers qui raisonnent en « version plus sombre de ceci » ou « teinte opposée ».

Pipette couleur sur image

Déposez une image, cliquez sur n'importe quel pixel pour obtenir son hex, RGB et HSL - et construisez une palette en avançant.

Déposez une image ici ou cliquez pour en choisir une

PNG, JPG, WebP, AVIF, GIF, SVG, BMP

Déposez une image et survolez avec le curseur - l'aperçu montre en direct la couleur et le hex du pixel sous le pointeur. Cliquez pour enregistrer ce pixel comme échantillon (hex / RGB / HSL visibles). Jusqu'à 20 échantillons s'empilent ; copiez l'un d'eux, ou toute la palette en bloc de variables CSS. Rien n'est envoyé.

Comment l'utiliser

Déposez une image
Glissez-déposez ou cliquez sur la zone de dépôt pour choisir une capture, un logo ou une photo.
Survolez pour un aperçu en direct
La couleur et le hex du pixel sous le curseur s'affichent en temps réel.
Cliquez pour capturer
Chaque clic ajoute un échantillon à la palette (hex / RGB / HSL tous visibles).
Copiez la palette
Cliquez sur un échantillon pour copier son hex, ou copiez toute la palette en bloc de variables CSS.

Qu'est-ce que c'est ?

Une pipette à couleurs sur image lit la valeur RGB de n'importe quel pixel d'une image importée. Le Canvas du navigateur fournit les données de pixel brutes ; on les convertit dans les trois formats que les designers utilisent vraiment (hex pour le code, RGB pour les logiciels de dessin, HSL pour le raisonnement relatif). Couplée à l'enregistrement en échantillons, c'est un moyen rapide d'extraire la palette exacte d'une marque depuis une capture, une photo ou le site d'un concurrent.

Quand l'utiliser

Récupérer les valeurs hex exactes d'une marque depuis une capture de logo, prélever les couleurs dominantes d'une photo pour un moodboard, retrouver la couleur exacte d'un élément d'UI sur une vieille capture quand la source est perdue, ou trouver la couleur d'accent parfaite dans une photo de stock pour un hero de landing.

Erreurs courantes

Prélever sur un JPG et être surpris par le bruit - la compression par blocs du JPG fait qu'un pixel ne représente pas son voisinage visuel. Prélever sur une photo et prendre le résultat pour « la couleur de marque » - les photos varient naturellement ; la couleur de marque vit dans une source en aplat. Et oublier que deux pixels voisins au bord d'un logo peuvent différer fortement à cause de l'anti-aliasing.

FAQ

Pourquoi la couleur change-t-elle quand je bouge le curseur ?: Le JPG compresse les pixels voisins par blocs, donc deux pixels identiques à l'œil peuvent porter des valeurs légèrement différentes. Les photos ont aussi une texture naturelle (peau, tissu, feuillage) - prélever un seul pixel n'équivaut pas à « la couleur moyenne de cette zone ». Cliquez et comparez plusieurs pixels proches si le résultat semble étrange.
Puis-je prélever depuis une capture d'écran ?: Oui - c'est là que cet outil excelle. Les captures ont en général des zones de couleur plate (aplats d'UI, couleurs de marque, fonds de logo), donc un seul clic donne de façon fiable le hex canonique. Les captures PNG sont sans perte ; les captures JPG peuvent avoir du bruit de compression sur les aplats.
Comment le HSL est-il calculé ?: Conversion sRGB vers HSL standard - la même que celle utilisée en interne par CSS. La teinte est en degrés (0-360), saturation et luminosité en pourcentages. La valeur hex est canonique ; le HSL sert aux designers qui raisonnent en « version plus sombre de ceci » ou « teinte opposée ».