Palette depuis une image
Les couleurs d'une image
Image
ou déposez-la ici, ou collez-la (Ctrl+V)
L'image reste dans votre navigateur : elle n'est jamais envoyée.
Palette
Ajoutez une image pour en extraire les couleurs dominantes.
À propos de l'outil
Cet outil retrouve les couleurs dominantes d'une image : une photo de produit pour habiller une page, un logo pour bâtir une charte, une capture pour reprendre l'ambiance d'un site. Vous choisissez une image, la déposez ou la collez avec Ctrl+V, puis réglez le nombre de couleurs entre 2 et 12. Chaque couleur est affichée avec sa part dans l'image et ses valeurs hexadécimale, rgb et oklch.
L'image est d'abord réduite à 160 px de côté au plus, puis ses couleurs sont regroupées par k-moyennes dans l'espace OKLab, proche de la perception humaine. Les pixels presque transparents sont ignorés. La palette s'exporte en variables CSS sous :root, en bloc @theme pour Tailwind v4 ou en JSON, avec des valeurs hex ou oklch et le nom de palette de votre choix.
Comment l'utiliser
- Cliquez sur « Choisir une image », ou déposez-la dans la zone, ou collez-la avec Ctrl+V.
- Réglez le « Nombre de couleurs » et donnez un « Nom de la palette ».
- Cliquez sur une pastille ou une valeur de la « Palette » pour la copier.
- Dans « Export », choisissez les « Valeurs exportées » (hex ou oklch), puis l'onglet « Variables CSS », « Tailwind v4 » ou « JSON », et cliquez sur « Copier ».
Questions fréquentes
Mon image est-elle envoyée à un serveur ?
Non. L'image est dessinée sur un canvas dans votre navigateur et ses pixels y sont analysés. Elle n'est jamais envoyée et n'est pas mémorisée : seuls le nombre de couleurs, le nom de la palette et le format d'export sont retenus.
Comment les couleurs dominantes sont-elles calculées ?
Les pixels proches sont d'abord regroupés, puis un algorithme des k-moyennes pondéré cherche le nombre de couleurs demandé dans l'espace OKLab. Le pourcentage affiché correspond à la part des pixels opaques rattachés à chaque couleur, de la plus présente à la moins présente.
À quoi ressemble l'export pour Tailwind ?
C'est un bloc @theme au format de Tailwind CSS v4, avec une variable --color-nom-1, --color-nom-2, etc. par couleur. Vous pouvez ensuite utiliser des classes comme bg-nom-1 dans vos composants. L'export CSS produit les mêmes variables sous :root, sans le préfixe color.
Pourquoi aucune couleur n'apparaît-elle ?
Les pixels dont l'opacité est inférieure à 50 % sont ignorés. Si l'image est entièrement transparente, l'outil n'a aucune couleur à extraire et l'indique. Un fichier qui n'est pas une image, ou que le navigateur ne sait pas décoder, est aussi refusé.