Extraire les couleurs dominantes d’une image (logo, photo)

Vous avez un logo en PNG ou une photo d’ambiance, et il vous faut les couleurs qui vont avec : le bleu exact du logo, les teintes principales d’une photo de produit, un accent assorti pour une page. Les relever à l’œil donne des à-peu-près.

Un outil d’extraction de couleurs les lit directement dans les pixels. Voici comment extraire les couleurs d’une image, ce que le calcul de couleurs dominantes fait réellement, et pourquoi le résultat n’est pas toujours la couleur de la charte graphique.

Pixel exact ou palette dominante#

Deux besoins différents se cachent derrière « extraire une couleur ».

• Le pixel exact : vous cliquez sur un point précis de l’image et vous obtenez sa valeur. C’est ce qu’il faut pour un logo en aplats.
• La palette dominante : l’outil résume l’image en quelques couleurs, avec la part que chacune occupe. C’est utile pour une photo, où aucun pixel ne représente l’ensemble.

L’extracteur de couleurs d’une image fait les deux : il relève la couleur du pixel choisi en HEX, RGB et HSL, et calcule une palette de 6 couleurs.

Comment la palette dominante est calculée#

L’image est d’abord réduite à environ 128 px sur son plus grand côté, sans lissage, pour que les bords ne fabriquent pas de couleurs intermédiaires. Les pixels entièrement transparents sont ignorés. L’outil applique ensuite une découpe médiane :

1. toutes les couleurs de l’image sont placées dans une seule « boîte » ;
2. la boîte la plus dispersée est coupée en deux, selon le canal (rouge, vert ou bleu) où les valeurs s’étalent le plus ;
3. on recommence jusqu’à obtenir six boîtes ;
4. chaque couleur de la palette est la moyenne des pixels de sa boîte, et son pourcentage indique la part de l’image qu’elle représente.

La palette est triée de la plus fréquente à la moins fréquente. Une image qui contient moins de six couleurs distinctes en donne moins de six.

Extraire les couleurs d’un logo ou d’une photo#

1. Déposez l’image (JPEG, PNG, WebP, AVIF, GIF…) ou choisissez-la : elle est lue dans votre navigateur, rien n’est envoyé.
2. Lisez la Palette dominante et cliquez sur une pastille pour copier son code HEX.
3. Pour une valeur précise, cliquez ou touchez un pixel de l’image. Au clavier, placez le focus sur l’image avec Tab, déplacez le viseur avec les flèches (Maj pour aller dix fois plus loin) et validez avec Entrée ou Espace.
4. Copiez le HEX, le RGB ou le HSL. Les 12 dernières couleurs choisies restent dans l’historique.

Sur Chrome et Edge, un bouton « Pipette d’écran » permet aussi de relever une couleur n’importe où sur l’écran, y compris hors de la page.

Pour un logo en aplats, visez le milieu d’une zone unie : le résultat sera très proche de la couleur d’origine. Pour une photo, la palette donne des moyennes, qui peuvent ne correspondre à aucun pixel réel. Une zone de ciel qui passe du bleu foncé au bleu clair deviendra un bleu moyen.

Les limites à connaître#

• Le JPEG compressé ajoute du bruit : des halos et des blocs de couleurs légèrement décalées autour des contours. Cliquez à plusieurs endroits d’une même zone et comparez, plutôt que de vous fier à un seul pixel.
• L’éclairage : sur une photo, la couleur d’un objet dépend de la lumière et du réglage de l’appareil. Le bleu relevé sur un produit photographié n’est pas forcément le bleu du produit.
• Les profils colorimétriques : la valeur lue est celle que le navigateur affiche, qui peut différer légèrement de la couleur du fichier d’origine ou d’une impression. Pour une charte, demandez les codes officiels quand ils existent.
• Les tailles : les images au-delà de 50 mégapixels sont refusées, et la lecture des pixels se fait sur une copie ramenée à 2 048 px sur le plus grand côté.

Vérifier les contrastes avant d’adopter une couleur#

Une couleur extraite d’une image n’est pas forcément utilisable pour du texte ou un bouton. Un bleu pastel tiré d’une photo peut faire une belle illustration et un texte illisible sur fond blanc.

Avant de l’adopter, testez-la avec le vérificateur de contraste : texte courant à 4,5:1 au minimum selon les WCAG, composants d’interface à 3:1. Si la couleur doit servir de base à tout un jeu de teintes, passez-la ensuite au générateur de palette, qui en tire des harmonies et une échelle de nuances.