Couleurs dominantes en variables CSS

Importez une image et générez directement un bloc de variables CSS (:root {}) contenant ses couleurs dominantes, prêt à coller dans votre feuille de style.

Exemple :
Glissez-déposez une image ici, ou cliquez pour parcourir (25 Mo max).

Comment ça marche

L'outil analyse la répartition des couleurs de l'image via un histogramme et retient les teintes les plus fréquentes, ordonnées de la plus dominante à la moins fréquente. Chaque couleur est ensuite formatée en variable CSS numérotée (--color-1, --color-2, etc.) dans un bloc :root directement copiable.

Puis-je renommer les variables générées ?

Oui, le nom générique --color-N est un point de départ neutre : une fois collé dans votre feuille de style, renommez chaque variable selon son usage réel (par exemple --color-primary, --color-accent) pour un code plus lisible.

Combien de couleurs dois-je extraire ?

Pour une charte graphique simple, 3 à 5 couleurs suffisent généralement (une dominante, un accent, et une ou deux teintes neutres). Un nombre plus élevé est utile si vous voulez capturer toute la richesse d'une photo pour un usage plus décoratif.

Traitement 100% local : l'extraction de palette s'effectue entièrement dans votre navigateur — votre image n'est jamais envoyée à un serveur.