Extracteur de Palette de Couleurs
Extrayez les couleurs dominantes de n'importe qu'elle image.
Déposez une image ici ou cliquez (fichier unique)
ou collez une image depuis le presse-papiers (Ctrl+V / ⌘V)
Distribution des Couleurs
Copied!
Cet outil vous a-t-il été utile ?
Souhaitez-vous nous en dire plus ?
0/500
Souhaitez-vous un suivi ?
Publicité
À propos de cet outil
L'Extracteur de Palette de Couleurs analyse toute image importée pour identifiér et extraire ses couleurs les plus visuellement significatives. Il utilise l'algorithme de quantification médian cut (Heckbert, 1982), une technique établie de la recherche en traitement d'image numérique qui a été largement adoptée dans les logiciels graphiques, les systèmes d'impression et les outils de développement web. Contrairement à l'échantillonnage simple de pixels, qui choisit des points arbitraires dans une image, l'algorithme médian cut examine chaque pixel des données d'image et partitionne récursivement l'ensemble de l'espace colorimétrique en régions distinctes. Cette approche garantit que la palette résultante représente fidèlement la distribution réelle des couleurs de l'image, capturant les tons dominants de fond ainsi que les couleurs d'accent plus petites qui donnent son caractère à une composition. L'outil produit des couleurs dans trois formats standard de l'industrie. Les codes HEX sont le standard web utilise en CSS et HTML pour styliser les pages web. Les valeurs RGB (Rouge, Vert, Bleu) sont le format utilise par la plupart des logiciels de design dont Photoshop, Figma et Sketch. Les valeurs HSL (Teinte, Saturation, Luminosité) fournissent un modèle de couleur intuitif particulièrement utile pour les ajustements systématiques de luminosité, saturation ou teinte. Les fonctionnalités supplémentaires incluent la génération d'harmonies de couleurs (schémas complémentaires, analogues, triadiques, complémentaires divises et tetradiques), la vérification de contraste WCAG pour la conformité en accessibilité et la simulation du daltonisme. Vous pouvez trier les couleurs extraites par dominance, luminosité, teinte ou saturation. Les options d'exportation comprennent les propriétés CSS personnalisées, la configuration Tailwind CSS, les données JSON pour l'utilisation programmatique et les images PNG d'échantillons. L'outil utilise l'API Canvas HTML (standard W3C) pour l'analyse au niveau des pixels, et tout le traitement se fait entièrement dans votre navigateur. Vos images ne sont jamais envoyées à un serveur.
Comment Utiliser
- Téléchargez une image en glissant-déposant ou en cliquant. Fonctionne avec photos, logos ou captures.
- Sélectionnez le nombre de couleurs (5-15) et votre format préféré (HEX, RGB ou HSL).
- Cliquez sur un échantillon pour copier sa valeur. Exportez en CSS, JSON ou échantillons PNG.
La Science de l'Extraction de Couleurs
L'extraction de couleurs d'images numériques trouve ses racines dans le domaine de la quantification de couleurs, une branche du traitement d'image numérique apparue au début des années 1980, quand les écrans d'ordinateur étaient limites à un petit nombre de couleurs simultanées. L'article de Paul Heckbert en 1982 a introduit l'algorithme médian cut comme méthode efficace pour réduire des millions de couleurs de pixels uniques à une palette représentative, et il reste l'une des approches les plus utilisées aujourd'hui. L'oeil humain peut distinguer environ 10 millions de couleurs, mais la plupart des images ne contiennent que quelques centaines a milliers de couleurs perceptuellement distinctes. Les algorithmes de quantification exploitent cela en regroupant les couleurs visuellement similaires. L'approche médian cut fonctionne dans l'espace colorimétrique RGB tridimensionnel, ou chaque pixel est traite comme un point dont les coordonnées correspondent a ses valeurs d'intensité rouge, verte et bleue. Les applications modernes de l'extraction de couleurs vont bien au-delà de l'optimisation d'affichage. En design web, les palettes extraites aident a créer des systèmes visuels cohérents reflétant le ton du contenu photographique. En visualisation de données, l'extraction identifié les choix de palette optimaux avec un contraste suffisant. Les designers de marque utilisent l'extraction pour obtenir des spécifications de couleurs numériques à partir de matériaux physiques. Les principes de théorie des couleurs comme les harmonies complémentaires, analogues et triadiques peuvent être appliques aux couleurs extraites. Ces harmonies reposent sur des relations mathématiques autour du cercle chromatique HSL : les couleurs complémentaires sont a 180 degrés, les analogues a moins de 30 degrés et les triadiques forment un triangle equilateral a intervalles de 120 degrés.
Méthodologie
Cet outil propose deux algorithmes d'extraction de couleurs. Le clustering k-means regroupe les pixels similaires en ajustant itérativement les centres de clusters jusqu'a convergence, produisant des palettes pondérées vers les couleurs visuellement dominantes. Médian cut (Heckbert, 1982) divise récursivement l'espace colorimétrique le long de sa dimension de canal la plus large au point médian, créant des palettes plus uniformément distribuées. Les deux algorithmes operent sur une copie réduite de votre image (maximum 200×200 pixels) pour un traitement efficace. Les pixels transparents sont exclus de l'analyse. Le filtrage d'ambiance de couleur pre-sélectionne les pixels par propriétés HSL avant le clustering, et le générateur de système de design applique une attribution de rôles basée sur la luminance à la palette finale.
Sources: Median Cut Algorithm · K-Means Clustering
Comprendre vos Résultats
La palette extraite représente les couleurs les plus visuellement significatives de votre image, ordonnées par dominance. La première couleur couvre la plus grande zone de pixels et correspond généralement au fond ou à la couleur du sujet principal. Les couleurs suivantes représentent des portions progressivement plus petites de l'image. Choisissez la taille de votre palette selon vos objectifs de design. Une palette de 3-5 couleurs convient le mieux aux identités de marque cohérentes, thèmes de sites web et design d'interface où la simplicité et la cohérence sont prioritaires. Une palette de 6-8 couleurs capture des tons intermédiaires, idéale pour les illustrations ou matériaux marketing. Une palette de 9-10 couleurs révèle des nuances subtiles et des variations de texture, parfaite pour l'analyse détaillée d'oeuvres ou les guides de style complets. Utilisez les options de tri pour différents flux de travail. Triez par dominance pour le poids visuel, par teinte pour l'analyse d'harmonie le long du cercle chromatique, par luminosité pour vérifier le contraste de valeur, et par saturation pour identifier les couleurs vives versus ternes. Le vérificateur de contraste WCAG aide à confirmer que votre palette respecte les normes d'accessibilité. Un ratio de contraste d'au moins 4,5:1 est requis pour le texte normal (niveau AA), tandis que 3:1 suffit pour le texte large. L'aperçu du daltonisme assure que votre palette reste distinguable pour les utilisateurs atteints de protanopie, deutéranopie ou tritanopie.
Exemples Pratiques
Exemple 1 - Identité de Marque: Importez le logo de votre entreprise pour extraire ses couleurs exactes, puis utilisez l'exportation CSS pour construire un thème de site cohérent avec ces couleurs de marque comme propriétés personnalisées. Exemple 2 - Moodboard Photographique: Extrayez 8-10 couleurs d'une photo de paysage pour capturer toute la gamme de tons naturels, des bleus du ciel aux verts du feuillage en passant par les tons terre et les hautes lumières. Exportez en échantillon PNG. Exemple 3 - Design UI depuis l'Inspiration: Trouvez une photographie qui capture l'ambiance souhaitée pour votre application. Extrayez 5 couleurs et utilisez le générateur d'harmonies pour créer des variations complémentaires et analogues pour les boutons, arrière-plans et textes. Exemple 4 - Audit d'Accessibilité: Extrayez la palette de couleurs de votre site web existant à partir d'une capture d'écran, puis utilisez le vérificateur de contraste WCAG pour identifiér les paires de couleurs ne répondant pas aux exigences d'accessibilité.
Conseils pour une Meilleure Extraction
1. Utilisez des images haute résolution si possible. Une résolution supérieure fournit plus de données de pixels pour l'algorithme, produisant des palettes plus précises et représentatives. Les images basse résolution ou fortement compressées peuvent introduire des artefacts JPEG. 2. Recadrez votre image avant l'importation si vous souhaitez vous concentrer sur une région spécifique. L'extraction d'une scène complété inclura des couleurs de fond qui pourraient ne pas être pertinentes. 3. Ajustez la taille de la palette selon votre objectif. Commencez avec 5 couleurs pour une palette nette. Augmentez a 8-10 si vous devez capturer des variations subtiles comme les ombres, tons moyens et hautes lumières. 4. Utilisez le tri HSL pour identifiér rapidement les relations entre les couleurs extraites. Des couleurs proches en teinte mais variant en saturation ou luminosité créent des combinaisons naturellement harmonieuses. 5. Vérifiéz toujours les ratios de contraste avec le vérificateur WCAG intégré avant d'utiliser des couleurs extraites pour le texte et les arrière-plans. Une belle palette n'est efficace que si elle reste lisible et accessible. 6. Exportez en propriétés CSS personnalisées pour les projets web afin de maintenir une source unique de vérité pour vos valeurs de couleur.
Sources
Tous les calculs sont effectués localement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.
Intégrer cet outil
Questions fréquentes
Comment fonctionne l'extraction ?
Des algorithmes de quantification analysent les pixels et regroupent les couleurs.
Quels formats de couleur ?
HEX pour web/CSS, RGB pour logiciels design, HSL pour théorie des couleurs.
Comment exporter la palette ?
En variables CSS, données JSON, ou image PNG.
Quels bons cas d'utilisation ?
Créer des palettes de marque, assortir couleurs UI, trouver couleurs complémentaires.
Mon image est-elle envoyée à un serveur pour le traitement ?
Non. Toute l'extraction de couleurs se fait entièrement dans votre navigateur avec l'API Canvas HTML5. Votre image est chargée dans un élément canvas local pour l'analyse des pixels et ne quitte jamais votre appareil. Aucune requête réseau n'est effectuée, garantissant une confidentialité totale.
Quels formats d'image puis-je télécharger ?
Vous pouvez télécharger tout format d'image pris en charge par votre navigateur, y compris JPEG, PNG, WebP, GIF, BMP et SVG. Pour l'extraction la plus précise, les photos haute résolution et les images aux couleurs variées fonctionnent le mieux. Les images très petites ou avec peu de couleurs distinctes peuvent produire des palettes moins variées.
Quelle est la différence entre k-means et médian cut ?
Le clustering k-means regroupe les pixels en affinant itérativement les centres de clusters pour minimiser la distance chromatique. Il tend à produire des palettes pondérées vers les couleurs les plus visuellement dominantes.
Médian cut divise l'espace colorimétrique le long de sa dimension la plus large au point médian, créant des groupes de taille égale. Il capture généralement une plus large gamme de couleurs, y compris les moins dominantes. Les deux algorithmes s'exécutent entièrement dans votre navigateur.
Que sont les modes d'ambiance de couleur ?
Les modes d'ambiance de couleur filtrent la palette extraite par sensation visuelle. Vibrant affiché des couleurs très saturées à luminosité moyenne. Atténué se concentre sur les tons désaturés. Sombre extrait des couleurs profondes à faible luminosité. Clair fait ressortir les teintes pâles à haute luminosité. Naturel affiché toutes les couleurs sans filtre. C'est utile lorsque vous souhaitez une atmosphère spécifique à partir de votre image.
Comment fonctionne le générateur de système de design ?
Le générateur de système de design attribue automatiquement des rôles sémantiques à vos couleurs extraites en fonction de l'analyse de luminance et de saturation. Il identifié les meilleurs candidats pour primaire (plus saturé), secondaire, accent, arrière-plan (plus clair), texte (contraste le plus élevé) et couleurs de bordure. Vous pouvez copier le résultat sous forme de propriétés CSS personnalisées prêtes à l'emploi.
Puis-je choisir des couleurs spécifiques dans l'image ?
Oui. Cliquez sur le bouton pipette pour activer le mode de sélection de couleur. Survolez l'image pour voir un aperçu agrandi de la zone sous votre curseur. Cliquez pour ajouter cette couleur exacte à votre palette. Vous pouvez aussi double-cliquer sur un échantillon pour modifier manuellement sa valeur de couleur et verrouiller des couleurs pour les préserver lors de la ré-extraction.
Qu'est-ce que le format d'exportation ASE ?
ASE (Adobe Swatch Exchange) est un format de fichier binaire utilisé par les applications Adobe Créative Suite, notamment Photoshop, Illustrator et InDesign. L'exportation de votre palette en fichier ASE vous permet de l'importer directement dans ces outils de design. Le fichier contient les valeurs RGB et le nom de chaque couleur.