Générateur de palette de couleurs d'image

Extrayez 3 à 12 couleurs dominantes de vos images dans le navigateur. Affichez les nuances, triez les teintes et exportez en CSS, JSON ou PNG.

Télécharger une image

JPG, PNG, WebP, GIF, SVG — Extrayez les couleurs dominantes

Déposez une image ici ou utilisez le bouton.

Source image

Générez des gammes chromatiques et des variables de design à partir de n'importe quelle photo

Chaque photographie marquante, affiche de cinéma ou illustration de marque repose sur un équilibre chromatique précis. Tenter de reconstruire cette harmonie manuellement à l'aide d'une simple pipette conduit souvent à sélectionner des tons intermédiaires ternes ou des doublons, car une seule image contient des milliers de variations subtiles de pixels. Au lieu d'échantillonner votre visuel point par point, notre générateur de palette de couleurs analyse l'ensemble de l'image directement dans votre navigateur pour en extraire les véritables teintes dominantes en une fraction de seconde.

En coulisses, l'algorithme réduit temporairement l'image sur une grille d'analyse de 150 px de large, écarte les pixels d'arrière-plan transparents (dont l'opacité alpha est inférieure à 125), regroupe les teintes voisines dans des compartiments RVB sur 15 bits, puis applique un filtre de distance colorimétrique afin de fusionner les tons quasi identiques en échantillons distincts accompagnés de leur pourcentage exact de présence.

Personnalisez votre palette : nombre de teintes, tri et nuances

Dès que votre image s'affiche dans l'espace de travail, le panneau latéral Couleurs dominantes vous permet d'affiner la manière dont la gamme est calculée et présentée :

  • Curseur Nombre de couleurs (de 3 à 12 échantillons) : Réduisez la sélection à une triade de 3 couleurs pour une interface minimaliste, conservez l'équilibre par défaut de 6 teintes, ou montez jusqu'à 12 couleurs pour capter les accents secondaires d'une illustration riche.
  • Quatre modes dans le menu Trier par : Organisez vos cartes de couleurs par Fréquence (du pourcentage le plus élevé au plus faible), par Teinte (ordre du spectre chromatique de 0° à 360°), par Luminosité (de la nuance la plus sombre à la plus claire) ou par Saturation (des couleurs les plus vives aux plus douces).
  • Générateur automatique de 5 nuances : Activez l'interrupteur Afficher les nuances pour déployer sous chaque couleur principale une réglette tonale de 5 cases : deux ombres assombries (-50% et -25%), la teinte de base (0%) et deux variantes éclaircies (+25% et +50%). Un simple clic sur l'une des nuances copie son code HEX dans votre presse-papiers.

Comment extraire et exporter la palette de couleurs d'une image

  1. Importez votre fichier visuel : Cliquez sur Télécharger une image ou glissez-déposez un fichier JPG, PNG, WebP, GIF ou SVG sur la page.
  2. Explorez les cartes de couleurs dominantes : Sous l'aperçu de votre image, chaque carte affiche le code HEX, la notation RGB, le pourcentage de couverture et une jauge visuelle proportionnelle. Le contraste du texte s'adapte automatiquement entre l'anthracite (#14171F) et le blanc pur (#FFFFFF) selon la luminosité du fond pour garantir une lecture parfaite.
  3. Ajustez le nombre de couleurs et l'ordre d'affichage : Faites glisser le curseur Nombre de couleurs entre 3 et 12, sélectionnez votre méthode de classement dans Trier par et cochez Afficher les nuances si vous cherchez des états de survol (hover) ou des fonds secondaires.
  4. Copiez un code ou téléchargez la palette complète : Cliquez sur les boutons HEX ou RGB d'une carte pour copier sa valeur instantanément, ou utilisez les quatre boutons de la section Exporter pour enregistrer votre gamme en JSON, CSS, Texte ou PNG.

Quatre formats d'exportation pensés pour les designers et développeurs

Pour vous éviter de copier-coller dix codes hexadécimaux un par un dans votre éditeur de code ou votre charte graphique, le bloc Exporter génère des fichiers propres portant le nom de votre image d'origine :

  • Feuille de variables CSS (-palette.css) : Génère un bloc :root contenant les propriétés personnalisées --color-1 à --color-N prêtes à être intégrées dans votre fichier CSS.
  • Données structurées JSON (-palette.json) : Exporte un tableau d'objets comprenant le code hex, le tableau numérique rgb et la valeur percentage pour vos thèmes dynamiques et applications web.
  • Liste de référence Texte (-palette.txt) : Télécharge un fichier texte léger récapitulant sur chaque ligne le code HEX, la valeur rgb() et le pourcentage de dominance.
  • Planche visuelle PNG (-palette.png) : Dessine une grille graphique composée de carrés de 200 × 200 px mentionnant chaque code HEX et son pourcentage — idéale à glisser dans une présentation client ou un moodboard.

Outils complémentaires pour exploiter vos couleurs sur Images Mint

Associez votre nouvelle gamme chromatique aux autres utilitaires locaux de notre plateforme pour finaliser vos créations :

Questions fréquentes

Mes images ou maquettes sont-elles envoyées sur un serveur distant ?

Non. L'analyse des pixels, la quantification chromatique et la génération des fichiers d'exportation s'exécutent à 100 % en local dans votre navigateur via l'API HTML5 Canvas 2D. Vos créations et photos personnelles ne quittent jamais votre appareil.

Comment l'outil évite-t-il d'extraire 6 nuances de bleu quasi identiques sur une photo de ciel ?

Après avoir regroupé les pixels par compartiments RVB et trié les résultats par fréquence, l'algorithme calcule la distance de Manhattan entre chaque candidat. Tout compartiment dont l'écart cumulé sur les canaux rouge, vert et bleu est inférieur à 55 unités par rapport à une couleur déjà retenue est écarté lors du premier passage, ce qui garantit une palette variée et représentative.

Le fond transparent d'un logo PNG ou SVG fausse-t-il les pourcentages ?

Pas du tout. Lors du balayage de l'image, tous les pixels dont le canal alpha est inférieur à 125 (sur 255) sont automatiquement ignorés. Les pourcentages affichés reflètent donc uniquement les surfaces visibles de votre logo ou illustration.

L'ordre choisi dans « Trier par » modifie-t-il les fichiers CSS, JSON et PNG exportés ?

Oui. Les quatre boutons d'exportation respectent l'ordre de tri actif : si vous classez votre palette par Luminosité, la variable --color-1 de votre fichier CSS et la première case de votre image PNG correspondront à la teinte la plus sombre de la gamme.