Extracteur de palette

Quand une photo de référence, le logo d'un client ou une planche d'inspiration arrive et qu'il faut ses couleurs en valeurs HEX exactes, les prélever une à une à la pipette est lent et subjectif. Cet extracteur de palette analyse l'image entière et renvoie ses couleurs dominantes, chacune avec son code HEX, son triplet RGB et la part de l'image qu'elle représente, de la plus présente à la moins présente. Un premier réflexe utile pour les designers qui reprennent une charte, les développeurs qui construisent un thème à partir d'une maquette, et quiconque veut savoir de quelles couleurs se compose réellement une image.

Comment la palette est calculée

L'outil utilise la coupe médiane (median cut), une méthode classique de quantification des couleurs. Il prélève un échantillon de pixels, les place dans un seul groupe, puis coupe à la médiane le groupe dont l'étendue de couleur est la plus large, selon son canal dominant (rouge, vert ou bleu), jusqu'à atteindre le nombre de groupes demandé. La couleur de chaque groupe est la moyenne de ses pixels, et son pourcentage correspond à la part des pixels échantillonnés qui y sont tombés.

Deux conséquences à connaître. D'abord, une couleur de la palette est une moyenne : elle peut ne correspondre exactement à aucun pixel ; sur une photo, elle représente une zone, pas un point. Ensuite, les pourcentages mesurent une surface, pas une importance visuelle : un petit logo rouge sur une grande page blanche donnera du blanc en tête et du rouge en fin de liste, voire pas du tout avec peu de couleurs.

Extraire les couleurs d'une image pas à pas

1. Déposez une image PNG, JPG, WebP, BMP, TIFF ou AVIF, ou plusieurs images pour un traitement par lot.
2. Choisissez le nombre de couleurs : 4, 6 (par défaut), 8 ou 12.
3. Ajustez si besoin Max samples et Ignore alpha below (voir plus bas).
4. Cliquez sur Extract Palette. Pour une image, vous obtenez une grille de nuanciers avec HEX, RGB et pourcentage, ainsi que la palette complète en JSON formaté, à sélectionner et copier.
5. Pour plusieurs images, vous obtenez à la place un tableau récapitulatif, exportable en CSV ou en JSON.

Les options en détail

• Nombre de couleurs : 4 donne une palette compacte façon charte, 6 est un bon équilibre pour la plupart des images, 8 et 12 font ressortir les teintes secondaires et les accents. Si l'image contient moins de couleurs distinctes que demandé (un logo en deux aplats, par exemple), vous obtenez moins de nuanciers plutôt que des doublons.
• Max samples : nombre maximal de pixels analysés, de 100 à 1 000 000, 50 000 par défaut. Sur une grande image, l'outil lit un pixel sur N, réparti sur toute l'image. La valeur par défaut suffit pour les photos ; augmentez-la pour de très grandes images aux petites zones de couleur importantes, baissez-la pour traiter vite beaucoup de gros fichiers.
• Ignore alpha below : les pixels dont la transparence (alpha, de 0 à 255) est inférieure à ce seuil sont ignorés, 16 par défaut. Le fond transparent d'un logo PNG n'apparaît donc pas comme une pastille noire. Mettez 0 pour tout compter, ou montez la valeur pour ignorer aussi les bords semi-transparents.

Exploiter le résultat

Chaque couleur est renvoyée sous forme d'objet avec hex (en majuscules, comme #1E40AF), rgb en tableau de trois nombres et percentage arrondi à deux décimales. Ce JSON se transforme facilement en variables CSS, thème Tailwind, design tokens ou échelle de couleurs pour un graphique. Pour obtenir la notation HSL d'une valeur HEX, collez-la dans le convertisseur de couleurs.

• Reprise de charte : récupérer les couleurs exactes du logo ou du packaging d'un client avant de refaire son site.
• Thème à partir d'un visuel : construire un thème d'interface ou un modèle de présentation assorti à une photo principale.
• Planches d'inspiration : transformer des images d'ambiance en nuanciers concrets à partager avec l'équipe.
• Audit par lot : passer un dossier de photos produit ou de vignettes et comparer leurs couleurs dominantes dans un seul CSV, par exemple pour vérifier la cohérence d'une série.

Mode lot et exports

Avec plusieurs images, chaque fichier est traité avec les mêmes réglages et les résultats s'affichent dans un tableau : nom du fichier, statut, couleur dominante (le HEX du plus grand groupe) et nombre de couleurs trouvées. Export CSV écrit ces colonnes plus un éventuel message d'erreur, pratique dans un tableur. Export JSON écrit les mêmes lignes en incluant la palette complète de chaque fichier, prête pour un script. Si une image ne peut pas être décodée, les autres sont tout de même traitées et l'échec est signalé sur sa ligne.

Conseils pour une palette plus juste

• Recadrez d'abord : si seule une partie de l'image compte (un logo sur une photo, un produit sur une table), recadrez avec l'outil de rognage et rotation pour que le décor ne domine pas la palette.
• Plus de couleurs pour les photos : les images naturelles ont des dégradés ; 8 ou 12 couleurs captent des accents que 4 couleurs moyennent.
• Moins de couleurs pour les logos et aplats : 4 couleurs renvoient en général proprement les vraies couleurs de la marque.

Par rapport à une pipette ou un logiciel de design

La pipette de Photoshop, Figma ou des outils de développement du navigateur donne la couleur exacte d'un pixel choisi, idéale quand on sait où cliquer. Cet extracteur répond à une autre question : quelles couleurs dominent l'image entière, et dans quelle proportion. Les deux se complètent.

Vos images restent privées

L'extraction s'exécute dans l'onglet du navigateur grâce à du code Rust compilé en WebAssembly. L'image est décodée et analysée localement, et aucune requête ne l'envoie à un serveur. C'est important pour des photos produit non publiées, des éléments de marque client sous confidentialité ou des photos personnelles : aucun sous-traitant au sens du RGPD n'intervient. Vous pouvez le vérifier dans l'onglet Réseau des outils de développement, ou couper la connexion après le chargement de la page.

Questions fréquentes

Comment obtenir les codes HEX des couleurs d'une image ?

Déposez l'image, choisissez le nombre de couleurs et cliquez sur Extract Palette. Chaque nuancier affiche son code HEX, et le bloc JSON liste toutes les valeurs à copier.

Pourquoi une couleur de la palette n'apparaît-elle nulle part dans mon image ?

Chaque couleur est la moyenne d'un groupe de pixels proches. Sur une photo avec des dégradés, cette moyenne peut être une teinte qu'aucun pixel n'a exactement.

Pourquoi ai-je moins de couleurs que demandé ?

L'image ne contient pas assez de couleurs distinctes pour être découpée davantage. Un logo bicolore ne peut pas produire douze nuanciers pertinents.

Le fond transparent de mon PNG est-il pris en compte ?

Non, par défaut les pixels dont l'alpha est inférieur à 16 sont ignorés. Réglez Ignore alpha below sur 0 pour les inclure.

Que signifie le pourcentage ?

La part des pixels analysés qui appartiennent à ce groupe de couleur. Le total de toutes les couleurs fait environ 100.

Mes images sont-elles envoyées sur un serveur ?

Non. Tout s'exécute localement dans le navigateur. Rien n'est envoyé ni stocké.