Comment obtenir une palette de couleurs à partir d'une image

Étapes

1. Ouvrez le Générateur de palette de couleurs et déposez une image.
2. Les couleurs principales apparaissent tout de suite. Utilisez le curseur pour en demander moins ou plus, de 2 à 12.
3. Cliquez sur un échantillon pour copier son code HEX.
4. Ou copiez toute la palette en liste ou en variables CSS.

Comment les couleurs sont choisies

Les pixels proches sont regroupés et chaque groupe est moyenné en une seule couleur : une couleur qui remplit l'essentiel de l'image vient donc en premier. Le pourcentage sur un échantillon est la part de l'image que ce groupe couvre.

Les pixels entièrement ou presque transparents sont ignorés : un logo sur fond transparent donne donc les couleurs du logo, pas un noir vide.

Utiliser la palette

"Copy as CSS variables" donne des propriétés personnalisées comme --colour-1 que vous pouvez coller directement dans une feuille de style. La liste simple est pratique pour des notes ou un outil de conception.

Si l'image a moins de couleurs distinctes que vous n'en avez demandé, vous n'obtenez que celles qu'elle contient. Un logo de trois couleurs donne trois échantillons, pas douze. Pour une couleur exacte, utilisez plutôt la pipette de couleur.

Astuces

Prenez une image qui a l'ambiance voulue. Une palette ne vaut que par l'image dont elle vient, et une photo de coucher de soleil donne des couleurs très différentes d'une photo de produit.

Choisissez deux ou trois couleurs de la palette plutôt que toutes. La plupart des designs fonctionnent mieux avec une couleur principale, une couleur d'accent et un neutre, et les pourcentages montrent quelles couleurs sont les meilleures candidates.