Générateur de palette de couleurs
Extrayez les couleurs principales d’une image sous forme de palette, et copiez-les en codes HEX, variables CSS ou JSON.
Le générateur de palette trouve les couleurs dominantes d’une photo ou d’un visuel et les affiche sous forme de pastilles. Vous pouvez choisir 3, 4, 5, 6 ou 8 couleurs ; elles sont classées de celle qui couvre la plus grande surface à la plus petite, et les teintes très proches sont fusionnées pour que chaque pastille soit distincte. Copiez la palette en variables CSS ou en tableau JSON, ou téléchargez-la sous forme de nuancier PNG.
Comment utiliser Générateur de palette de couleurs
- 1
Ouvrez une image
Déposez, choisissez ou collez une photo, une illustration, un logo ou une capture d’écran.
- 2
Choisissez le nombre de couleurs
Cliquez sur 3, 4, 5, 6 ou 8. Les pastilles se mettent à jour immédiatement.
- 3
Copiez une couleur
Cliquez sur l’icône de copie d’une pastille pour copier son code HEX.
- 4
Exportez la palette
Utilisez Copier les variables CSS ou Copier le JSON, ou téléchargez la palette sous forme de nuancier PNG.
Ce que fait l’outil
- Classées par surface
- La première pastille est la couleur qui couvre la plus grande partie de l’image.
- Des teintes distinctes
- Les couleurs presque identiques sont fusionnées : la palette ne répète pas le même ton.
- Prêt pour les développeurs
- Exportez en propriétés personnalisées CSS (--color-1, --color-2, etc.) ou en tableau JSON de codes HEX.
- Nuancier PNG
- Téléchargez une image de la palette, avec le code HEX écrit sous chaque pastille.
Questions
Comment les couleurs de la palette sont-elles choisies ?
L’image est analysée en petite taille, les couleurs proches sont regroupées, et les groupes qui couvrent la plus grande surface sont affichés en premier. Les pixels transparents sont ignorés.
Pourquoi ai-je moins de couleurs que demandé ?
Les teintes très proches sont fusionnées pour que chaque pastille soit nettement différente. Une image qui contient peu de couleurs distinctes peut donner moins de pastilles.
Comment utiliser la palette en CSS ?
Cliquez sur Copier les variables CSS pour obtenir un bloc :root avec des variables nommées --color-1, --color-2, etc., puis collez-le dans votre feuille de style.
Pourquoi une petite couleur d’accent manque-t-elle ?
La palette privilégie les couleurs qui couvrent une grande surface : un petit détail, comme un petit logo, peut ne pas apparaître. Utilisez la Pipette de couleur pour obtenir la valeur exacte d’un point précis.