Extracteur de palette de couleurs

Qu’est-ce qu’un extracteur de palette d’image ?#

Chaque image véhicule un petit ensemble de couleurs qui font l’essentiel du travail — le bleu de marque d’un logo, les tons chauds et neutres d’une photo produit, la palette à deux tons d’une illustration. Un extracteur de palette isole automatiquement ces couleurs représentatives afin que vous puissiez les réutiliser : construire un thème d’interface assorti, choisir une couleur de bouton qui jure le moins possible, générer des variables CSS, ou simplement comprendre quelles nuances dominent réellement une image par opposition à celles que votre œil croit importantes.

Cette page exécute une quantification des couleurs par médiane, entièrement dans votre navigateur. Vous chargez une image, elle est réduite à une taille d’échantillon gérable, chaque pixel est lu, et l’algorithme divise à plusieurs reprises l’espace colorimétrique selon son canal le plus large jusqu’à obtenir les N échantillons demandés (2–16). Vous obtenez chaque couleur sous forme d’échantillon avec sa part dans l’image, plus la couleur moyenne brute, exportable en liste HEX, en fichier de variables CSS ou en JSON structuré.

Comment l’utiliser#

1. Faites glisser une image sur la zone de dépôt en pointillés (ou cliquez dessus pour choisir un fichier). PNG, JPEG et WebP fonctionnent ; les PNG transparents sont gérés correctement car les pixels transparents sont ignorés avant le comptage.
2. Faites glisser le curseur Nombre de couleurs (2–16) pour choisir combien de couleurs représentatives extraire. Six est un bon défaut pour une palette équilibrée ; deux ou trois isolent la paire dominante.
3. Lisez la liste d’échantillons à droite : chaque ligne affiche la couleur, ses valeurs HEX/RGB/HSL et le pourcentage de pixels échantillonnés tombant dans ce bac, triés du plus dominant au moins dominant. Cliquez sur n’importe quelle valeur pour la copier.
4. Consultez la carte Couleur moyenne dans la barre latérale pour la moyenne brute de tous les pixels — utile quand vous voulez un ton d’arrière-plan global plutôt qu’une palette classée.
5. Choisissez un Format de palette :
   • Liste HEX (.txt) — un #RRGGBB par ligne, le plus dominant en premier. À coller directement dans un outil de design.
   • Variables CSS (.css) — un bloc :root { --palette-1: …; …; --palette-avg: …; } à déposer dans une feuille de style.
   • JSON (.json) — échantillons structurés avec hex, rgb, count et share, plus la moyenne et les métadonnées d’échantillon.
6. Cliquez sur Télécharger la palette pour sauvegarder le fichier.

Caractéristiques principales#

• Quantification par médiane, écrite maison. La même famille d’algorithmes qu’utilisent les outils d’image professionnels, exécutée dans votre onglet : découpe le long du canal le plus large à la médiane, répète sur le bac actuellement le plus large jusqu’à atteindre le nombre demandé.
• Chiffres de part honnêtes. Chaque échantillon porte la fraction réelle de pixels échantillonnés qu’il représente, donc « dominant » signifie dominant en surface, pas au jugé.
• Moyenne séparée de la dominante. La moyenne brute des pixels est indiquée à côté de la palette classée — deux questions différentes répondues en un seul passage.
• Pixels transparents ignorés. Le canal alpha sous un petit seuil est exclu, donc un PNG transparent signale les couleurs réellement dessinées, pas un mélange boueux avec la transparence.
• Trois formes d’export. Liste HEX pour les outils de design, variables CSS pour une feuille de style, JSON pour les programmes — toutes générées à partir des exacts mêmes échantillons que vous voyez.
• 100 % local. L’image est décodée et échantillonnée par le navigateur. Il n’y a aucun téléversement.

Exemple commenté#

Déposez un logo de marque qui est un bleu corporate profond sur fond blanc avec un petit accent — disons que le bleu couvre environ 60 % du canevas. Avec le Nombre de couleurs réglé sur 4, une extraction type ressemble à :

#1D4ED8   58.4%   rgb(29, 78, 216)    hsl(224, 76%, 48%)
#FFFFFF   31.2%   rgb(255, 255, 255)  hsl(0, 0%, 100%)
#172554   7.1%    rgb(23, 37, 84)     hsl(224, 57%, 21%)
#93C5FD   3.3%    rgb(147, 197, 253)  hsl(217, 95%, 78%)

L’échantillon dominant est le bleu de marque à environ 58 %, avec le blanc en second. Remarquez les deux bleus supplémentaires — une nuance plus foncée et une teinte plus claire — que l’algorithme a trouvés parce qu’ils franchissent une frontière de médiane ; ce sont exactement les couleurs que vous réutiliseriez pour des états de survol et des ombres. Exportez en Variables CSS et vous obtenez un thème prêt à l’emploi :

:root {
  --palette-1: #1D4ED8;
  --palette-2: #FFFFFF;
  --palette-3: #172554;
  --palette-4: #93C5FD;
  --palette-avg: #5A7BCB;
}

--palette-avg est la moyenne brute de tous les pixels — un bleu moyen atténué qui fonctionne bien comme teinte d’arrière-plan de page tirant vers la marque.

FAQ#

Les pourcentages ne somment pas exactement à 100 %.#

Ils sont arrondis pour l’affichage (les valeurs sous-jacentes sont exactes à quatre décimales dans l’export JSON). Un petit résidu vient aussi des pixels transparents ignorés avant le comptage, donc le total ne reflète que les pixels opaques réellement échantillonnés.

J’obtiens moins d’échantillons que demandé.#

La découpe par médiane s’arrête tôt quand chaque bac de couleur restant est uniforme (portée nulle sur tous les canaux) — il n’y a véritablement plus rien à diviser. Demander 8 couleurs sur une image à 3 couleurs renvoie 3, pas 8 inventées.

Pourquoi la couleur moyenne est-elle si différente de la dominante ?#

Elles répondent à des questions différentes. La couleur dominante est le bac le plus fréquent ; la moyenne est la moyenne arithmétique de tous les pixels, que quelques grandes régions de couleurs différentes peuvent éloigner de la valeur la plus fréquente. Une image mi-rouge mi-verte a une moyenne brunâtre mais aucun brun dominant — les deux nombres sont justes.

Fonctionne-t-il sur des photos, ou seulement sur des graphiques plats ?#

Les deux. Les graphiques plats donnent des échantillons propres et bien séparés ; les photos donnent un ensemble plus gradué car les tons réels couvrent de nombreuses couleurs voisines. Pour une photo, montez le Nombre de couleurs à 8–12 pour capturer la gamme plus riche.