Vous voyez une couleur dans une capture d’ecran : un bleu sarcelle parfaitement sature dans une pub Stripe, un vert sauge apaisant sur une landing page SaaS, et vous voulez l’utiliser dans votre projet. Vous savez que la couleur est quelque part dans l’image, mais comment obtenir la valeur #xxxxxx ?

La reponse est l’extraction de palette de couleurs : un processus qui scanne tous les pixels d’une image et renvoie les couleurs dominantes. Les designers font ca a la main dans Photoshop depuis des annees, mais aujourd’hui il existe des alternatives plus rapides, gratuites et dans le navigateur qui fonctionnent en 30 secondes sans rien installer.

Ce guide compare 3 methodes gratuites, presente le flux de 30 secondes avec celle recommandee, et montre comment lire le resultat pour copier les couleurs directement dans votre CSS, fichier Figma ou design tokens.

Les 3 methodes gratuites en un coup d’oeil

MethodeVitessePrecisionConfidentialiteCout
Pipette Photoshop / GIMPLent (manuel, une couleur a la fois)Pixel-parfait100% localGratuit (GIMP) / 25$/mois (Photoshop)
Sites d’extraction en ligneRapideBonne⚠️ Image envoyee au serveurGratuit avec pubs, HD payant
Outil dans le navigateur (sans envoi)30 secondesBonne pour le design100% local, l’image ne sort jamaisGratuit

La troisieme option, un extracteur entierement dans le navigateur, est le point ideal pour 2026. Vous obtenez une vitesse proche de Photoshop pour des palettes de qualite design, votre image ne quitte jamais votre appareil, et il n’y a ni inscription, ni popup, ni limite de 5 megapixels.

Pourquoi les “couleurs dominantes” battent la “couleur moyenne”

Si vous prenez une photo de 1000×1000 et faites la moyenne de tous les pixels, vous obtenez presque toujours un marron-grisatre boueux qui n’apparait nulle part dans la vraie image. Un exemple reel :

  • Une photo d’un citron jaune sur une table blanche : RGB moyen = (178, 165, 105), un kaki desature qui n’existe pas dans la photo.
  • La couleur dominante de cette meme photo : #F4D03F, le jaune citron reel que vos yeux voient.

Les algorithmes qui rapportent “la couleur moyenne” sont techniquement corrects mais visuellement vides de sens. La vraie extraction de palette fonctionne en regroupant les pixels similaires en seaux et en rapportant quels seaux ont le plus de pixels. Une photo avec un citron, une feuille et un fond blanc produit 3 couleurs dominantes, pas 1 moyenne boueuse.

Methode 1 : Pipette Photoshop / GIMP (l’ancienne ecole)

C’est ce que faisaient les designers de 2000 a ~2018. Le flux :

  1. Ouvrez l’image dans Photoshop ou GIMP.
  2. Basculez sur l’outil Pipette (I dans Photoshop).
  3. Cliquez sur un seul pixel.
  4. Lisez la valeur HEX dans le selecteur de couleur.
  5. Repetez 5-6 fois pour les couleurs que vous voulez vraiment.

Le piege : cela vous donne la couleur au pixel exact ou vous avez clique, pas les couleurs dominantes de l’image. Si vous voulez une palette representative, il faut savoir quels pixels cliquer, generalement la plus grande zone plate de chaque couleur. Les designers devinent a l’oeil, mais ca demande de la pratique et le resultat varie selon la personne.

Quand continuer a utiliser cette methode : quand vous avez besoin d’un echantillonnage pixel-parfait d’une zone specifique, comme recuperer la couleur exacte d’un bouton dans une maquette UI, ou matcher un logo qui a des bords en anti-aliasing.

Methode 2 : Sites d’extraction de palette en ligne

Des sites comme Coolors.co, ColorThief et Adobe Color ont des fonctions “image vers palette”. La plupart fonctionnent de la meme maniere :

  1. Televersez votre image.
  2. Le site execute l’extraction cote serveur.
  3. Vous obtenez une palette avec valeurs HEX et un bouton “telecharger en ASE / GPL / CSS”.

Pour : outils etablis, incluent souvent les formats d’export que les designers veulent (Adobe Swatch Exchange, palettes Sketch, variables CSS).

Contre :

  • Confidentialite : votre image est televersee sur un serveur tiers. Pour des photos personnelles, c’est genant. Pour des captures de produits non publies ou du travail client, ca peut violer un NDA.
  • Limites : la plupart des offres gratuites plafonnent a 1-5 megapixels ou exigent une inscription pour la HD.
  • Pubs et popups : les offres gratuites poussent agressivement vers les abonnements payants.
  • Pas de controle sur l’algorithme : vous obtenez 5 ou 8 couleurs, pas “je veux exactement 6 couleurs avec une quantification en seaux de 32”.

Pour les projets personnels, ces sites marchent. Pour tout ce qui est sensible, ou tout ce que vous ferez plus de deux fois, la friction s’accumule.

Methode 3 : Outil dans le navigateur (le standard 2026)

Le flux le plus rapide, le plus prive et le plus repetable. Tout se passe cote client en JavaScript sur un <canvas>, donc :

  • Pas d’envoi d’image
  • Pas de traitement serveur
  • Pas de limite de taille de fichier au-dela de ce que votre navigateur peut afficher
  • Fonctionne hors ligne une fois charge

Voici le flux de 30 secondes avec le Selecteur de couleur et palette gratuit de Piick :

  1. Ouvrez la page piick.cc/tools/color-palette-extractor.
  2. Cliquez sur l’onglet Palette d’image.
  3. Glissez n’importe quelle image (JPG, PNG, WebP, GIF, jusqu’a 10 Mo) dans la zone de depot.
  4. Choisissez combien d’echantillons vous voulez (5, 6 ou 8).
  5. Cliquez sur Extraire la palette.
  6. Chaque echantillon affiche son code HEX et le pourcentage de l’image qu’il couvre.
  7. Cliquez sur un echantillon pour le developper : vous obtenez HEX, RGB, HSL et des boutons copier pour chaque format.

Temps total : 30 secondes pour une capture, 60 secondes pour une photo principale.

Comment l’algorithme fonctionne (version courte)

Quand vous cliquez sur Extraire, l’outil fait quatre choses :

  1. Reduit l’image en une miniature 200×200 (c’est pourquoi il reste rapide sur les gros fichiers).
  2. Regroupe en seaux chaque pixel en arrondissant chaque canal de couleur au multiple de 32 le plus proche, donc (255, 200, 150) et (248, 192, 144) tombent dans le meme seau.
  3. Compte combien de pixels tombent dans chacun des 512 seaux possibles.
  4. Renvoie les K meilleurs seaux par nombre de pixels, tries du plus dominant au moins dominant.

Cela s’appelle la quantification par seaux (ou quantification de couleur). Ce n’est pas aussi doux que k-means, mais :

  • C’est ~10x plus rapide (pas d’iteration, un seul passage sur les pixels)
  • C’est deterministe : la meme image donne toujours la meme palette
  • C’est facile a raisonner : les seaux sont visibles dans l’histogramme

Pour les palettes de qualite design (5-8 couleurs d’une marque, d’une photo, d’une capture UI), la quantification par seaux est largement suffisante. K-means est pour les applications scientifiques comme l’imagerie medicale.

Lire le resultat : que signifient les pourcentages

Quand l’outil dit “Couleur 1 : #3B82F6, proportion : 42%”, cela ne veut pas dire que 42% de l’image est exactement #3B82F6. Cela veut dire que 42% des pixels echantillonnes sont tombes dans le seau qui arrondit a #3B82F6. Les couleurs reelles dans cette zone de votre image peuvent aller de #3580F0 a #4290FA, toutes arrondies au meme echantillon.

C’est tres bien pour le travail de design. Si vous avez besoin de la valeur moyenne exacte d’une region, vous utiliseriez un autre outil.

Au-dela de l’extraction : le selecteur manuel

Meme outil, onglet Selecteur de couleur. Utile quand :

  • Vous partez d’une couleur (une couleur de marque de votre guide de style) et vous voulez la voir en HEX, RGB et HSL en meme temps
  • Vous voulez generer des harmonies : variations complementaires, analogues et triadiques d’une couleur de base, sans ouvrir Figma ni un livre de theorie des couleurs
  • Vous convertissez entre formats : quelqu’un vous a envoye rgb(59, 130, 246) et vous en avez besoin comme #3B82F6 pour le CSS

Cinq echantillons d’harmonies se mettent a jour en temps reel quand vous changez la couleur de base. Cliquez sur n’importe quelle harmonie pour la charger dans le selecteur.

Trois scenarios du monde reel

Scenario 1 : Copier la couleur de marque d’un concurrent

Une landing page SaaS a une couleur de bouton que vous voulez emprunter pour votre propre redesign. Prenez une capture de la page, ouvrez l’outil, deposez la capture. Extrayez 6 echantillons. La couleur du bouton sera l’un d’eux, generalement le plus sature. Cliquez pour developper, copiez le HEX, collez dans votre CSS.

Astuce : recadrez d’abord la capture sur juste le bouton, ainsi les autres elements d’UI ne polluent pas la palette.

Scenario 2 : Construire une palette a partir d’une photo pour un article de blog

Vous avez pris une photo de foret pour l’en-tete d’un blog et voulez utiliser ses couleurs comme palette d’accent de l’article. Extrayez 5 echantillons de la photo. Vous obtiendrez 2-3 verts, un marron, peut-etre un bleu ciel. Choisissez les 3 qui ont le meilleur contraste avec votre fond et utilisez-les comme couleurs d’accent.

Astuce : les pourcentages de proportion vous aident a decider quelles couleurs sont “fond” (proportion elevee) vs “accent” (proportion basse). Ne choisissez pas la couleur principale comme accent : elle se battra avec votre vrai fond.

Scenario 3 : Verifier le livrable d’un designer

Un designer freelance vous a envoye une illustration principale avec une palette de marque. Deposez l’illustration. Extrayez 6 echantillons. Comparez les valeurs HEX obtenues avec le guide de style de la marque. Si #FF6B35 devait etre l’orange primaire et que l’extraction vous donne #FF7039, vous avez une conversation a avoir : c’est une difference de 2 bits par canal, mais suffisante pour que les designers la remarquent.

Problemes courants (et que faire)

  • La palette a trop de couleurs similaires. Votre image est dominee par un ton (un coucher de soleil, un matin brumeux). Solution : n’extrayez que 5 echantillons, ou choisissez parmi les plus faibles proportions pour des accents contrastes.
  • La palette a des marrons boueux laids. Il y a beaucoup de bruit de compression dans l’image. Solution : utilisez une source de meilleure qualite (PNG au lieu de JPG, ou un JPG de plus haute resolution). La quantification par seaux ne peut pas distinguer le signal des artefacts de compression.
  • La couleur dominante est blanc ou noir. L’image a beaucoup de fond (capture d’ecran, logo sur blanc). Solution : recadrez plus serre avant d’extraire, ou utilisez le selecteur manuel pour definir le fond puis echantillonner le premier plan.
  • Vous voulez plus de 8 couleurs. La quantification par seaux sature autour de 8-10 echantillons utiles avant que les seaux voisins ne commencent a se battre. Pour des palettes de 20+ couleurs, il faut un vrai outil de design (Figma, Adobe Color).

Quand sauter l’extraction completement

Parfois la reponse n’est pas “extraire d’une image” mais “choisir dans une palette curatee” :

  • Couleurs de marque qui existent deja dans un guide de style : copiez directement le HEX
  • Material Design / Tailwind / Bootstrap : des palettes bien testees qui couvrent deja la majorite des cas
  • Palettes guidees par l’accessibilite : quand le contraste WCAG est la contrainte, il faut des outils bases sur des ratios, pas de l’extraction

La quantification par seaux sert pour “je vois une couleur, je veux son code”. Pour tout le reste, utilisez un autre outil.

Essayez maintenant

Ouvrez le Selecteur de couleur et palette, deposez n’importe quelle image, et vous aurez une palette de 6 couleurs avec codes HEX en 30 secondes. Pas d’envoi, pas d’inscription, pas de limite au-dela de la memoire de votre navigateur.

Une fois votre palette en main, collez-la dans un bloc de variables CSS. Une extraction de 6 couleurs sur une capture style Stripe pourrait vous donner quelque chose comme :

  • --color-1: #3b82f6; — bleu principal de marque
  • --color-2: #1e40af; — etat hover/actif
  • --color-3: #93c5fd; — accent clair
  • --color-4: #fbbf24; — avertissement / surbrillance
  • --color-5: #f59e0b; — accent secondaire
  • --color-6: #111827; — texte / surface sombre

Ensuite dans votre feuille de styles, referencez-les comme var(--color-1) au lieu du HEX brut. Publiez.