Palette de couleurs : réglages et meilleurs résultats

À quoi sert Palette de couleurs ?

Palette de couleurs repère les couleurs principales d’une image et les enregistre sous forme de palette, sur votre propre ordinateur. Dans l’application, l’outil s’appelle Color Palette. Donnez-lui une photo, une capture d’écran, un logo, un fichier SVG ou un fichier RAW d’appareil photo, choisissez le nombre de couleurs, et il vous rend une carte de nuancier en image et, si vous le souhaitez, les mêmes couleurs en variables CSS et en fichier JSON. Chaque image ajoutée a sa propre palette.

Les couleurs sont triées selon la part de l’image qu’elles couvrent, de la plus grande à la plus petite. La carte affiche pour chaque couleur son code hexadécimal, sa part de l’image et le nom de couleur simple le plus proche, comme tan ou navy (les noms sont en anglais).

01Étape 1 : Ouvrez Color Palette et ajoutez vos images

Cliquez sur Tools dans la barre latérale, ouvrez l’onglet Create et cliquez sur Color Palette dans la section From your media. L’outil apparaît aussi dans l’onglet Image, sous Also works with images. Vous pouvez également taper « palette » dans le champ de recherche en haut.

Déposez vos images dans la file d’attente, ou cliquez dessus pour choisir des fichiers. Les JPG, PNG, WebP, AVIF, HEIC, TIFF, GIF, BMP, SVG et fichiers RAW (CR2, CR3, NEF, ARW, DNG) fonctionnent tous. Pour en ajouter plus tard, utilisez Add more. Toutes les images de la file reçoivent les mêmes réglages.

123456

1. 1Image sélectionnée
2. 2Colors
3. 3Render the swatch card (PNG)
4. 4Data exports
5. 5Preview
6. 6Run extract

04Étape 4 : Lancez, puis vérifiez les palettes

La ligne au-dessus du bouton résume le traitement, par exemple 6 colors → card + CSS + JSON. Vérifiez où iront les fichiers : Default output folder les enregistre dans le dossier de sortie de votre espace de travail, dans un dossier palette avec un sous-dossier à la date du jour, comme 10-15. Cliquez sur Change pour choisir un autre dossier pour ce traitement. Cliquez ensuite sur Run extract.

À la fin, chaque image affiche Done et un nombre de fichiers, par exemple 3 files. Cliquez sur ce nombre pour voir la carte, le fichier CSS et le fichier JSON. Chacun porte le nom de l’image suivi de -palette : northwind-lookbook-mesa-palette.png, .css et .json.

1234

1. 13 files
2. 2Le fichier CSS
3. 3Saved to
4. 4Open folder

Cliquez sur View pour ouvrir la carte. Les flèches du haut passent aux fichiers CSS et JSON de la même image. Ils s’ouvrent sous forme de rangée de pastilles : cliquez sur l’une d’elles pour copier son code hexadécimal, ou passez sur Raw pour voir le texte du fichier et le copier en entier. Open folder ouvre le dossier des fichiers. Pour en savoir plus sur la fenêtre des résultats, voir Voir et comparer vos résultats.

12

1. 1Piece 1 of 3
2. 2Élément suivant

12

1. 1Raw
2. 2Cliquez sur une pastille pour copier son code hexadécimal

Tous les réglages, et quand les changer

Color Palette n’a pas de préréglages. Les mêmes réglages s’appliquent à toutes les images de la file.

Colors

Le nombre de couleurs à trouver dans chaque image. Vous pouvez en obtenir moins si l’image contient moins de couleurs distinctes.

• Plage2 à 12
• Par défaut6

Render the swatch card (PNG)

Enregistre une carte avec une pastille par couleur, son code hexadécimal, sa part de l’image et le nom de couleur simple le plus proche.

• PlageActivé ou désactivé
• Par défautActivé

Data exports

Enregistre aussi les couleurs en variables CSS, en fichier JSON, ou les deux. Au moins l’un des trois (carte, CSS ou JSON) doit être activé.

• PlageCSS, JSON, les deux ou aucun
• Par défautCSS

Comment obtenir une palette utilisable ?

1. Recadrez sur l’essentiel. Chaque pixel visible compte : un fond uni ou un grand ciel peut occuper la majeure partie de la palette. Recadrez d’abord l’image sur le produit ou la zone qui vous intéresse, par exemple avec Recadrer une image.
2. Utilisez un fond transparent pour les logos. Les pixels transparents sont ignorés : un logo enregistré en PNG ou en SVG sur fond transparent ne donne que ses propres couleurs. Un logo sur fond blanc ajoute du blanc à la palette.
3. Choisissez le nombre de couleurs à dessein : proche du nombre réel pour les logos et les visuels en aplats, 5 à 8 pour les photos.
4. Surveillez l’aperçu pendant que vous faites glisser le curseur, puis lancez. La carte reprend exactement les couleurs de l’aperçu.

Pourquoi ma palette ne ressemble-t-elle à rien ?

• La première couleur est celle du fond. Les couleurs sont classées selon la part de l’image qu’elles couvrent. Recadrez pour enlever le fond, ou ignorez simplement cette pastille.
• Plusieurs nuances presque identiques. Vous avez demandé plus de couleurs que l’image n’en contient vraiment : Hangar a découpé une couleur en nuances proches. Baissez Colors.
• Une petite couleur d’accent manque. Une couleur qui ne couvre qu’une infime partie de l’image peut être fondue dans une plus grande. Augmentez Colors, ou recadrez au plus près de l’accent.
• Deux pastilles portent le même nom. Le nom est seulement le plus proche d’une courte liste de couleurs de base, comme tan, maroon ou navy. Fiez-vous aux codes hexadécimaux, qui sont exacts.
• L’aperçu reste vide ou ne change pas. L’aperçu ne lit pas tous les formats. Les SVG et certains fichiers RAW peuvent ne pas avoir d’aperçu, mais le traitement les lit quand même et enregistre la palette.
• Un fichier a échoué avec un message indiquant que l’image n’a aucun pixel opaque à analyser. L’image est entièrement transparente : il n’y a aucune couleur à lire.

Pour les autres erreurs, voir Un fichier a échoué : que vérifier.

Limites

• Entre 2 et 12 couleurs par image.
• L’outil produit une carte PNG, un fichier CSS et un fichier JSON. Il n’y a pas de format de nuancier pour les logiciels de design.
• Chaque image a sa propre palette. Il n’y a pas de palette commune pour tout un lot.
• Un GIF ou un WebP animé est lu comme une seule image fixe.
• Tout se passe sur votre ordinateur. Rien n’est envoyé en ligne.