Palette de couleurs à partir d’une image

Qu’est-ce qu’un extracteur de palette ?

Il prend une image et vous rend une poignée de couleurs qui la représentent, sous forme de codes hexadécimaux à coller dans une feuille de style ou un fichier de maquette. On s’en sert pour bâtir une gamme autour d’une photographie, pour accorder des couleurs de marque à un visuel existant, ou simplement pour nommer les couleurs de quelque chose qu’on aime.

Celui-ci regroupe les couleurs au lieu de les compter, ce qui est un autre algorithme au résultat visiblement différent. Il vous laisse aussi basculer vers la méthode par comptage sur votre propre image et montre ce qui change, car cette comparaison est la raison d’être de la page.

Votre image est décodée par votre propre navigateur et ne quitte pas la machine. Aucun envoi, aucun serveur, aucun compte — ce qui compte davantage ici que sur la plupart des outils, puisque le fichier que vous confiez est le plus souvent une photographie.

Comment utiliser l’extracteur de palette

1. Choisissez ou déposez une image. Tout ce que votre navigateur sait afficher convient : JPEG, PNG, WebP, GIF. Elle est lue localement et réduite avant l’échantillonnage, si bien qu’une grande photo n’est pas plus lente qu’une petite.
2. Réglez le nombre d’échantillons. De deux à dix. Cinq est la réponse habituelle pour une palette de design ; au-delà de huit, les couleurs commencent à être réellement proches les unes des autres sur presque toute photographie.
3. Copiez les couleurs, et essayez l’autre méthode. Chaque échantillon se copie seul ou tous d’un coup. Le sélecteur de méthode mérite au moins une pression : le panneau du dessous indique la distance entre les deux échantillons les plus proches selon chaque approche, sur votre image et non dans l’abstrait.

Compter les couleurs est le mauvais algorithme

La façon évidente de trouver les couleurs dominantes d’une image est de les compter et de garder les plus fréquentes. C’est ce que fait presque tous les outils. Et cela pose un problème qui n’apparaît que sur de vraies photographies.

On ne peut pas compter les couleurs directement : une photographie ne contient presque aucun pixel exactement répété, le bruit du capteur et les dégradés y veillent. On quantifie donc d’abord — chaque pixel est arrondi dans un casier grossier, puis on compte les casiers. Or après cette étape, les casiers les plus peuplés sont tous voisins de la teinte qui remplit l’essentiel du cadre. Un paysage rend cinq verts. Un portrait rend cinq carnations. On obtient cinq échantillons d’une même zone au lieu de cinq zones.

Le regroupement pose une autre question. Au lieu de « quelles couleurs reviennent le plus », il demande « où sont les groupes », et place un échantillon dans chacun. Les couleurs qui font vraiment l’allure d’une image — l’orange d’un coucher de soleil occupant quatre pour cent du cadre, le seul objet rouge dans une rue grise — sont précisément celles que le comptage écarte et que le regroupement conserve.

Nous avons mesuré l’écart avant de construire la page, car s’il avait été faible, l’honnêteté aurait commandé de ne pas la publier. Sur vingt photographies ordinaires, en prenant la distance en Oklab entre les deux échantillons les plus semblables comme mesure de l’utilité d’une palette : la médiane du comptage est 0,0308 et celle du regroupement 0,1410, soit une amélioration médiane de 4,6 fois. Le regroupement l’emporte sur les vingt, de 1,4 à 7,2 fois.

Une correction à ce que nous attendions, car c’est le genre de phrase qui se répète dès que quelqu’un l’écrit. La prédiction était que le comptage produit des tons ternes quasi identiques. En général, pas tout à fait : en prenant 0,02 comme le seuil où deux couleurs cessent d’être distinguables, une seule palette sur vingt comportait deux échantillons aussi proches. Ce que le comptage produit réellement, ce sont des échantillons regroupés — quatre à cinq fois moins séparés qu’ils pourraient l’être, mais pas littéralement la même couleur. L’outil rapporte le chiffre réel plutôt que la formule mémorable.

Limites assumées

L’image est réduite et échantillonnée sur une grille avant tout regroupement. C’est délibéré : une photographie de vingt-quatre mégapixels n’a pas besoin que chaque pixel soit examiné pour en tirer cinq couleurs, et les regrouper tous mesurerait votre patience plutôt que l’image. Cela signifie qu’un détail très petit mais très saturé peut être manqué s’il ne survit ni à la réduction ni à la grille.

L’échantillonnage est déterministe : la même image donne toujours la même palette. Cela vaut plus qu’il n’y paraît, car un outil rendant des couleurs différentes à chaque passage serait inutilisable pour choisir quelque chose que l’on colle ensuite dans une feuille de style. En contrepartie, le résultat dépend de la grille, et une image au motif répétitif fortement aligné sur elle pourrait en principe être mal échantillonnée.

Chaque échantillon est ramené à une couleur réellement présente dans l’image plutôt que donné comme moyenne de son groupe. La moyenne d’un groupe est une couleur qui peut ne figurer nulle part sur la photo, et c’est une chose étrange à remettre à quelqu’un comme « une couleur de cette image ». En échange, l’échantillon est un vrai pixel, non le centre mathématique de son groupe.

Les pixels entièrement transparents sont ignorés. Les inclure tirerait chaque échantillon vers le fond du canevas, qui est une couleur de votre navigateur et non de votre image. Les pixels partiellement transparents comptent tels qu’ils sont dessinés, c’est-à-dire tels que vous les voyez.

Le regroupement ignore quel est le sujet. Il trouve des groupes de couleur, pas ce qui vous intéresse : une photographie au grand fond sans intérêt y consacrera des échantillons proportionnellement à sa taille. Pour les couleurs d’un objet, recadrez d’abord — l’outil de recadrage de ce site le fait sans rien envoyer non plus. Le moteur porte 31 assertions, dont une image de synthèse dont la bonne réponse à cinq couleurs est connue par construction.

Pourquoi est-ce gratuit ?

Décoder une image et regrouper quelques milliers de pixels, c’est un travail que votre machine fait en un instant, et c’est la seule machine impliquée. Rien n’est envoyé, donc il n’y a rien à payer ni rien à placer derrière un compte.

Si vous voulez une couleur plutôt qu’une palette, la pipette d’image de ce site vous laisse cliquer un point et la relever. Et pour travailler ensuite les couleurs, le convertisseur de couleurs et le générateur de dégradés acceptent directement les codes hexadécimaux venus d’ici.