Générateur de palette de couleurs depuis une image
Déposez une photo, une capture d’écran ou un logo et obtenez ses couleurs dominantes avec leur part dans l’image. Prélevez des pixels exacts avec la pipette, exportez la palette pour le code et vérifiez quelles paires de couleurs restent lisibles.
Besoin d’une interface belle et facile à lire ?
Nous concevons et développons des sites et des applications avec un système de couleurs cohérent : palette de marque, contraste accessible, design tokens partagés par les designers et les développeurs. Décrivez votre projet et recevez une estimation.
Merci ! Nous vous répondrons sous un jour ouvré.
En bref : importez n’importe quelle image et l’outil trouve ses couleurs principales par clustering k-means, indique la part de l’image couverte par chaque couleur et vous permet de prélever des pixels exacts avec une pipette. Exportez la palette en HEX, RGB, HSL, variables CSS, configuration Tailwind ou JSON, puis vérifiez le contraste de deux couleurs selon les WCAG 2.2. Tout fonctionne dans votre navigateur, l’image n’est pas envoyée.
Comment obtenir une palette de couleurs à partir d’une image
- Ajoutez une image. Glissez un fichier JPG, PNG, WebP, GIF ou AVIF sur la page, choisissez-le sur votre appareil ou collez une capture d’écran avec Ctrl+V. Pas d’image sous la main ? Cliquez sur « Essayer une photo d’exemple ».
- Choisissez le nombre de couleurs. Cinq ou six couleurs donnent une palette de marque compacte, huit à dix conservent les tons secondaires et les accents. La liste est triée par part de l’image ; passez à « du clair au foncé » pour la voir sous forme d’échelle.
- Prélevez des couleurs exactes. Cliquez n’importe où sur l’image pour lire le pixel sous le curseur et l’ajouter à la palette. Au clavier, placez le focus sur l’image, déplacez le repère avec les flèches et appuyez sur Entrée.
- Vérifiez le contraste. Le vérificateur ci-dessous indique quelles paires de la palette respectent le niveau AA des WCAG pour le texte courant. Cliquez sur une paire ou définissez n’importe quelle couleur de texte et de fond.
- Exportez. Choisissez HEX, RGB, HSL, CSS, Tailwind v3, Tailwind v4 ou JSON, puis copiez le code ou téléchargez-le sous forme de fichier.
Comment les couleurs sont trouvées
L’image est réduite à 256 pixels sur le côté long, puis les couleurs sont regroupées dans l’espace colorimétrique CIELAB, où les distances correspondent à la différence perçue entre deux couleurs. L’outil applique un clustering k-means avec des points de départ k-means++ et une graine aléatoire fixe. C’est pourquoi une même image donne toujours la même palette, et pourquoi une grande couleur de fond n’écrase pas les accents petits mais vifs. La valeur affichée pour chaque couleur est la moyenne des pixels réels de son groupe, et non une couleur « la plus proche » arrondie.
| Réglage | Quand l’utiliser |
|---|---|
| 5–6 couleurs | Palette de marque à partir d’un logo ou d’une photo clé, moodboards, thèmes de présentation |
| 7–8 couleurs | Thèmes de sites et d’applications : fond, surfaces, texte, accents principaux et secondaires |
| 9–10 couleurs | Illustrations et photos riches en détails, étapes de dégradé, visualisation de données |
| Pipette | Couleur exacte d’un bouton, d’un logo ou d’un texte dans une capture d’écran |
Formats d’export pour designers et développeurs
Les listes HEX, RGB et HSL se collent directement dans Figma, Sketch ou n’importe quel champ de couleur. CSS fournit des propriétés personnalisées dans :root, prêtes pour un fichier de design tokens. Tailwind v3 ajoute un groupe de couleurs palette à tailwind.config.js, ce qui permet d’écrire bg-palette-1. Tailwind v4 utilise le nouveau bloc @theme avec des variables --color-palette-1. JSON conserve HEX, RGB, HSL et la part de chaque couleur dans l’image pour les scripts et la documentation.
Vérificateur de contraste selon les WCAG 2.2
Le contraste des couleurs est le rapport entre les luminances relatives de deux couleurs, de 1:1 à 21:1. Le critère de succès 1.4.3 des WCAG 2.2 (niveau AA) exige au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte, soit 24 px en normal ou environ 18,7 px en gras. Le niveau AAA (critère 1.4.6) relève le seuil à 7:1 et 4,5:1. Le critère 1.4.11 exige 3:1 pour les icônes, les bordures de champs et les autres éléments d’interface. Le vérificateur applique la formule exacte de la norme et n’arrondit pas le rapport vers le haut : 4,49:1 est donc affiché comme un échec.
Les palettes de marque passent rarement ces contrôles telles quelles : les accents clairs sur fond blanc et les bleus moyens avec du texte blanc sont les problèmes les plus fréquents. Si vous créez un design system ou refondez un produit, notre équipe peut vous accompagner pour le design et le développement de sites et d’applications web. Pour vérifier rapidement des pages existantes, essayez le scan d’accessibilité.
Questions fréquentes
Comment obtenir la palette de couleurs d’une image ?
Importez ou collez l’image sur cette page. L’outil trouve 5 à 10 couleurs dominantes et affiche leurs codes HEX et leur part dans l’image. Cliquez sur une couleur pour copier son code HEX ou exportez toute la palette en CSS, Tailwind ou JSON.
Comment trouver le code HEX d’une couleur dans une image ?
Cliquez sur l’endroit voulu de l’image avec la pipette. L’outil affiche les valeurs HEX, RGB et HSL de ce pixel précis ; vous pouvez copier le code ou ajouter la couleur à la palette. Sur un téléphone, touchez l’image ; au clavier, déplacez le repère avec les flèches et appuyez sur Entrée.
Mon image est-elle envoyée sur un serveur ?
Non. L’image est dessinée sur un canvas dans votre navigateur et les couleurs sont calculées dans un Web Worker sur votre appareil. Rien n’est envoyé à notre serveur, et l’image n’est enregistrée nulle part après la fermeture de la page.
Pourquoi la palette est-elle toujours la même ?
Le clustering utilise une graine aléatoire fixe : la même image avec le même nombre de couleurs renvoie donc toujours la même palette. Vous pouvez ainsi partager une palette avec votre équipe ou la recréer plus tard en toute sécurité.
Quel rapport de contraste faut-il pour le texte ?
Pour le niveau AA des WCAG 2.2 : au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (24 px, ou environ 18,7 px en gras). Pour le niveau AAA : 7:1 et 4,5:1. Les icônes, les bordures de champs et les indicateurs de focus doivent atteindre au moins 3:1 par rapport à leur fond.
Puis-je utiliser la palette dans Tailwind CSS ?
Oui. Choisissez « Tailwind v3 » pour obtenir un groupe de couleurs pour tailwind.config.js, ou « Tailwind v4 » pour obtenir un bloc @theme avec des variables --color-palette-*. Vous pouvez ensuite utiliser des classes comme bg-palette-1 et text-palette-2.
Quels formats d’image sont pris en charge ?
JPG, PNG, WebP, GIF, AVIF et BMP, jusqu’à 50 Mo. Les pixels transparents sont ignorés : un logo sur fond transparent ne donne donc que les couleurs du logo. Pour extraire les couleurs d’un SVG, convertissez-le d’abord en PNG.