Récupérez la couleur exacte de n'importe quelle image

Importez n'importe quel JPG, PNG, WebP ou GIF et cliquez où vous voulez sur l'image affichée — le pixel exact sous votre curseur est échantillonné et affiché en HEX, RGB et HSL, avec copie en un clic pour chaque format. Parfait pour retrouver la couleur d'une marque, prélever une teinte sur une photographie ou récupérer des tons d'accent sur une maquette de design.

Cliquez sur n'importe quel pixel et cet outil de sélection de couleur affiche son code couleur HEX (par exemple #FF6B35) aux côtés des valeurs RGB et HSL — les mêmes codes couleur HTML/CSS que vous collez directement dans une feuille de style, un design token ou un attribut HTML. Cliquez sur Copier pour récupérer le code hexadécimal en un clic.

L'image est réduite à 320 pixels sur son côté le plus long, puis chaque pixel est regroupé selon ses 4 bits de poids fort par canal. Les groupes les plus peuplés sont ramenés en moyenne à une couleur complète sur 8 bits, triés par fréquence, et renvoyés sous forme de palette. Le résultat compte généralement de 5 à 24 couleurs dominantes qui résument visuellement l'image.

Oui. Les boutons de téléchargement produisent deux formats : un bloc de variables CSS prêt à coller dans un sélecteur :root (--color-1, --color-2…), et un fichier JSON contenant le code hexadécimal, les composantes RGB et le pourcentage de poids de chaque couleur. Les deux formats s'intègrent proprement aux design tokens, aux configurations Tailwind et aux bibliothèques de palettes.

Non — la sélection de couleurs et l'extraction de palette se déroulent entièrement dans votre navigateur grâce à l'API canvas HTML. L'image reste sur votre appareil, ce qui rend l'outil sûr pour des photos de produits non publiés, des maquettes provisoires et des ressources de marque sous accord de confidentialité.

Pour un travail d'identité de marque, 5 à 8 couleurs constituent le compromis idéal : cela capture le thème dominant sans diluer les choix de couleurs d'accentuation. Pour la visualisation de données, nous recommandons 10 à 16 couleurs afin de disposer d'assez de teintes catégorielles. Le curseur vous permet de choisir entre 5 et 24.

Les pixels dont la valeur alpha est inférieure à 128 sont ignorés, si bien que les fonds transparents ne polluent pas la palette avec des couleurs « d’arrière-plan ». La pipette à couleurs d’image est donc particulièrement efficace pour les détourages de produits, les visuels de stickers et les sujets isolés.

Le HEX (#RRGGBB) est le plus compact et c'est celui qu'utilisent par défaut CSS, Figma et Sketch. Le RGB affiche les trois valeurs de composantes de 0 à 255 — pratique pour manipuler des données d'image par programmation. Le HSL (teinte, saturation, luminosité) est intuitif pour ajuster les couleurs : décalez la teinte pour changer de famille de couleurs, ajustez la luminosité pour les nuances claires et foncées.

Yes. Free, free account required to download, no limits on image size or number of palettes extracted. There is nothing to install — the entire tool is a single web page.

Aucune image nécessaire. Le sélecteur et la roue chromatique en haut de page fonctionnent seuls : faites glisser le carré saturation/luminosité et le curseur de teinte, ou saisissez une valeur HEX, RGB ou HSL pour obtenir une couleur exacte. Importer une image est facultatif : cela sert uniquement à prélever des couleurs dans une photo.

Choisissez votre couleur de base et le panneau Harmonies de couleurs construit instantanément des gammes complémentaires, analogues, triadiques, complémentaires adjacentes, tétradiques et monochromatiques à partir de la théorie du cercle chromatique. Cliquez sur un échantillon pour copier son code HEX.

Dans le Sélecteur de couleur et la Roue chromatique autonomes, réglez votre couleur et le panneau affiche son rapport de contraste par rapport au blanc pur et au noir pur, ainsi que la note WCAG — AAA, AA, AA Large ou Échec. Utilisez cela avant de finaliser une couleur de texte ou de bouton pour qu'elle reste lisible et respecte les directives d'accessibilité WCAG 2.1.

Oui. Le Sélecteur de couleur et roue chromatique autonome affiche la couleur CSS nommée la plus proche à côté de la valeur HEX, RGB ou HSL que vous avez saisie, ce qui est pratique pour décrire rapidement une teinte dans une note, un ticket ou une spécification de design sans deviner.

Cliquez sur Aléatoire dans le Sélecteur de couleur et roue chromatique pour passer à une nouvelle couleur, puis utilisez le panneau Harmonies de couleurs juste en dessous pour voir les palettes complémentaires, analogues, triadiques et autres combinaisons construites à partir de cette couleur — un moyen rapide de trouver un point de départ lorsque vous créez à partir de rien plutôt que d'échantillonner une image existante.

Utilisez le menu déroulant Taille au-dessus de la palette pour choisir 5, 8, 10, 16 ou 24 couleurs dominantes — la palette se recalcule instantanément à mesure que vous la modifiez. Combinez une petite taille comme 5 pour une palette de marque épurée avec la pipette de sélection de couleur afin de saisir une ou deux teintes d'accent exactes que l'extraction automatique pourrait lisser par moyenne.

Oui — le Sélecteur et la roue chromatiques autonomes affichent le rapport de contraste de votre couleur actuelle par rapport au blanc pur et au noir pur juste sous l'échantillon, étiqueté AAA, AA, AA Large ou Fail selon les seuils WCAG (7:1, 4.5:1, 3:1). Utilisez-le pour vérifier qu'une combinaison texte/arrière-plan respecte les normes d'accessibilité avant de fixer une couleur de design.

Le Sélecteur et la Roue chromatique associent automatiquement la couleur que vous avez réglée — via le sélecteur, la zone HEX ou les champs RGB/HSL — au nom de couleur CSS standard le plus proche, affiché comme « Nom le plus proche » à côté de l'échantillon. C'est un moyen rapide de décrire une couleur à l'oral ou d'en trouver l'équivalent web le plus proche.

Oui — chaque clic ou toucher sur l'image importée ajoute un nouvel échantillon à votre liste Couleurs prélevées plutôt que de remplacer le précédent, vous pouvez donc constituer un jeu personnalisé de couleurs exactes de pixels issues de différentes parties d'une photo. Supprimez un échantillon avec son bouton ×, ou videz toute la liste avec Effacer la sélection.

Oui — le bouton Aléatoire (icône de mélange) du Sélecteur et de la roue chromatiques passe à une nouvelle combinaison de teinte, saturation et luminosité en un clic, utile pour débloquer sa créativité ou explorer une palette que vous n'auriez pas saisie manuellement. HEX, RGB, HSL et les échantillons d'harmonie en dessous se mettent tous à jour ensemble.

Sur un écran tactile, faites glisser votre doigt sur l'image pour prévisualiser la couleur en dessous dans un échantillon flottant en direct, puis levez votre doigt pour ajouter ce pixel exact à votre liste Couleurs sélectionnées — sans appui de confirmation supplémentaire. Le même menu déroulant de taille de palette et les mêmes boutons d'export fonctionnent à l'identique sur mobile.

Oui. La roue chromatique en haut de la page dispose d'un bouton Aléatoire qui saute vers une couleur au hasard et affiche instantanément ses codes HEX, RGB et HSL, son nom de couleur le plus proche, ses ratios de contraste sur blanc et noir, ainsi que des jeux d'harmonies complets — complémentaire, analogue, triadique, complémentaire divisée, tétradique et monochromatique. C'est un moyen rapide d'explorer des points de départ pour une palette.

Cet outil prélève les couleurs d'une image importée ou de la roue chromatique intégrée, plutôt que de lire votre écran en direct. L'astuce la plus rapide pour remplacer une pipette d'écran : faites une capture d'écran, déposez-la sur la page et cliquez sur le pixel exact voulu — vous obtenez les mêmes codes HEX, RGB et HSL sans installer d'extension, et la capture d'écran ne quitte jamais votre navigateur.