Extracteur de palette de couleurs d'image — outil gratuit

Exemple détaillé

Appuyez sur « Essayer un exemple » sous la zone de dépôt. La pastille du fichier affiche sample-image.png, et le curseur indique « Nombre de couleurs (6) ». L'exemple est un dégradé sarcelle, bleu ciel et violet avec une rangée de cercles pastel et le mot LibraTool : la plupart des pastilles sont donc bleues. Lors de notre essai, la liste commençait par #189AE3 à 38.5 %, #0D9CB6 à 28.7 % et #4C69EB à 26.1 %, suivies de trois petites à 3.1 %, 2.2 % et 1.4 %. La première pastille indique rgb(24, 154, 227) · hsl(202, 81%, 49%) · 38.5 %, et sa ligne de contraste donne 6.8:1 pour le texte noir et 3.1:1 pour le texte blanc. Faites glisser le curseur sur 2 et vous obtenez #238DD7 à 92.9 % et #ADC0CA à 7.1 %. De retour à 6, choisissez CSS sous « Exporter en » et appuyez sur « Copier le code » pour un bloc :root commençant par --color-1: #189ae3. « Télécharger la bande PNG » enregistre sample-image_palette.png. Vos codes hex peuvent différer de quelques pas, car les navigateurs dessinent le texte de l'exemple légèrement différemment.

Quels réglages utiliser, et les limites

• Ajoutez l'image de la façon la plus rapide. Déposez un fichier sur la zone, appuyez sur « Parcourir les fichiers », ou collez une capture d'écran avec Ctrl+V. Sur les écrans tactiles, les indications de dépôt et de collage sont masquées et « Parcourir les fichiers » est le seul moyen. L'outil accepte JPEG, PNG, WebP et GIF, et une photo HEIC d'iPhone est d'abord convertie, avec le message « Conversion de votre photo iPhone… ». « Ou collez l'URL d'un fichier » récupère l'image depuis une adresse, ce qui ne fonctionne que si ce site l'autorise. Coller de nouveau pendant qu'une image est ouverte la remplace. « Essayer un exemple » charge une image de test de 1200 × 800.
• Réglez « Nombre de couleurs » avec le curseur. Le curseur va de 2 à 16 et démarre à 6, et son étiquette affiche le nombre, comme dans « Nombre de couleurs (6) ». Les petits nombres donnent la palette générale, et les nombres plus grands relèvent les petits accents. Vous pouvez voir moins de pastilles que n'en indique le curseur, car les couleurs qui s'arrondissent au même hex sont fusionnées et les groupes vides sont écartés. La même image et le même nombre donnent toujours la même palette, car la recherche part d'une graine fixe. Chaque pastille indique sa part de l'image, comme 38.5 %, et la plus grande part vient en premier.
• Rappelez-vous que les pastilles sont des moyennes. L'image est réduite à 200 px au plus sur son plus grand côté, les pixels en grande partie transparents (alpha inférieur à 128) sont ignorés, et les autres sont regroupés par distance en RGB sur 20 tours au plus. Chaque pastille est la moyenne d'un groupe. Cela signifie qu'elle peut n'apparaître exactement nulle part dans votre image, et qu'un accent fin peut être fondu dans un groupe voisin. Quand il vous faut une couleur exacte, cliquez sur l'image au lieu de vous fier à une pastille.
• Cliquez sur l'image pour choisir un pixel précis. Sous l'image, il est écrit « Cliquez sur l'image pour échantillonner une couleur de pixel ». Chaque clic lit un pixel de l'image en taille réelle, pas de la copie réduite, même si l'aperçu est plus petit que l'original ou a des marges vides. Les choix apparaissent sous forme de pastilles avec le code hex. Cliquez sur une pastille pour la copier, ou sur × pour la supprimer. Une couleur déjà choisie n'est pas ajoutée deux fois, seules les 12 dernières sont conservées, et les clics sur la marge ne font rien. Les choix sont distincts des pastilles de la palette et ne font pas partie des exports.
• Utilisez la ligne de contraste pour choisir une couleur de texte. Sous chaque pastille, la ligne de contraste donne le rapport pour du texte noir et pour du texte blanc sur cette couleur, à une décimale. Les rapports utilisent la formule de luminance relative des WCAG. Le Color Palette Generator du site classe 4.5:1 comme AA : considérez donc cela comme un plancher pour le texte courant. Dans l'exemple, #4C69EB obtient 4.5:1 avec le noir et 4.6:1 avec le blanc, aucun des deux n'est donc confortable, tandis que #DAEFFB obtient 17.7:1 avec le noir.
• Choisissez l'export adapté à votre code. Choisissez CSS, Tailwind, SCSS ou JSON sous « Exporter en », vérifiez le cadre d'aperçu, puis appuyez sur « Copier le code ». CSS donne des variables :root nommées --color-1 et suivantes, SCSS donne $color-1 et suivantes, et Tailwind donne palette-1 et suivantes, toutes en hex minuscule. JSON donne chaque couleur en hex majuscule, en nombres rgb et avec la part à une décimale. « Copier toute la palette » copie les codes hex séparés par des virgules. « Télécharger la bande PNG » enregistre une image de 1000 × 200 où chaque couleur est aussi large que sa part, nommée comme photo_palette.png.

Problèmes courants et comment les résoudre

Le message affiché est « Impossible de charger l'image. Le fichier peut être corrompu ou dans un format non pris en charge. »

Le navigateur a accepté le fichier mais n'a pas pu le décoder comme une image. Les causes habituelles sont un fichier endommagé ou à moitié téléchargé, ou une image que votre navigateur ne sait pas dessiner. Ouvrez l'original dans un autre programme et enregistrez-le ou exportez-le de nouveau en JPEG ou PNG, puis ajoutez le nouveau fichier. La liste de pastilles reste vide tant que ce message est affiché.

Le message affiché est « report.pdf est un fichier PDF, que cet outil ne peut pas ouvrir. » (avec votre propre nom de fichier et type).

La zone de dépôt lit les premiers octets d'un fichier : renommer un PDF en .jpg ne sert donc à rien. Cet outil ouvre les photos JPEG, PNG, WebP, GIF et HEIC d'iPhone. Les fichiers AVIF, BMP, TIFF et SVG sont refusés. Un fichier non identifiable obtient « Type de fichier non pris en charge » et son nom. Convertissez d'abord l'image en JPEG ou PNG. Un lien vers un outil qui ouvre ce fichier peut suivre le message. Un fichier de 0 octet, souvent un substitut OneDrive ou iCloud, obtient son propre message vous demandant de le télécharger d'abord.

Le message affiché est « Ce site n'autorise pas d'autres sites web à télécharger ses fichiers. Téléchargez d'abord le fichier sur votre appareil, puis déposez-le ici. »

Il apparaît après « Ou collez l'URL d'un fichier » et « Récupérer ». Votre navigateur demande l'image à l'autre site, et la plupart des sites ne laissent pas un autre site web télécharger leurs fichiers. Enregistrez plutôt l'image sur votre appareil et déposez-la sur la zone. Un autre message, « Le lien a renvoyé une erreur (HTTP 404) » avec votre propre numéro d'état, signifie que l'adresse elle-même a échoué : vérifiez-la ou enregistrez le fichier et déposez-le ici.

Le curseur indique « Nombre de couleurs (12) » mais moins de pastilles apparaissent.

Les couleurs qui s'arrondissent au même hex sont fusionnées et les groupes vides sont écartés : les images uniformes comme les logos, les captures d'écran et les graphismes simples donnent donc moins de pastilles que le curseur n'en demande. Rien n'est anormal. Les pixels en grande partie transparents sont aussi ignorés, et une image entièrement transparente ne donne aucune pastille. Pour une palette plus sobre, baissez le curseur. Pour des nuances plus fines, montez-le jusqu'à 16 sur une photo.

Le message affiché est « Impossible de copier dans le presse-papiers. »

Le navigateur a refusé la copie, ce qui peut arriver quand la page n'est pas sécurisée, est affichée dans un cadre, ou que le navigateur a bloqué l'accès au presse-papiers. Le message reste jusqu'à ce que vous déplaciez le curseur ou chargiez une autre image. Cliquez une fois sur la page et réessayez. Si cela échoue encore, sélectionnez le texte dans le cadre d'aperçu sous « Exporter en » et copiez-le à la main, ou utilisez « Télécharger la bande PNG » pour enregistrer la palette sous forme d'image.

Comment il se compare

La pipette d'une application de design lit des pixels exacts, et cet outil le fait à chaque clic. Ce qu'il ajoute, c'est la liste des couleurs dominantes, trouvées en regroupant les couleurs de toute l'image. Il utilise l'image entière : un grand arrière-plan dominera donc la liste, et il n'y a aucun moyen de sélectionner une zone ou de supprimer d'abord l'arrière-plan. Il travaille sur une copie de 200 px au plus, ne nomme aucune couleur et ne trie pas par teinte. Les couleurs restent sur votre appareil, puisque l'image est lue dans le navigateur. Pour construire une palette à partir d'une seule couleur plutôt que d'une photo, utilisez le Color Palette Generator.