Extracteur de Couleurs Dominantes

À propos de l'Extracteur de Couleurs Dominantes

L'Extracteur de Couleurs Dominantes analyse l'image envoyée et renvoie les couleurs les plus présentes sous forme d'une palette compacte, classée par la surface qu'occupe chacune. L'algorithme commence par échantillonner l'image à basse résolution pour rester rapide même sur des photos de plusieurs mégapixels, puis applique la quantification median-cut sur les pixels échantillonnés : tout le nuage de couleur est découpé récursivement selon son axe le plus large, donnant des boîtes au peuplement équilibré dont les moyennes deviennent les entrées de la palette. Chaque couleur retournée est rapportée avec son code HEX, son triplet RGB et le pourcentage de pixels échantillonnés qui s'y rapportent, ce qui permet de voir immédiatement laquelle domine réellement. La sortie est exportée en quatre formats pratiques pour le développement : listes HEX et RGB séparées par ligne, variables CSS prêtes à coller et un tableau JSON. Tout s'exécute localement dans le navigateur via l'API Canvas ; aucune image n'est envoyée à un serveur.

Que signifie réellement « couleur dominante » pour une image ?

La couleur dominante est celle qui occupe la plus grande surface visible une fois que les nuances légèrement différentes sont regroupées. Une photo de ciel bleu ne contient pas un seul bleu : il y a des centaines de bleus légèrement distincts. La quantification résout cela en fusionnant les nuances visuellement proches en une couleur représentative, et le groupe avec le plus de pixels est la dominante. Cela diffère de la couleur moyenne (moyenne par canal sur toute l'image, qui finit souvent en gris-beige terne) et de la couleur la plus saturée (excellente pour les accents, mais rarement représentative). Cet extracteur place la dominante en première position et trie le reste par couverture décroissante.

Pourquoi median-cut plutôt que k-means ?

Median cut est un algorithme déterministe à un seul passage, introduit par Paul Heckbert en 1982 pour convertir des images 24 bits en 8 bits indexés. Il construit la palette en divisant récursivement le cube RGB selon son axe le plus long à la médiane, si bien que chaque couleur de palette a à peu près le même nombre de pixels derrière elle. K-means peut produire des palettes un peu plus fidèles sur des photos à distribution bimodale forte, mais nécessite plusieurs itérations, des graines aléatoires et risque de rester coincé dans un minimum local. Median cut tourne en temps quasi linéaire, donne un résultat reproductible pour une même entrée et coïncide avec l'algorithme utilisé par les navigateurs pour encoder le GIF, si bien que les couleurs choisies survivent bien à un enregistrement quantifié. Pour la plupart des extractions d'UI et de thème, les deux algorithmes sont visuellement indiscernables.

Pourquoi la couleur dominante semble-t-elle délavée par rapport à ce que je vois ?

Deux effets se combinent. D'abord, median-cut moyenne les pixels dans chaque boîte de palette ; si votre tee-shirt rouge vif est entouré de rouges plus sombres dans les ombres, la moyenne dilue la teinte. Ensuite, le système visuel humain pondère démesurément les zones les plus saturées : un logo rouge vif sur fond beige donne l'impression d'être la couleur principale même s'il occupe moins de surface. Pour une palette plus vive, diminuez le nombre de couleurs demandées (l'algorithme dépense son budget sur les régions saturées), activez Ignorer presque blanc (supprime les fonds blancs qui diluent la moyenne) ou recadrez l'image autour du sujet saturé. Pour les couleurs de marque, recadrer sur le logo avant extraction est une astuce fiable.

Comment utiliser la palette en CSS ou Tailwind ?

L'outil produit déjà un bloc de variables CSS de la forme `--color-1: #RRGGBB;`. Collez-le dans votre sélecteur :root et utilisez chaque couleur avec `var(--color-1)`. Pour Tailwind, copiez la liste HEX et collez-la dans tailwind.config.js sous theme.extend.colors avec des noms descriptifs : `primary: '#1a73e8'`, `accent: '#fbbc04'`, etc. La sortie JSON est aussi pensée pour alimenter un script de build : chaque entrée comprend hex, rgb et count, ce qui permet de trier et filtrer programmatiquement. Si vous voulez une échelle clair-foncé bien espacée à partir d'une des couleurs extraites, passez le HEX par notre Générateur de Nuances pour obtenir une palette style Material 50-900.

Pourquoi l'extracteur ignore-t-il les pixels avec alpha en dessous de 128 ?

Les pixels à faible alpha sont presque transparents et contribueraient à peine au rendu sur n'importe quel fond. Les inclure laisserait de grandes régions transparentes des PNG (surtout logos et stickers) polluer la palette avec le fantôme du fond utilisé lors du calcul de l'alpha. Le seuil 128 (à moitié transparent ou plus opaque) est un choix prudent : il préserve les bords anti-aliasés des formes pleines (qui portent la vraie couleur du sujet) et exclut les halos très transparents. Si vous devez extraire des couleurs d'une petite région opaque sur fond transparent, l'algorithme fonctionne toujours : il suffit qu'il y ait quelques centaines de pixels opaques.

L'image est-elle envoyée à un serveur ?

Non. L'image est lue par un FileReader, dessinée sur un Canvas hors écran et analysée entièrement dans votre onglet de navigateur. Aucune requête réseau ne transporte de données d'image ; vous pouvez le vérifier en ouvrant l'onglet Network des DevTools. L'outil est donc sûr pour des designs confidentiels, des photos clients, des captures d'UI non publiée et autres images sensibles. Cela signifie aussi qu'il continue de fonctionner hors ligne une fois la page mise en cache. Seules les ressources de la page transitent par le réseau, jamais votre image.