Aller au contenu

Extraire la palette d’une image

Palette Extractor

Tire d’une image une palette du nombre de couleurs voulu et l’exporte en hexadécimal, en variables CSS ou en nuancier ASE.

Les couleurs d’une image, sous forme de palette que vous pouvez coller dans une feuille de style. Le quantificateur est celui qu’emploie le compresseur PNG, au motif qu’une palette assez bonne pour représenter l’image est par définition une palette qui la décrit — et la part de l’image que couvre chaque couleur est comptée plutôt qu’estimée.

🔒 Fonctionne entièrement dans votre navigateurcolorpaletteextractdesign

Déposez une image

La palette sort du même quantificateur que celui du compresseur PNG : une palette assez bonne pour représenter l’image est une palette qui la décrit.

Comment s’en servir

  1. Déposez une image

    La barre sous l’aperçu montre chaque couleur à sa part réelle : une couleur qui couvre 2 % de l’image a l’air de 2 %.

  2. Dites combien de couleurs vous voulez

    De deux à seize. Cinq ou six est d’habitude le point où la palette cesse d’être un résumé et devient une liste.

  3. Exportez dans la forme dont vous avez besoin

    Propriétés personnalisées CSS, bloc @theme de Tailwind, variables SCSS ou JSON — copiés d’un bloc plutôt qu’un échantillon à la fois.

Questions fréquentes

Pourquoi une couleur que je vois clairement n’est-elle pas dans la palette ?

Parce qu’elle couvre trop peu de l’image. Le quantificateur optimise la représentation de l’ensemble : un accent vif sur 1 % de l’image perd face à une grande surface de gris quasi identiques. Augmentez le nombre de couleurs.

Échantillonne-t-il l’image entière ?

Un pas régulier sur toute l’image, environ 400 000 pixels. Les couleurs dominantes sont une propriété de la distribution, et un pas régulier les préserve — et, contrairement à une réduction préalable, il ne peut pas inventer une couleur absente de l’image.

La sortie Tailwind ne fonctionne pas dans mon projet.

Tailwind 4 définit les couleurs comme des propriétés personnalisées à l’intérieur de @theme, et c’est ce que produit cet outil. Une configuration module.exports de style v3 collée dans un projet v4 ne fait rien en silence, et l’inverse est vrai aussi.

À alimenter depuis

Ensuite

Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.