Sélecteur de couleurs et extracteur de palette - Choisir les couleurs à partir de l’image

Téléchargez n’importe quel JPG, PNG, WebP ou GIF et cliquez n’importe où sur l’image affichée — le pixel exact sous votre curseur est échantillonné et affiché en HEX, RGB et HSL avec une copie en un clic pour chaque format. Parfait pour assortir une couleur de marque, échantillonner un échantillon d’une photographie ou saisir des notes d’accent d’une maquette de design.

L’image est réduite à 320 pixels sur son côté le plus long, puis chaque pixel est réparti par ses 4 bits supérieurs par canal. Les buckets les plus peuplés sont moyennés en une couleur 8 bits complète, triés par fréquence, puis retournés sous forme de palette. Le résultat est typiquement de 5 à 24 couleurs dominantes qui résument visuellement l’image.

Oui. Les boutons Download produisent deux formats : un bloc de variables CSS prêt à être collé dans un sélecteur :root (--color-1, --color-2...), et un fichier JSON avec des composants hexadécimaux, RGB et le pourcentage de poids pour chaque couleur. Les deux formats s’intègrent parfaitement dans les jetons de design, les configurations Tailwind et les bibliothèques de palettes.

Non — le choix des couleurs et l’extraction de palette se font entièrement dans votre navigateur via l’API HTML Canvas. L’image reste sur votre appareil, ce qui rend l’outil sûr pour les photos de produits non publiées, les maquettes de brouillon et les éléments de marque sous NDA.

Pour l’identité de marque, 5 à 8 couleurs est le point fort — cela capture le thème dominant sans diluer les choix d’accents. Pour la visualisation des données, nous recommandons 10 à 16 couleurs pour avoir suffisamment de teintes catégoriques. Le curseur vous permet de choisir entre 5 et 24.

Les pixels avec un alpha inférieur à 128 sont ignorés, afin que les arrière-plans transparents ne polluent pas la palette avec des couleurs d'« arrière-plan ». Cela rend Image Color Picker particulièrement adapté pour les découpes de produits, les illustrations d’autocollants et les sujets isolés.

HEX (#RRGGBB) est le plus compact et c’est ce que CSS, Figma et Sketch utilisent par défaut. Le RVB affiche les trois valeurs composantes de 0 à 255 — utile pour travailler avec des données image de façon programmatique. HSL (teinte, saturation, luminosité) est intuitif pour ajuster les couleurs : changer la teinte pour changer la famille de couleurs, ajuster la luminosité pour les teintes et les nuances.

Oui. Gratuit, aucun compte requis, aucune limite sur la taille de l’image ou le nombre de palettes extraites. Il n’y a rien à installer — l’ensemble de l’outil est une seule page web.