Extracteur de palette depuis une image, gratuit

Comment fonctionne réellement l'extraction de couleurs

Les palettes extraites d'images par ordinateur proviennent de l'un de deux algorithmes classiques :

• Partitionnement K-means (Lloyd 1982 ; l'idée sous-jacente remonte à MacQueen 1967 et Forgy 1965). Choisissez K centroïdes de couleur aléatoires dans le cube des couleurs, assignez chaque pixel à son centroïde le plus proche, recalculez les centroïdes comme la moyenne de leurs pixels assignés, et répétez jusqu'à ce que les centroïdes cessent de bouger. Les K centroïdes finaux sont vos couleurs dominantes.
• Quantification par coupe médiane (Heckbert, SIGGRAPH 1982). Découpez récursivement le cube des couleurs le long de sa dimension la plus large, en divisant la population de pixels en deux moitiés égales à chaque fois. Après K coupes, vous avez K boîtes, et la couleur moyenne de chaque boîte est une entrée de palette. C'est l'algorithme utilisé par la populaire bibliothèque JavaScript Color Thief, et historiquement la façon dont les images en couleurs indexées (palettes GIF, PNG) passent de millions de couleurs à 256.

Les deux méthodes produisent un petit ensemble de couleurs représentatives à partir d'une population de pixels bien plus grande, mais elles font des compromis différents. K-means est plus flexible mais sensible à la graine aléatoire et aux valeurs aberrantes. La coupe médiane est déterministe et équilibre la couverture de l'espace colorimétrique, mais peut surreprésenter des régions étroites où l'image se trouve concentrer beaucoup de pixels.

Pourquoi la distance RGB ment

Une réserve subtile mais importante : le partitionnement dans l'espace RGB brut donne des résultats qui ne correspondent pas toujours à la perception humaine. RGB est un système de coordonnées dicté par le matériel : les distances qu'il définit correspondent à des différences électroniques entre primaires, pas à des différences perçues entre couleurs. Deux verts qui vous paraissent identiques peuvent avoir une distance RGB bien plus grande qu'un vert et un rouge qui paraissent manifestement différents.

Un partitionnement plus précis se produit en CIELAB (CIE 1976 L*a*b*), un espace colorimétrique conçu spécifiquement pour que la distance euclidienne dans l'espace approche la différence perçue par l'humain entre deux couleurs. Les outils de palette modernes comme Adobe Color et de nombreux générateurs d'échantillons de systèmes de design partitionnent en CIELAB ou CIELCH. Le CSS Color Module Level 4 (W3C, 2022) a ajouté les fonctions lab(), lch(), oklab() et oklch() pour exposer ces espaces directement aux concepteurs web, utile quand vous voulez une interpolation de palette perceptuellement uniforme. La spécification CSS se trouve à w3.org/TR/css-color-4.

HEX, RGB, HSL : choisir le bon format

Les trois notations décrivent la même couleur ; ce sont différentes façons de l'écrire.

• HEX : #RRGGBB. Six chiffres hexadécimaux, deux par canal, plage 00-FF (0-255). Le format le plus courant du web. Compact, copiable-collable, pris en charge partout.
• RGB : rgb(255, 128, 0). Mêmes nombres, notation différente. CSS ajoute rgba(255, 128, 0, 0.5) pour l'alpha.
• HSL : hsl(30, 100%, 50%). Teinte (0-360°), saturation (0-100 %), luminosité (0-100 %). Plus facile à appréhender pour les concepteurs : « même teinte, plus de saturation » est un ajustement d'un seul nombre en HSL, mais un ajustement multicanal en RGB.
• OKLCH : oklch(70% 0.15 30). Alternative moderne et perceptuellement uniforme à HSL. Le même nombre de luminosité signifie la même luminosité perçue pour toutes les teintes, ce que HSL se trompe notoirement à faire (le jaune à 50 % de luminosité paraît bien plus lumineux que le bleu à 50 % de luminosité).

Pour la plupart des travaux web, copiez le HEX. Pour la manipulation programmatique de palette (éclaircir de 10 %, décaler la teinte de 30°), optez pour HSL ou OKLCH où l'opération est plus propre.

Pourquoi dominant ≠ utile

Une extraction naïve des « couleurs les plus fréquentes » déçoit souvent. Un portrait d'une personne sur un ciel bleu est statistiquement dominé par les pixels de ciel et les teints, même si l'histoire de couleur visuellement intéressante se trouve peut-être dans les vêtements du sujet. Les photos à grands arrière-plans neutres obtiennent le neutre comme couleur « dominante ». Une forte compression JPEG introduit des couleurs d'artefact qui se regroupent comme si elles étaient réelles.

Les outils de palette sophistiqués pondèrent selon la saturation, le contraste avec l'arrière-plan dominant, l'« intérêt » perçu, ou selon qu'une couleur apparaît dans des régions saillantes détectées par les modèles de saillance Itti-Koch inspirés de la vision humaine. La plupart des outils en ligne, y compris celui-ci, utilisent un simple partitionnement basé sur la fréquence : rapide, prévisible et largement suffisant pour le cas courant de l'extraction d'une palette à partir d'une photo, d'une illustration ou d'une œuvre.

Cas d'usage courants

• Harmonisation de marque : un concepteur extrait une palette du logo ou de la photo héroïque d'un client pour garder le reste du site visuellement cohérent.
• Planches d'ambiance : extraire des palettes d'images d'inspiration (photogrammes de films, photographies, peintures) est le moyen le plus rapide de démarrer une exploration de couleurs.
• Configurations Tailwind / jetons de design : transformer une palette extraite en propriétés personnalisées CSS ou en table colors de Tailwind.
• Harmonisation des couleurs de présentation : choisir les couleurs d'accent dans le logo de l'entreprise pour que la présentation ne jure pas.
• Photographie de produits e-commerce : utiliser la couleur dominante de chaque produit comme échantillon dans une fiche produit.
• Art génératif et visualisation de données : alimenter du code de shader, des graphiques D3 ou des esquisses Processing avec des palettes extraites.
• Conception pour l'impression : obtenir un ensemble de couleurs de départ à partir d'images d'inspiration, puis les faire correspondre à du Pantone ou du CMJN dans un logiciel de conception d'impression.

Pourquoi le tout-navigateur compte ici

Les photos transportent souvent bien plus que l'image elle-même. Les métadonnées EXIF peuvent inclure les coordonnées GPS de la prise de vue, le numéro de série de l'appareil, le nom du photographe et des empreintes logicielles. Les captures d'écran peuvent contenir une interface confidentielle, du texte en brouillon ou une image de marque avant lancement. Les photos personnelles peuvent contenir des visages de personnes qui n'ont pas consenti à être téléversées quelque part. Extraire une palette n'a en réalité besoin de rien de tout cela (il lui faut juste les données de pixels), et il n'y a aucune bonne raison d'envoyer l'image entière à un serveur quand le navigateur peut l'analyser localement.

Cet outil dessine l'image sur un Canvas hors écran, échantillonne les données de pixels via getImageData(), exécute le partitionnement et affiche le résultat. Rien ne quitte la page ; l'image n'est pas conservée après la fermeture de l'onglet. Les outils de palette côté serveur (Adobe Color, le sélecteur d'image de Coolors, et bien d'autres) téléversent le fichier entier. La confidentialité est le compromis que vous faites avec chacun.

Travailler avec le résultat

Une fois que vous avez une palette extraite, vous allez généralement :

1. Faites le tri. Une extraction automatique de 5 couleurs comporte généralement 3 couleurs utiles, 1 quasi-doublon redondant et 1 demi-teinte boueuse. Supprimez la boueuse et dédupliquez.
2. Attribuez des rôles. Désignez une couleur comme couleur de marque primaire, une comme secondaire, une ou deux comme couleurs d'accent, et une comme neutre. Les systèmes de marque modernes veulent souvent un arrière-plan neutre, deux ancres et un accent : cinq au maximum.
3. Générez des échelles claires/sombres. À partir de chaque couleur d'ancrage, dérivez 9-11 nuances pour les états de survol, les arrière-plans et les variantes teintées. Des outils comme le générateur d'échelle de couleurs de Tailwind ou la section palette de Refactoring UI ont des recettes bien connues.
4. Testez le contraste. Passez les paires texte-et-arrière-plan dans un vérificateur de contraste WCAG : le niveau AA exige 4,5:1 pour le texte courant normal, 3:1 pour les composants d'interface grands ou gras.
5. Testez la déficience de vision des couleurs. Environ 1 homme sur 12 présente une forme de daltonisme. Passez la palette dans un simulateur de DVC avant de la verrouiller.

Erreurs courantes

1. Utiliser les cinq couleurs extraites sans retouche comme palette de marque. L'extraction automatique est un point de départ, pas une palette finie. Faites le tri.
2. Choisir des couleurs dans un JPEG fortement compressé. Les artefacts de compression produisent de fausses entrées de palette. Partez d'une source de haute qualité si vous le pouvez.
3. Se fier à la première exécution sur une photo complexe. Différentes valeurs de K (nombre de couleurs) produisent des résultats radicalement différents : essayez 5, 8 et 12 pour voir quelle taille convient le mieux à votre image.
4. Construire une palette à partir d'une photo sans tenir compte de la page où elle vivra. Une palette feutrée, dérivée d'une photo, peut être superbe isolément mais disparaître sur un arrière-plan de site blanc. Testez en contexte.
5. Ignorer le contraste. De belles palettes associent parfois du texte à un arrière-plan avec un contraste de 2:1 et échouent aux WCAG. Vérifiez toujours.
6. Oublier que « dominante » peut signifier « arrière-plan ». La couleur la plus fréquente dans un portrait est souvent le mur derrière le sujet, pas les vêtements du sujet.

Autres questions fréquentes

Fonctionnera-t-il avec des PNG transparents ?

Oui. Les pixels transparents sont généralement ignorés lors de l'échantillonnage, de sorte que la palette ne reflète que le contenu visible. Si vous téléversez un PNG avec un arrière-plan transparent et un logo coloré, la palette extraite sera celle des couleurs du logo, pas un neutre pollué.

Et les GIF animés ?

Le décodeur d'image du navigateur donne généralement la première image au Canvas API, donc la palette est extraite de l'image zéro. Pour une palette couvrant toutes les images, il faudrait extraire chaque image séparément et combiner les résultats : cela dépasse ce que fait un outil d'image statique.

L'image originale est-elle téléversée quelque part ?

Non. L'image est chargée dans un élément Canvas de votre navigateur, les données de pixels sont lues via getImageData(), et le partitionnement s'exécute en JavaScript sur votre appareil. Les octets de l'image ne sont jamais transmis à aucun serveur. C'est important quand la source contient des données GPS EXIF, des visages, des captures d'interfaces confidentielles ou des images de produits non publiés.

Pourquoi ma palette change-t-elle d'une exécution à l'autre ?

K-means dépend de son placement initial aléatoire des centroïdes, de sorte que deux exécutions sur la même image peuvent aboutir à des minima locaux légèrement différents. Les différences sont généralement subtiles (un quasi-doublon remplacé par une nuance similaire) mais visibles. La coupe médiane est déterministe : même entrée, même sortie à chaque fois. Si l'outil donne un jour des palettes nettement différentes pour la même image, c'est qu'il utilise un algorithme aléatoire, et c'est le comportement attendu.

Puis-je utiliser les couleurs extraites à des fins commerciales ?

Les couleurs elles-mêmes ne sont pas protégeables par le droit d'auteur ; les valeurs HEX sont des faits sur les pixels. Mais l'image dont vous avez extrait pourrait l'être : extraire une palette de la photographie de quelqu'un d'autre est acceptable pour s'inspirer, mais reproduire la photo ou ses éléments déposés est une autre question. Reproduisez les couleurs, pas les images.

En quoi cela diffère-t-il d'un outil de sélecteur de couleur ?

Un sélecteur de couleur lit la couleur à un emplacement de pixel précis que vous désignez. Cet outil analyse l'image entière et renvoie la palette la plus représentative. Des tâches différentes : les sélecteurs servent à « quelle est cette couleur exacte ? », les extracteurs de palette servent à « quelles sont les couleurs dominantes globalement ? ». Les deux ont leur place dans le flux de travail d'un concepteur.