Extracteur de palette de couleurs - Obtenez HEX, RVB & TSL

Isolez les couleurs dominantes de n'importe quelle image et obtenez-les en HEX, RVB et TSL, avec une couleur de texte accessible WCAG pour chaque nuance. Fonctionne entièrement dans votre navigateur.

Ce que fait l'extracteur de palette de couleurs

Cet outil répond à une question précise et ciblée : si vous deviez décrire cette image avec une poignée de couleurs, lesquelles seraient-elles ? Il décode votre image dans le navigateur, la réduit pour que son bord le plus long fasse environ 200 pixels, puis lit les données brutes des pixels depuis un canevas. La réduction d'échelle n'est pas un raccourci qui nuit à la précision — le fait de moyenner les pixels voisins pendant la mise à l'échelle élimine le bruit de quantification JPEG et le bruit de capteur qui apparaîtraient autrement comme des dizaines de noirs quasi identiques, et cela maintient l'analyse entière sous la barre des quarante mille pixels pour qu'elle soit instantanée, même sur un téléphone. Les pixels dont la valeur alpha est inférieure à 128 sont rejetés avant toute autre opération. Cette seule étape empêche qu'un logo sur fond transparent ne rapporte le noir comme sa couleur principale, ce qui est l'erreur la plus courante commise par les autres extracteurs. Les pixels opaques restants sont groupés par découpage médian. Le découpage médian traite les pixels comme un nuage dans un espace RVB tridimensionnel, enroule une boîte autour d'eux, sélectionne à plusieurs reprises la boîte ayant la plus grande dispersion de couleur pondérée par le nombre de pixels qu'elle contient, et la coupe en deux à un point où les valeurs de couleur changent réellement. En répétant l'opération jusqu'à obtenir le nombre de boîtes demandé, on obtient des groupes qui suivent la structure réelle de l'image, et chaque groupe rapporte la moyenne des pixels qu'il contient plutôt qu'un centre de compartiment arbitraire. C'est pourquoi les résultats sont de vraies couleurs issues de votre image, et non les gris délavés que produisent les regroupements par grille fixe. L'ordre est ensuite ajusté. Se fier uniquement au nombre de pixels est un piège : une photo est souvent composée à quarante pour cent de ciel ou de fond blanc de studio, et un comptage brut place cela en premier, enterrant les couleurs qui vous intéressent vraiment. Les groupes quasi neutres, quasi noirs et quasi blancs reçoivent donc moins de poids lors du tri de la liste, bien qu'ils ne soient jamais abandonnés, et le pourcentage affiché à côté de chaque nuance est toujours la part réelle, non modifiée, des pixels. Enfin, une couleur de texte est calculée pour chaque nuance à partir de sa luminance relative WCAG 2.1, en choisissant le noir ou le blanc selon celui qui offre le taux de contraste le plus élevé avec cette couleur spécifique. Ce test utilise la luminance, pas la clarté, de sorte qu'il est correct pour les demi-teintes là où un simple seuil de luminosité donne une réponse erronée.

Pourquoi extraire une palette d'une image

Le travail de conception commence généralement par quelque chose de visuel — une photo, une capture d'écran, un moodboard, un logo envoyé par email — et se termine par des valeurs que vous devez saisir dans le code. Cet outil comble ce fossé sans faire un aller-retour dans une application de design.

Créez le thème d'un site ou d'une application à partir d'une photo principale, d'un cliché produit ou d'un élément de marque en quelques secondes, avec des valeurs à coller directement dans du CSS ou Tailwind
Récupérez les codes HEX exacts d'un logo ou d'une vieille capture d'écran quand personne ne retrouve le fichier de marque original
Obtenez d'emblée une couleur de texte accessible pour chaque nuance, pour ne pas avoir à deviner si le texte blanc sera lisible sur ce fond
Fournissez à un client ou un collègue un PNG de la palette qu'il peut lire sans rien installer ni ouvrir un outil de design

Comment extraire les couleurs d'une image

Quatre étapes, aucun compte, et rien ne quitte votre appareil — l'image est décodée et analysée localement dans votre navigateur.

1

Déposez un JPG, PNG, WebP, GIF ou SVG — l'extraction démarre automatiquement dès le chargement

2

Choisissez le nombre de couleurs souhaité : 4 pour un set de marque serré, 10 pour capturer davantage de nuances d'une photo chargée

3

Cliquez sur n'importe quelle valeur HEX, RVB ou TSL d'une nuance pour la copier, ou utilisez "Copier tous les HEX" pour récupérer l'ensemble en une fois

4

Exportez un extrait de variables CSS, un bloc de configuration Tailwind, ou générez la palette sous forme de PNG et téléchargez-la

Foire aux questions

Non. Il utilise le découpage médian, qui regroupe les pixels dans l'espace RVB et divise de manière répétée le groupe le plus large et le plus peuplé jusqu'à obtenir le nombre de couleurs demandé. Chaque nuance est la moyenne d'un vrai groupe de pixels, c'est donc une couleur qui apparaît véritablement dans l'image. Le classement se fait par part de pixels, mais les groupes quasi gris, quasi noirs et quasi blancs sont pondérés à la baisse pour qu'un grand fond plat ne repousse pas les vraies couleurs d'accent hors de la liste. Le pourcentage affiché sur chaque nuance est toujours la part réelle des pixels, non pondérée.
Généralement parce que la plus grande zone d'une image n'est pas la couleur que vous remarquez. Une photo de produit peut être composée à soixante pour cent d'un cyclorama blanc tandis que votre œil se verrouille sur l'objet rouge au centre. Cet outil atténue les neutres précisément pour cette raison, mais l'effet est délibéré et modéré plutôt qu'absolu, de sorte que sur une image qui est vraiment majoritairement composée d'un neutre, ce neutre l'emporte quand même. Si vous voulez plus d'accents, montez le nombre de couleurs à 8 ou 10 et les plus petits groupes auront leurs propres nuances au lieu d'être fusionnés dans les grands.
Oui, et c'est l'une des principales raisons de l'utiliser. Tout pixel dont la valeur alpha est inférieure à 128 est rejeté avant le début de l'analyse. Sans cette étape, dessiner un PNG transparent sur un canevas donne aux pixels entièrement transparents une valeur RVB de zéro, et les outils qui sautent cette vérification rapportent le noir comme la couleur dominante de presque tous les logos. Si une image est entièrement transparente, il n'y a rien à échantillonner, et vous obtenez un message clair plutôt qu'une palette de noir.
C'est du noir ou du blanc, selon celui qui a le taux de contraste WCAG 2.1 le plus élevé par rapport à la nuance. Le calcul convertit la couleur en luminance relative en utilisant la courbe gamma sRGB et applique la formule standard (L1 + 0,05) / (L2 + 0,05). C'est important car le point de basculement se situe à une luminance d'environ 0,179, ce qui ne correspond pas à cinquante pour cent de clarté. Une couleur comme #767676 semble assez sombre pour du texte blanc si on la juge par la clarté TSL, mais le texte noir obtient en réalité un meilleur score. Chaque nuance affiche ses propres étiquettes dans la couleur qu'elle recommande, donc ce que vous voyez est le résultat réel.
Quatre convient aux logos, aux illustrations plates et à tout ce que vous voulez réduire à un ensemble de marque serré. Six est un bon choix par défaut pour la plupart des photos et vous donne une couleur principale, une secondaire et suffisamment de tons de soutien pour construire une interface utilisateur. Huit à dix, c'est pour les images complexes — scènes chargées, dégradés, œuvres d'art — où les emplacements supplémentaires captent des accents qui seraient autrement moyennés dans leurs voisins. Changer le nombre relance entièrement l'extraction au lieu de simplement réduire la liste, donc un résultat à six couleurs n'est pas simplement les six premières d'un résultat à dix couleurs.
Le fichier CSS est un bloc :root avec une propriété personnalisée par couleur, nommée --color-1 à --color-n dans le même ordre affiché à l'écran, plus un alias --color-dominant pour la première. Chaque ligne comporte la part de pixels dans un commentaire de fin pour que vous puissiez voir l'importance de cette couleur. Le fichier Tailwind est un extrait de configuration avec les couleurs imbriquées sous theme.extend.colors.palette, ce qui vous donne des classes comme bg-palette-1 et text-palette-3 une fois fusionné dans votre propre configuration. Les deux sont de simples fichiers texte que vous pouvez ouvrir et modifier.
Non. Le fichier est décodé dans votre navigateur, dessiné sur un canevas en mémoire, puis relu sous forme de données de pixels. Aucune donnée d'image, aucune palette et aucun nom de fichier ne sont transmis à un serveur quelconque, ce qui signifie que les maquettes confidentielles, les photos de produits non publiées et les œuvres d'art de clients restent sur votre machine. Cela signifie aussi que l'outil continue de fonctionner si vous passez hors ligne après le chargement de la page, et qu'il n'y a pas de limite de taille de téléchargement au-delà de ce que permet la mémoire de votre appareil.
Tout ce que votre navigateur peut décoder, ce qui en pratique signifie JPG, PNG, WebP, GIF et SVG. Les GIF animés sont échantillonnés à partir de leur première image. Les fichiers SVG fonctionnent à condition qu'ils déclarent des dimensions intrinsèques, car le navigateur a besoin d'une taille pour les pixelliser. Les très grandes photographies ne posent pas de problème — l'image est réduite avant l'échantillonnage, donc un export RAW de 6000 pixels de large ne coûte pas plus de temps d'analyse qu'une vignette.

Plus d'outils d'image

Explorez d'autres outils puissants pour vos besoins d'édition