Comment utiliser : Extracteur de palette d'image
- Choisissez une image : déposez-la ou collez-la, ou essayez l'exemple.
- Définissez le nombre de couleurs souhaité ; cochez Ignorer les tons quasi blancs et quasi noirs pour les logos et les visuels produits sur fond uni.
- Cliquez sur un échantillon pour le copier, ou cliquez sur l'image pour prélever la couleur exacte d'un pixel.
- Exportez la palette en variables CSS, en configuration de couleurs Tailwind, en SCSS ou en JSON.
Comment les couleurs sont détectées
L'image est réduite, puis ses pixels sont regroupés par couleur grâce au clustering k-means : l'algorithme place autant de « centres » que de couleurs demandées, attribue chaque pixel au centre le plus proche, déplace chaque centre vers la moyenne de ses pixels, et répète l'opération jusqu'à stabilisation. Chaque centre devient un échantillon, et sa part indique la surface de l'image qu'il couvre. Les pixels transparents sont ignorés, ce qui fonctionne bien pour les logos sur fond transparent.
Utiliser la palette
- Choisissez une couleur dominante pour les arrière-plans, et une couleur vive et contrastée pour les boutons et les liens.
- Vérifiez les couples texte/fond avec le Vérificateur de contraste.
- Créez une échelle complète de 50 à 950 à partir d'une couleur avec le Générateur de couleurs Tailwind, ou trouvez son nom avec la Recherche de nom de couleur.
Votre image est traitée sur votre appareil à l'aide d'un canvas et n'est jamais envoyée sur un serveur.
Aussi recherché comme : palette de couleurs d'une image, extraire les couleurs d'une image, couleurs d'une photo, sélecteur de couleur image, trouver le code hex d'une couleur, extracteur de couleurs, palette de couleurs depuis une photo, sélecteur de couleur logo.
Outils complémentaires : Extracteur de palette d'image
- Convertisseur de couleurs — Collez n'importe quelle couleur CSS — HEX, rgb(), hsl(), hwb(), oklch() ou un nom comme tomato — et obtenez instantanément tous les autres formats, ainsi qu'une palette 50–950 prête à l'emploi.
- Mélangeur de couleurs — Choisissez deux couleurs et un nombre d’étapes pour obtenir des couleurs de transition régulièrement réparties, idéales pour les dégradés, les bordures, les graphiques et les états de survol.
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
- Convertisseur HEX vers RGBA — Collez un code HEX, faites glisser le curseur d'opacité et copiez le CSS exact dont vous avez besoin : rgba() classique, rgb( / alpha) moderne ou HEX à 8 chiffres.