Extracteur de couleur dominante
Extrayez des schémas de couleurs dominantes et des palettes de marque à partir de n'importe quelle photo ou graphique en ligne. Personnalisez la taille des clusters, auditez les ratios de contraste d'accessibilité, copiez des variables CSS personnalisées ou des configurations Tailwind et téléchargez les ressources de la palette instantanément. Rapide, 100 % local et gratuit.
Select or Drop Your Image
Supports JPEG, PNG, WebP, SVG, AVIF, GIF, BMP, ICO.
Pourquoi utiliser notre extracteur de couleur dominante ?
- Quantification des pixels par K-means : extrayez des couleurs avec une grande précision mathématique. L'algorithme K-means regroupe les pixels bruts de l'image dans un espace de coordonnées tridimensionnel pour isoler les vraies couleurs dominantes.
- Audits de contraste WCAG 2.1 : vérifiez instantanément les ratios de lisibilité des couleurs. L'outil réalise des audits de luminance relative sur des superpositions blanches et noires, en affichant les niveaux AA et AAA.
- Exports d'extraits pour développeurs : exportez les couleurs directement dans vos feuilles de style. Obtenez des propriétés CSS prêtes à copier, des variables Sass, des configurations Tailwind personnalisées et des formats JSON.
- Confidentialité 100 % dans le navigateur : gardez vos fichiers média en sécurité. Toute la mise à l'échelle canvas et les algorithmes de clustering s'exécutent localement. Aucune image n'est jamais téléversée sur un serveur.
La science de la quantification des couleurs
Contrairement aux sélecteurs de couleur simples qui échantillonnent un seul pixel sous le curseur, un extracteur de couleur dominante analyse toute la disposition spatiale d'une image pour isoler ses véritables teintes principales et d'accent. Il lit des milliers de points de pixel, regroupe les couleurs similaires en clusters mathématiques et calcule leurs vecteurs de couleur les plus centraux.
Cet utilitaire utilise le clustering K-means dans un espace colorimétrique RVB euclidien tridimensionnel. L'algorithme part de centres de cluster aléatoires, affecte chaque pixel au centre le plus proche, recalcule la couleur moyenne de chaque groupe et répète le processus jusqu'à stabilisation des centroïdes. Cela permet de déterminer les couleurs dominantes exactes avec une grande précision mathématique.
Luminance et audits de contraste WCAG
Un aspect clé du design d'interface moderne consiste à vérifier que le texte reste lisible sur les couleurs d'arrière-plan. Cet outil calcule automatiquement la luminance relative de chaque vecteur de couleur extrait selon les spécifications WCAG 2.1.
En comparant la luminance relative de chaque nuance dominante avec le blanc pur (#FFFFFF) et le noir pur (#000000), l'outil génère des ratios de contraste précis. Il fournit des évaluations de lisibilité AA et AAA, vous indiquant immédiatement si une couleur est sûre pour des libellés, des cartes d'arrière-plan ou des boutons d'appel à l'action.
Génération de thèmes CSS, Sass et Tailwind
Combler le fossé entre les ressources graphiques créatives et les maquettes frontend est essentiel pour aller vite. Cet extracteur formate instantanément les couleurs obtenues en configurations prêtes au développement.
Vous pouvez copier des variables CSS personnalisées (propriétés `:root`), des variables de feuille de style Sass/SCSS, des structures de thème étendu Tailwind CSS ou des schémas de métadonnées JSON bruts. Cela vous permet d'intégrer les couleurs de marque directement dans vos configurations de style sans réécrire les valeurs à la main d'un format à l'autre.
Confidentialité 100 % sécurisée côté client
Vos créations artistiques, photographies et graphiques de marque propriétaires sont protégés. Cet outil effectue toutes les opérations - réduction d'échelle de l'image, analyse des pixels, clustering K-means et vérifications de style - entièrement dans votre navigateur.
Aucun fichier image n'est téléversé, mis en cache ou transféré vers un serveur distant. Cette exécution sûre hors ligne garantit la conformité avec les politiques strictes de protection des données d'entreprise et permet de traiter en toute sécurité des ressources de design internes.
Foire aux questions
Un extracteur de couleur dominante est un utilitaire en ligne qui analyse les pixels d'une image téléversée pour identifier les couleurs principales et d'accent. En regroupant des valeurs de couleur similaires, l'outil crée une palette représentant le ton visuel global de l'image et vous permet de réutiliser ces couleurs dans des systèmes de design.
L'algorithme K-means regroupe les pixels de l'image en clusters de couleurs distincts. Il projette les valeurs RVB dans un espace tridimensionnel, choisit des centres initiaux, puis réaffecte les pixels au centre le plus proche jusqu'à stabilisation des clusters. Les centroïdes obtenus deviennent les couleurs dominantes de l'image.
Non. Votre confidentialité est préservée, car tout le pipeline d'extraction de couleurs s'exécute localement dans votre navigateur grâce à l'API Canvas HTML5 et à JavaScript côté client. Vos fichiers image ne sont jamais téléversés sur un serveur distant ou un service tiers.
L'outil prend en charge les formats d'image standard que les navigateurs modernes peuvent afficher : JPEG, JPG, PNG, WebP, SVG, AVIF, GIF, BMP et ICO. Si votre navigateur peut décoder l'image dans un canvas, l'extracteur peut analyser ses couleurs dominantes.
L'outil formate les couleurs extraites en variables de code prêtes pour la production. Vous pouvez copier des propriétés personnalisées CSS, des valeurs de configuration Tailwind, des variables Sass ou des tableaux JSON structurés et les coller directement dans les fichiers de votre projet.
Le vérificateur de contraste audite les couleurs extraites pour l'accessibilité en comparant la luminance relative avec un texte blanc et noir. Il fournit une évaluation rapide de type WCAG pour voir quelles couleurs sont sûres pour des superpositions lisibles et des composants d'interface.
Oui. En plus de copier des extraits de code, vous pouvez télécharger la palette en JSON structuré, CSS ou sous forme de planche visuelle de nuances SVG. La sortie est ainsi utile pour les revues de design, les documents de passation et les présentations de marque.