Aller au contenu principal
Bethemesh
Images & graphisme

Extracteur de couleurs d’image

Analysez localement une image PNG, JPEG ou WebP et récupérez ses couleurs dominantes en HEX et RGB.

  • Presse-papiers

Intégrer ce widget

Personnalisez le rendu, vérifiez l’aperçu puis copiez le code.

Aperçu

Type de code d’intégration

Code à copier

Responsive et redimensionné automatiquement par Bethemesh.

Image
Aucune image chargée

Déposez une image ici

Ajoutez une image PNG, JPEG ou WebP. Le fichier reste sur votre appareil et les modifications sont réalisées localement dans le navigateur.

Besoin de plus de possibilités ?

Retrouvez plusieurs outils dans un seul espace de travail, avec votre fichier et vos modifications en cours.

Ouvrir l’éditeur complet

Cet outil vous a-t-il été utile ?

Comment fonctionne cet outil ?

Une photo, une affiche ou un logo contient quelques couleurs dominantes qui font son identité. Cet extracteur les retrouve automatiquement, de 4 à 12 au choix, avec leur code hexadécimal et la part de l’image qu’elles occupent. Il sert à reprendre l’ambiance d’une photo dans une maquette, à retrouver les couleurs d’un logo sans fichier source ou à construire une palette cohérente avec une image de couverture.

Importez une image PNG, JPEG ou WebP, choisissez le Nombre de couleurs (4, 6, 8, 10 ou 12 ; 6 par défaut) puis cliquez sur Extraire la palette. Pour aller vite, l’analyse porte sur une copie réduite à 420 px sur son plus grand côté ; les pixels presque transparents sont ignorés.

Les couleurs sont regroupées par paliers de 24 niveaux sur chaque canal rouge, vert et bleu, et chaque groupe prend la couleur moyenne de ses pixels. Les groupes les plus fournis sont conservés, puis les couleurs distantes de moins de 28 dans l’espace RVB sont fusionnées : deux rouges presque identiques comptent comme un seul.

La palette s’affiche de la couleur la plus présente à la moins présente. Chaque pastille indique son code HEX et le pourcentage de l’image analysée qu’elle représente ; un clic copie le code. Une image peu colorée peut donner moins de couleurs que le nombre demandé.

Comment utiliser cet outil ?

  1. Importez l’image

    Déposez une photo, une capture ou un logo au format PNG, JPEG ou WebP.

  2. Choisissez le nombre de couleurs

    4 pour un logo simple, 8 à 12 pour une photo riche en nuances.

  3. Extrayez et copiez

    Cliquez sur Extraire la palette puis sur une pastille pour copier son code HEX.

Comment la palette est calculée

L’extraction combine une quantification par paliers, une fusion des couleurs voisines et un calcul de part.

Groupe d’un pixel

k = (⌊R ÷ 24⌋, ⌊G ÷ 24⌋, ⌊B ÷ 24⌋)

Les pixels de même groupe sont moyennés.

Fusion des couleurs voisines

d = √((R1 − R2)² + (G1 − G2)² + (B1 − B2)²) < 28

Deux couleurs plus proches que 28 sont fusionnées en moyenne pondérée.

Part de l’image

p = nc ÷ n_opaques × 100

Arrondie au dixième de pourcentage.

R, G, B
canaux rouge, vert et bleu de 0 à 255
nc
nombre de pixels rattachés à la couleur
n_opaques
nombre de pixels analysés non transparents

Cas d'utilisation

Reprendre l’ambiance d’une photo

Récupérez les teintes d’une photo de couverture pour habiller les titres et boutons d’une page.

Retrouver les couleurs d’un logo

Obtenez les codes HEX d’un logo dont vous n’avez qu’une image PNG.

Vérifier une identité visuelle

Contrôlez qu’un visuel respecte bien les couleurs de la charte et leurs proportions.

Exemples

Photo de plage avec fond transparent

Les 200 pixels transparents sont exclus du calcul, d’où 600 ÷ 1000 = 60 %. Seules 3 couleurs distinctes existent : la palette en contient 3, pas 4.

Entrée

Image de 1 200 pixels dont 600 bleu ciel (135, 206, 235), 300 sable (228, 197, 144), 100 gris foncé et 200 transparents ; 4 couleurs demandées

Résultat

#87CEEB 60 % · #E4C590 30 % · #282828 10 %

Deux rouges presque identiques

Les deux rouges sont à une distance de √(15² + 10² + 5²) ≈ 18,7 < 28 : ils sont fusionnés en une moyenne pondérée (206, 34, 32) qui représente 80 % de l’image.

Entrée

500 pixels (200, 30, 30), 300 pixels (215, 40, 35) et 200 pixels bleus (30, 60, 200)

Résultat

#CE2220 80 % · #1E3CC8 20 %

Conseils et bonnes pratiques

  • Recadrez d’abord l’image sur la zone qui vous intéresse : un grand fond blanc ou un ciel prendraient la première place de la palette.
  • Demandez plus de couleurs que nécessaire pour une photo, puis gardez celles qui fonctionnent ensemble.
  • Les couleurs extraites sont des moyennes : pour le code exact d’un pixel précis, zoomez sur une zone unie et vérifiez avec le convertisseur de couleurs.
  • Testez ensuite la palette avec le simulateur de daltonisme si elle doit servir à distinguer des informations.

Sources et références

Questions fréquentes

Comment l’outil choisit-il les couleurs dominantes ?

Il regroupe les pixels proches par paliers de 24 niveaux par canal, garde les groupes les plus nombreux, fusionne les couleurs trop proches, puis classe le résultat par part de l’image.

Pourquoi ai-je moins de couleurs que demandé ?

Parce que l’image n’en contient pas assez de distinctes : après fusion des teintes voisines, il peut rester moins de couleurs que le nombre choisi.

À quoi correspond le pourcentage ?

À la part des pixels analysés, transparents exclus, qui ont été rattachés à cette couleur. La somme peut être inférieure à 100 % quand des couleurs secondaires ne sont pas affichées.

Les codes sont-ils exacts au pixel près ?

Ce sont des moyennes de groupes de pixels, calculées sur une copie réduite à 420 px. Elles représentent fidèlement l’ambiance, pas la valeur d’un pixel isolé.

Les zones transparentes comptent-elles ?

Non. Les pixels dont l’opacité est très faible sont ignorés, ce qui évite qu’un logo détouré renvoie du noir ou du blanc parasite.

Mon image est-elle envoyée sur un serveur ?

Non. L’échantillonnage et le calcul de la palette sont faits dans votre navigateur.

Outils associés

Continuez avec ces outils

Des outils similaires ou complémentaires à celui-ci.

Outils similaires

Convertisseur de couleurs

Convertissez une couleur entre HEX, RGB et HSL avec ses valeurs équivalentes.

Images & graphismeUtiliser l’outil

Simulateur de daltonisme

Visualisez une image comme elle peut être perçue avec différents types de daltonisme.

Images & graphismeUtiliser l’outil

À lire aussi

RéférenceConcepts et technologiesDébutant

Comment une image numérique est-elle construite ?

Comprenez comment pixels, canaux de couleur, profondeur et transparence s’assemblent pour former une image affichée à l’écran.

31 août 202623 min
RéférenceConcepts et technologiesDébutant

RGB, HEX ou HSL : quelle notation choisir ?

Comprenez comment RGB, HEX et HSL décrivent les couleurs sRGB afin de choisir une notation CSS lisible et de convertir les valeurs sans confusion.

31 août 202623 min