Extracteur de palette de couleurs

Importez une image pour extraire ses couleurs dominantes. Obtenez les codes HEX de chaque nuance, copiez en un clic. Tout s'exécute dans votre navigateur.

Comment fonctionne Extracteur de palette

Extracteur de palette de couleurs analyse votre image et identifie les couleurs les plus dominantes visuellement en utilisant un algorithme de clustering k-moyennes exécuté sur les données de pixels dans un Canvas. Le résultat est un ensemble d'échantillons de couleurs avec leurs valeurs HEX que vous pouvez copier individuellement. Aucun octet d'image ne quitte votre navigateur ; l'échantillonnage de pixels s'exécute localement dans un Web Worker pour que le fil principal reste réactif.

L'extraction regroupe les centaines de milliers de couleurs de pixels individuels en un nombre plus petit de clusters représentatifs. Le nombre de couleurs de sortie est configurable pour extraire une palette serrée de cinq couleurs ou un ensemble plus large de douze. C'est utile pour extraire rapidement les couleurs d'une marque depuis un logo, identifier les tons dominants d'une photographie pour un tableau d'ambiance, ou vérifier quelles couleurs apparaissent dans une image téléchargée par un utilisateur.

Rédigé par Bastien Sulyan

Comment utiliser Extracteur de palette, étape par étape

Déposez votre image sur la zone de chargement ou cliquez pour parcourir.
Définissez le nombre de couleurs à extraire (généralement 5 à 12).
Cliquez sur Extraire. Le clustering de pixels s'exécute localement dans un Web Worker.
Visualisez les échantillons de couleurs résultants et leurs valeurs HEX.
Cliquez sur n'importe quel échantillon pour copier son code HEX dans le presse-papiers.

Cas d'utilisation courants

Un designer extrait la palette dominante d'une photographie de marque pour s'assurer que les nouveaux supports marketing correspondent à la charte chromatique existante.
Un développeur identifie les couleurs principales d'un avatar téléchargé par un utilisateur pour générer dynamiquement une couleur d'accentuation UI assortie.
Un artiste construit un tableau de référence d'ambiance en extrayant des palettes de plusieurs images de référence et en comparant les codes HEX extraits.
Un blogueur extrait les cinq tons dominants d'une photo d'en-tête pour choisir des couleurs de texte et de boutons complémentaires pour une mise en page d'article.

Questions fréquentes

Comment fonctionne l'algorithme d'extraction de couleurs ?

L'outil lit toutes les valeurs de pixels de l'image via Canvas.getImageData(), les sous-échantillonne pour la rapidité, puis exécute le clustering k-moyennes. Chaque centroïde de cluster devient l'une des couleurs de sortie. K-moyennes regroupe les pixels par proximité de couleur pour que les tons visuels dominants émergent comme couleurs de centroïde.

L'extraction des couleurs nécessite-t-elle de télécharger l'image ?

Non. L'échantillonnage de pixels se passe dans un Web Worker dans votre navigateur. L'image est lue depuis votre disque local, dessinée sur un OffscreenCanvas, et le tableau de pixels est traité en mémoire. Les données ne quittent pas votre appareil.

Pourquoi les couleurs extraites semblent-elles légèrement différentes de ce que je vois dans l'image ?

Les centroïdes k-moyennes représentent la moyenne mathématique d'un cluster de couleurs de pixels. Une couleur très courante mais légèrement variée (un ciel bleu avec de légères variations de dégradé) produira un centroïde qui est la teinte moyenne plutôt qu'une valeur de pixel exacte que vous pouvez désigner. Le résultat est une moyenne représentative, pas un échantillon d'un pixel spécifique.

Puis-je extraire des palettes de photos avec transparence ?

Les pixels entièrement transparents (alpha = 0) sont exclus du clustering pour éviter que la région transparente ne biaise les couleurs extraites vers le noir ou le blanc selon le remplissage de fond du Canvas. Les pixels semi-transparents sont inclus dans l'échantillon pondérés par leur valeur alpha.

Dans quel format sont les codes de couleur ?

L'outil produit des codes HEX (comme #3A7BD5). Si vous avez besoin de RGB, HSL ou d'autres formats, copiez la valeur HEX dans l'outil Convertisseur de couleur, qui accepte le HEX et convertit vers tous les modèles de couleur courants.

Outils liés

Tout reste local, explorez des outils complémentaires.

Tous les outils image