Comment prélever une couleur exacte sur une image (pipette) ?
Pipette d'image en ligne : dépose une photo, survole n'importe quel pixel, vois la couleur exacte (HEX, RGB, OKLCH). Clique pour l'ajouter à une palette.
Conçu pour les designers : extraire des couleurs depuis des assets de marque, des captures de sites concurrents, des photos produit.
Tout tourne en local : l'image ne quitte jamais ton navigateur.
On renvoie aussi de l'OKLCH (espace colorimétrique perceptuellement uniforme), le standard CSS moderne depuis 2023, utilisé par Tailwind v4.
Comment l'utiliser
- Upload une photo : PNG, JPG, WebP, AVIF, HEIC.
- Survole l'image : le pixel sous le curseur s'affiche en dessous avec HEX / RGB et coordonnées.
- Clique n'importe où pour ajouter la couleur à la palette à droite. 12 couleurs max : les nouvelles poussent les anciennes dehors.
- Clique sur n'importe quelle valeur HEX / RGB / OKLCH dans la palette pour copier.
Quand c'est utile
Là où la pipette paie, scénarios typiques :
- Assets de marque : un client t'a envoyé un logo PNG, il te faut les couleurs exactes pour CSS.
- Recherche concurrents : capture depuis un site concurrent, tu veux leur bleu d'accent exact.
- Photos produit : extrait une couleur représentative depuis la photo de la robe pour composer le fond de la page produit.
- Design UI : capture exportée depuis Figma / Sketch, vérifie les couleurs finales après rendu.
- Workflow OKLCH : si tu bosses avec du CSS color moderne (Tailwind v4, design tokens OKLCH), l'outil renvoie des coordonnées OKLCH prêtes à coller.
Questions et réponses
Non. Tout tourne en local : image chargée via Canvas API, échantillonnage pixel via `getImageData`. DevTools → Network = pas de requêtes.