Sélecteur de couleur et extracteur de palette : prélevez des couleurs depuis une image

Importez n'importe quel JPG, PNG, WebP ou GIF et cliquez où vous voulez sur l'image affichée — le pixel exact sous votre curseur est échantillonné et affiché en HEX, RGB et HSL, avec copie en un clic pour chaque format. Parfait pour retrouver la couleur d'une marque, prélever une teinte sur une photographie ou récupérer des tons d'accent sur une maquette de design.

L'image est réduite à 320 pixels sur son côté le plus long, puis chaque pixel est regroupé selon ses 4 bits de poids fort par canal. Les groupes les plus peuplés sont ramenés en moyenne à une couleur complète sur 8 bits, triés par fréquence, et renvoyés sous forme de palette. Le résultat compte généralement de 5 à 24 couleurs dominantes qui résument visuellement l'image.

Oui. Les boutons de téléchargement produisent deux formats : un bloc de variables CSS prêt à coller dans un sélecteur :root (--color-1, --color-2…), et un fichier JSON contenant le code hexadécimal, les composantes RGB et le pourcentage de poids de chaque couleur. Les deux formats s'intègrent proprement aux design tokens, aux configurations Tailwind et aux bibliothèques de palettes.

Non — la sélection de couleurs et l'extraction de palette se déroulent entièrement dans votre navigateur grâce à l'API canvas HTML. L'image reste sur votre appareil, ce qui rend l'outil sûr pour des photos de produits non publiés, des maquettes provisoires et des ressources de marque sous accord de confidentialité.

Pour un travail d'identité de marque, 5 à 8 couleurs constituent le compromis idéal : cela capture le thème dominant sans diluer les choix de couleurs d'accentuation. Pour la visualisation de données, nous recommandons 10 à 16 couleurs afin de disposer d'assez de teintes catégorielles. Le curseur vous permet de choisir entre 5 et 24.

Les pixels dont la valeur alpha est inférieure à 128 sont ignorés, si bien que les fonds transparents ne polluent pas la palette avec des couleurs « d’arrière-plan ». La pipette à couleurs d’image est donc particulièrement efficace pour les détourages de produits, les visuels de stickers et les sujets isolés.

Le HEX (#RRGGBB) est le plus compact et c'est celui qu'utilisent par défaut CSS, Figma et Sketch. Le RGB affiche les trois valeurs de composantes de 0 à 255 — pratique pour manipuler des données d'image par programmation. Le HSL (teinte, saturation, luminosité) est intuitif pour ajuster les couleurs : décalez la teinte pour changer de famille de couleurs, ajustez la luminosité pour les nuances claires et foncées.

Oui. Gratuit, sans compte requis, sans limite de taille d'image ni de nombre de palettes extraites. Rien à installer : l'outil tient entièrement sur une seule page web.