Comment extraire une palette de couleurs d'une photo, et vérifier qu'elle peut porter du texte

Une photo est un bon endroit pour trouver des couleurs qui vont ensemble, et un mauvais endroit pour trouver une couleur de texte. Les raisons sont mécaniques : ce qu’un extracteur fait aux pixels, et ce dont les photos sont faites. Ce guide parcourt le sélecteur de couleurs d’image, puis les chiffres derrière la ligne de contraste qu’il affiche sous chaque palette.

Extraire la palette

1. Chargez la photo. Déposez-la sur le panneau qui indique Drop an image here (déposez une image ici), ou cliquez sur Browse image (parcourir). Tout ce que votre navigateur sait décoder fonctionne ; s’il ne peut pas lire le fichier, l’outil demande un PNG, un JPEG, un WebP ou un SVG. Replace (remplacer) et Remove (retirer) apparaissent sur l’image une fois celle-ci chargée.
2. Choisissez le mode d’extraction. Dominant, Distinct ou Accessible, sous Extraction. La phrase sous les boutons décrit ce que fait le mode actif, et la touche M les fait défiler.
3. Réglez le nombre de couleurs. Les boutons − et + à côté de Colours vont de 2 à 10. La valeur de départ est 5.
4. Lisez chaque ligne. Chaque échantillon affiche son code hex, sa part de l’image en pourcentage et son ratio de contraste sur blanc.
5. Lisez la ligne sous la liste. Elle indique combien d’échantillons échoueraient en texte courant sur blanc et, si des paires deviennent difficiles à distinguer sous une simulation de daltonisme, combien de paires.
6. Passez en Accessible si le texte doit reposer sur du blanc, puis exportez. Export copie la palette en CSS, OKLCH, Tailwind v4, SCSS, JSON, tokens Figma ou échantillons SVG, et Save here la conserve sur cet appareil.

Deux liens figurent sous la liste. Check colour vision ouvre les échantillons dans le simulateur de daltonisme, et Build a ramp envoie le premier échantillon au générateur d’échelles et de tokens. L’outil garde une copie réduite de l’image pour l’onglet : suivre l’un ou l’autre lien puis revenir ne la fait pas disparaître.

Ce qui arrive aux pixels

Le partitionnement en k-moyennes (k-means) est la méthode sous-jacente. Il répartit les pixels échantillonnés en un nombre fixe de groupes : chaque pixel est affecté au centre le plus proche, chaque centre est déplacé vers la moyenne de ses pixels, et l’on recommence jusqu’à ce que plus rien ne bouge. Chaque échantillon que vous voyez est l’un de ces centres. La chaîne de traitement, d’après le code source de l’outil :

• L’image est mise à l’échelle pour que son plus grand côté fasse au plus 320 pixels avant toute lecture. Une photo plus petite est laissée telle quelle.
• Au plus 6 000 pixels sont échantillonnés, à pas régulier. Une photo de 4 000 × 3 000 devient 320 × 240 = 76 800 pixels : un pixel sur 13 est donc lu (76 800 ÷ 6 000 = 12.8, arrondi à l’unité supérieure), ce qui donne 5 908.
• Les pixels dont la valeur alpha est inférieure à 128 sur 255 sont ignorés, pour qu’un logo sur fond transparent ne revienne pas en noir.
• Le regroupement se fait dans OKLab, un espace colorimétrique conçu pour que la distance numérique entre deux couleurs suive leur différence perçue. En sRGB, les distances entre couleurs sombres sont surestimées et celles entre couleurs claires sous-estimées : c’est ainsi qu’un extracteur sRGB renvoie plusieurs sombres presque identiques à partir d’une photo qui en contient manifestement plusieurs différents.
• Il effectue jusqu’à 24 passes, et les centres de départ ne font intervenir aucun hasard : le premier est le pixel situé à mi-chemin de l’échantillon, et chaque suivant est le pixel le plus éloigné des centres déjà choisis. La même photo donne la même palette à chaque fois.

Dominant, Distinct et Accessible, comparés

Les trois modes répondent à des questions différentes, et le pourcentage à côté de chaque échantillon a un sens légèrement différent dans chacun.

Mode	Groupes calculés	Ce que vous obtenez	Le pourcentage
Dominant	Le nombre que vous avez réglé	Tous les groupes, du plus grand au plus petit	Part des pixels échantillonnés dans ce groupe
Distinct	Deux fois le nombre plus deux, au plus 16	Les groupes pris du plus grand au plus petit, en écartant ceux à moins de 0.1 de luminosité et 0.05 de chroma d’un groupe déjà retenu, puis ramenés au nombre réglé	Part au sein du regroupement plus large : la colonne n’a donc pas besoin de totaliser 100
Accessible	Le nombre que vous avez réglé	Les groupes de Dominant, chacun sous 4.5:1 sur blanc étant déplacé vers la luminosité conforme la plus proche	Comme Dominant

Le test de doublon de Distinct ne regarde que la luminosité et la chroma, pas la teinte : deux accents de teintes différentes à luminosité et chroma voisines comptent donc pour un. Quand les accents d’une photo diffèrent surtout par la teinte, Dominant avec un nombre plus élevé peut être le meilleur moyen de les faire ressortir.

Accessible parcourt la luminosité par pas de 0.01 et retient la valeur conforme la plus proche de l’original, en gardant la teinte et, quand l’écran peut l’afficher, la chroma.

Pourquoi les couleurs d’une photo échouent en texte sur blanc

Trois facteurs jouent contre une photo.

Les centres sont des moyennes. Un échantillon est la moyenne de tous les pixels de son groupe : l’échantillon le plus sombre est donc plus clair que les pixels les plus sombres qu’il contient, l’ombre étant moyennée avec la quasi-ombre. Les extrêmes dont une couleur de texte a besoin sont la première chose que la moyenne efface.

Le texte courant sur blanc exige une couleur sombre, et l’essentiel d’une photo est en tons moyens. Pour 4.5:1 sur blanc, la formule WCAG plafonne la luminance relative à 1.05 ÷ 4.5 − 0.05, soit environ 0.183. Pour une couleur neutre, la luminosité OKLCH est la racine cubique de la luminance relative, ce qui donne une luminosité d’environ ∛0.183 ≈ 0.568. Les exemples chiffrés des notes de l’outil de couleur du site aboutissent au même endroit : un bleu de luminosité 0.567 mesure 4.50:1, et un ambre à 0.572 mesure 4.51:1.

La valeur de chaque échantillon est mesurée sur blanc uniquement. L’ambre d’un coucher de soleil, #e8b04b, mesure 1.95:1 sur blanc pour une luminosité de 0.791. Accessible renvoie #a16c00 à 4.51:1, en gardant la teinte 79° et en abaissant la luminosité à 0.572, soit une baisse de 0.791 − 0.572 = 0.219. C’est un ambre visiblement plus sombre, qui appartient toujours à la photo.

Une page sombre inverse le problème. Le ratio d’une couleur sur noir est égal à 21 divisé par son ratio sur blanc : l’ambre d’origine atteint donc 21 ÷ 1.95, plus de 10:1, sur noir. La version Accessible atteint 21 ÷ 4.51, un peu moins de 4.7:1, à peine au-dessus du seuil. Pour du texte sur fond sombre, restez en Dominant et calculez de cette façon la valeur sur noir de chaque échantillon.

Face à un extracteur classique

	Cet outil	Un extracteur en ligne classique
Espace de regroupement	OKLab	sRGB
Modes	Dominant, Distinct ou Accessible, nommés	Un seul, sans nom
Vérification de l’utilisabilité	Contraste sur blanc pour chaque échantillon	Aucune
Un échantillon qui échoue	Recherche de luminosité à teinte égale	Non proposé
L’image	Décodée dans l’onglet	Envoyée à un serveur

Autres façons de faire

Il n’existe pas de méthode intégrée sur macOS, Windows ou iPhone pour extraire une palette d’une photo, ni de solution en ligne de commande parmi celles que ces guides garantissent. Si vous avez déjà des couleurs venues d’ailleurs, le vérificateur de contraste vous dira lesquelles peuvent porter du texte et trouvera la version la plus proche de chacune qui le peut.

Vérifier que la photo ne bouge pas

La zone de dépôt indique que le fichier est lu dans votre navigateur, et vous pouvez le confirmer. Ouvrez les DevTools, choisissez le panneau Réseau, puis déposez une photo : aucune requête transportant l’image ne sort. Vous déconnecter du réseau avant de la déposer fonctionne aussi, et la palette s’affiche quand même.

Ouvrez le sélecteur de couleurs d’image avec la photo que vous avez en tête, et lisez la ligne sous les échantillons avant de vous laisser séduire. Si la couleur que vous voulez échoue sur blanc, l’article comment corriger le contraste sans changer votre couleur de marque explique pourquoi déplacer la luminosité, et non la teinte, la garde reconnaissable.