Extracteur de palette de couleurs

Ce que fait cet outil

Les designers volent des palettes au monde tout le temps — un coucher de soleil, une affiche, une image de film, une capture d'écran d'une appli. Cet outil automatise ça. Déposez n'importe quelle image et récupérez ses couleurs dominantes sous forme de pastilles, chacune libellée avec ses valeurs HEX, RGB et HSL à copier d'un clic. Choisissez 4 pastilles pour une palette de marque resserrée, 6 pour une palette d'interface flexible, 8 pour un kit d'illustration, ou 12 pour capturer la nuance dans des photos. Au-delà de la copie individuelle, vous pouvez exporter la palette entière en trois formats : variables CSS prêtes à déposer dans :root, un extrait config Tailwind pour votre tailwind.config.js, ou JSON avec HEX/RGB/HSL pour tout autre outil. L'image ne quitte jamais votre navigateur. Nous la sous-échantillonnons sur un petit canvas, échantillonnons chaque pixel et regroupons les couleurs proches — tout localement. Vous pouvez donc extraire des palettes depuis des maquettes internes, des assets de marque sous NDA ou des photos personnelles sans risque pour la confidentialité. Pas d'envoi, pas de tracking, aucune copie temporaire stockée sur un serveur.

Comment l'utiliser

1. Déposez l'image — Tout format courant fonctionne — PNG, JPG, WebP, GIF. La qualité de la palette est meilleure avec des images aux zones de couleur claires ; les images très bruitées ou granuleuses peuvent produire des pastilles boueuses.
2. Choisissez le nombre — 4 pour une palette de style marque punchy. 6 est le sweet spot des interfaces. 8 à 12 capturent des nuances plus subtiles, utiles pour des références d'illustration.
3. Copiez les pastilles individuelles — Cliquez sur une pastille pour copier sa valeur HEX dans le presse-papiers. La pastille clignote « Copié ! » pour confirmer.
4. Exportez toute la palette — Utilisez les boutons en bas pour copier la palette en variables CSS, en objet colors Tailwind, ou en JSON. Collez directement dans votre projet.

Comment l'extraction fonctionne

Nous redimensionnons l'image sur un canvas 200×200 (en échantillonnant l'image entière, pas les coins) et lisons chaque pixel via getImageData. Le RGB de chaque pixel est arrondi vers le bas au multiple de 32 le plus proche, ce qui produit 512 buckets possibles (8×8×8). Les buckets sont comptés, triés par effectif, et nous parcourons la liste en choisissant les couleurs les plus fréquentes qui ne sont pas trop proches d'une déjà choisie (distance euclidienne ≥ 38 dans l'espace RGB) pour que la palette ait de la variété visuelle. La pastille affichée est le RGB moyen de tous les pixels du bucket, pas le représentant arrondi du bucket — cela donne des couleurs un peu plus précises. Les pixels totalement ou presque transparents sont exclus.

Choisir le bon nombre

4 couleurs fonctionne pour les logos et identités minimales — impose une hiérarchie stricte. 6 couleurs est ce sur quoi atterrissent la plupart des design systems : 1 à 2 couleurs de marque, 1 accent, des neutres. 8 couleurs donnent des accents secondaires et des neutres mi-tons. 12 couleurs est pour les références d'illustration et de photo où vous voulez capturer des gradations subtiles. Au-delà de 12, la palette devient bruitée et difficile à utiliser comme contrainte de design.

Questions fréquentes