Réponse directe
Cet outil analyse les pixels de vos images grâce à des algorithmes de quantification et de clustering K-Means dans le navigateur afin d'extraire les teintes dominantes sous forme de jetons de design prêts à l'emploi.
Comment utiliser cet outil
Déposer l'image à analyser
Glissez une photographie ou illustration dans la zone de traitement.
Choisir le nombre de teintes
Sélectionnez le nombre de couleurs dominantes souhaité (généralement entre 5 et 8 nuances).
Copier et exporter les codes couleur
Cliquez sur une nuance pour copier sa valeur HEX, RGB ou HSL, ou exportez la palette en JSON ou variables CSS.
Analyse des pixels et quantification des couleurs en mémoire Canvas
L'image est chargée dans un tableau de pixels Canvas. Les couleurs sont regroupées dans l'espace chromatique tridimensionnel RGB pour filtrer le bruit et faire émerger les foyers de couleur les plus représentatifs visuellement.
- Clustering par densité : les familles de teintes prédominantes sont identifiées comme couleurs d'accent principales.
- Différenciation perceptive : les nuances trop proches sont fusionnées pour offrir une palette variée et harmonieuse.
Exemples pratiques
Extraction d'une palette à partir d'une photo de paysage
Entrée : Photographie : coucher-soleil-alpes.jpg (Haute résolution)
Sortie : Nuances dominantes : Bleu profond (#1B2A4A), Vert sapin (#3D5A40), Éclat cuivré (#E06D53), Ocre chaud (#F4A261), Blanc glacier (#EAEBED)
Fournit une harmonie de couleurs naturelles prête à intégrer dans la charte graphique d'un projet Web.
Limites
- Les images de très grande taille sont sous-échantillonnées pour maintenir le temps d'analyse sous la barre des 100 millisecondes dans le navigateur.
- Une image présentant un fort bruit numérique ou une compression dégradée peut décaler légèrement les centres de gravité des nuances.
Questions fréquentes
Mes photographies restent-elles confidentielles lors de l'extraction ?
Oui. L'analyse des pixels se déroule exclusivement dans la mémoire locale de votre navigateur. Aucune donnée d'image n'est envoyée à l'extérieur.
Sous quels formats puis-je exporter la palette obtenue ?
Vous pouvez copier les valeurs individuelles au format HEX, RGB, HSL, ou exporter l'ensemble sous forme d'objet JSON ou de variables CSS (:root).
Références et normes faisant autorité
- MDN Web Docs : Manipulation de pixels avec HTML5 Canvas et ImageData ↗ — Documentation sur l'extraction de données d'image, tampons RGBA et analyse statistique de couleur.
- Métriques de luminance et d'espace colorimétrique sRGB par le W3C ↗ — Définitions de valeurs chromatiques et pondérations pour les analyses de contraste et d'harmonie.