Comment obtenir une palette de couleurs à partir d'une image ?

Déposez l'image sur cette page. Les couleurs dominantes apparaissent immédiatement, classées selon la part de l'image qu'elles occupent ; vous pouvez changer leur nombre, copier chacune en HEX, RGB ou HSL et exporter l'ensemble en CSS, Tailwind ou JSON.

Comment trouver le code HEX d'une couleur sur une image ?

Chargez l'image et cliquez à l'endroit exact voulu. La pipette affiche les valeurs HEX, RGB et HSL de ce pixel, et un clic sur une valeur la copie.

Comment les couleurs dominantes sont-elles calculées ?

L'image est sous-échantillonnée et ses pixels sont regroupés par k-means dans l'espace colorimétrique OKLab, qui mesure l'écart entre couleurs comme l'œil le perçoit. La couleur moyenne de chaque groupe devient une nuance, classée selon la part de pixels qu'il contient.

Pourquoi j'obtiens des couleurs légèrement différentes d'un autre outil ?

Chaque extracteur regroupe les pixels similaires à sa manière, et les nuances sont des moyennes de ces groupes plutôt que des pixels isolés. L'initialisation de cet outil est déterministe : la même image donne toujours le même résultat ici. Utilisez la pipette quand il vous faut la valeur exacte d'un pixel.

Peut-on exporter la palette vers Tailwind CSS ?

Oui. Choisissez Configuration Tailwind v3 pour un objet colors à coller dans tailwind.config.js, ou Tailwind v4 @theme pour la configuration en CSS, puis copiez ou téléchargez le code.

Cela fonctionne-t-il avec les PNG transparents et les logos ?

Oui. Les pixels majoritairement transparents sont ignorés, donc la palette reflète le visuel visible et non le fond vide.

Mon image est-elle téléversée ?

Non. L'image est décodée et analysée dans votre navigateur et ne quitte jamais votre appareil.

Générateur de palette de couleurs à partir d'une image

Extrayez les couleurs dominantes d'une photo en HEX, RGB et HSL. Tout s'exécute localement — rien n'est téléversé.

Entrée: PNG · JPEG · WebP · GIF · SVG
Sortie: HEX · RGB · HSL · CSS · JSON

Déposez une image

Une photo, une capture d'écran ou un logo : PNG, JPEG, WebP, GIF ou SVG. Vous pouvez aussi coller une image.

Extraire une palette de couleurs de n'importe quelle image

Déposez une photo, une capture d'écran ou un logo et ce générateur de palette en extrait les couleurs dominantes, classées selon la part de l'image que chacune occupe. Choisissez entre 3 et 12 nuances, copiez chacune en HEX, RGB ou HSL, cliquez n'importe où sur l'image pour prélever un pixel précis, et exportez la palette en variables CSS, en SCSS, en configuration Tailwind, en JSON ou en bande PNG. L'image est analysée sur votre propre appareil et n'est jamais téléversée.

Comment extraire les couleurs d'une image

Déposez une image sur la page, choisissez-la dans vos fichiers ou collez-la directement depuis le presse-papiers. PNG, JPEG, WebP, GIF et SVG sont acceptés.
Réglez Couleurs sur le nombre de nuances voulu. La bande au-dessus de la liste montre chaque couleur selon sa part dans l'image.
Cliquez sur une valeur pour la copier en HEX, RGB ou HSL.
Besoin d'un point précis, comme la couleur d'un bouton sur une capture d'écran ? Cliquez sur ce point de l'image pour le prélever, puis ajoutez-le à la palette avec le bouton plus.
Choisissez un format d'export et copiez le code, ou téléchargez la palette sous forme de bande PNG.

Comment les couleurs dominantes sont trouvées

Une photo peut facilement contenir cent mille couleurs distinctes, pour la plupart de minuscules variations les unes des autres. Pour trouver la poignée qui compte, l'image est réduite et chaque pixel est regroupé avec ceux qui lui ressemblent le plus, selon une méthode appelée partitionnement en k-moyennes (k-means). Chaque groupe devient une nuance : la moyenne de ses pixels, classée selon le nombre de pixels qu'il contient.

Deux détails rendent le résultat meilleur qu'une pipette naïve. D'abord, les couleurs sont comparées dans OKLab, un espace colorimétrique conçu pour que des distances égales paraissent des différences égales à l'œil. Un regroupement en RGB brut a tendance à éclater les verts en nombreuses nuances presque identiques tout en mélangeant des bleus distincts. Ensuite, les points de départ sont choisis de façon déterministe, en privilégiant les couleurs à la fois fréquentes et éloignées de celles déjà retenues : la même image donne toujours la même palette, et un accent petit mais vif, comme un logo rouge sur un mur gris, n'est pas englouti par le fond.

Les pixels transparents sont ignorés : un logo sur un PNG transparent vous donne les couleurs du logo, pas une nuance de noir.

HEX, RGB ou HSL : laquelle copier

Besoin d'OKLCH, de CMYK ou de HSV, ou d'une teinte plus claire d'une des nuances ? Collez la valeur HEX dans le convertisseur de couleurs, qui affiche toutes les notations ainsi que les teintes, les ombres et les harmonies de couleurs.

HEX: #2a9d8f. Six chiffres hexadécimaux pour le rouge, le vert et le bleu. La forme la plus compacte, acceptée par tous les outils de design et par CSS.
RGB: rgb(42, 157, 143). Les trois mêmes canaux, en nombres de 0 à 255. Pratique dans du code qui fait des calculs sur les couleurs, ou dans les outils qui demandent des valeurs séparées.
HSL: hsl(173 58% 39%). Teinte, saturation et luminosité. La notation la plus simple à ajuster à la main : augmentez la luminosité pour un état de survol, baissez la saturation pour une variante atténuée.

Formats d'export

Variables CSS : un bloc :root avec --palette-1, --palette-2 et ainsi de suite, prêt pour n'importe quelle feuille de style.
SCSS : des variables de type $palette-1 pour les projets Sass.
Configuration Tailwind v3 : un objet theme.extend.colors pour tailwind.config.js, qui donne des classes comme bg-palette-1.
Tailwind v4 @theme : des propriétés personnalisées --color-palette-1 pour la configuration en CSS de Tailwind 4.
JSON : un tableau avec le HEX, le RGB et le HSL de chaque couleur, pour les scripts et les design tokens.
Bande PNG : les nuances côte à côte dans une image, pour une planche d'ambiance, un brief ou un message.

Conseils pour une palette utile

Peu de couleurs pour une identité visuelle, davantage pour l'illustration. Cinq ou six nuances capturent généralement l'ambiance d'une photo ; montez à 10 ou 12 quand il vous faut aussi les tons secondaires.
Recadrez d'abord. Un grand ciel ou une marge blanche domine le résultat. Recadrez sur la partie de l'image qui vous intéresse pour obtenir une palette qui la reflète.
Vérifiez les couleurs de texte avant de les utiliser. Les couleurs tirées d'une photo offrent rarement assez de contraste pour du texte. Passez chaque paire destinée à du texte au vérificateur de contraste.
Utilisez la pipette pour des valeurs exactes. Les couleurs dominantes sont des moyennes. Quand il vous faut la couleur précise d'un pixel, comme un logo ou un élément d'interface sur une capture d'écran, cliquez dessus.

Questions fréquentes

Comment obtenir une palette de couleurs à partir d'une image ?: Déposez l'image sur cette page. Les couleurs dominantes apparaissent immédiatement, classées selon la part de l'image qu'elles occupent ; vous pouvez changer leur nombre, copier chacune en HEX, RGB ou HSL et exporter l'ensemble en CSS, Tailwind ou JSON.
Comment trouver le code HEX d'une couleur sur une image ?: Chargez l'image et cliquez à l'endroit exact voulu. La pipette affiche les valeurs HEX, RGB et HSL de ce pixel, et un clic sur une valeur la copie.
Comment les couleurs dominantes sont-elles calculées ?: L'image est sous-échantillonnée et ses pixels sont regroupés par k-means dans l'espace colorimétrique OKLab, qui mesure l'écart entre couleurs comme l'œil le perçoit. La couleur moyenne de chaque groupe devient une nuance, classée selon la part de pixels qu'il contient.
Pourquoi j'obtiens des couleurs légèrement différentes d'un autre outil ?: Chaque extracteur regroupe les pixels similaires à sa manière, et les nuances sont des moyennes de ces groupes plutôt que des pixels isolés. L'initialisation de cet outil est déterministe : la même image donne toujours le même résultat ici. Utilisez la pipette quand il vous faut la valeur exacte d'un pixel.
Peut-on exporter la palette vers Tailwind CSS ?: Oui. Choisissez Configuration Tailwind v3 pour un objet colors à coller dans tailwind.config.js, ou Tailwind v4 @theme pour la configuration en CSS, puis copiez ou téléchargez le code.
Cela fonctionne-t-il avec les PNG transparents et les logos ?: Oui. Les pixels majoritairement transparents sont ignorés, donc la palette reflète le visuel visible et non le fond vide.
Mon image est-elle téléversée ?: Non. L'image est décodée et analysée dans votre navigateur et ne quitte jamais votre appareil.

Outils associés

Voir tous les outils

Convertisseur de couleursConvertissez des couleurs entre HEX, RGB, HSL, HSV, CMYK et OKLCH.Vérificateur de contraste WCAGVérifiez les couleurs de texte et de fond selon les niveaux WCAG AA et AAA.Convertisseur d'imagesRéencodez, redimensionnez et vectorisez vos images avec une comparaison avant/après en direct.Générateur de faviconToutes les tailles de favicon, un vrai .ico multi-tailles et un manifeste web à partir d'une seule image.Convertisseur de donnéesFaites passer du texte structuré entre JSON, YAML, TOML, CSV et Markdown.Compresser et archiverAllégez n'importe quel fichier avec gzip ou Brotli, ou regroupez un dossier en ZIP.