Sélecteur de couleurs à partir d'une image – Obtenez des codes de couleur HEX et RVB

Téléchargez n'importe quel JPG, PNG, WebP ou GIF et cliquez n'importe où sur l'image affichée : le pixel exact sous votre curseur est échantillonné et affiché au format HEX, RVB et HSL avec une copie en un clic pour chaque format. Utile pour faire correspondre la couleur d'une marque, échantillonner un échantillon d'une photographie ou saisir des tons d'accent à partir d'une maquette de conception.

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.

Oui. Il s'exécute dans le navigateur et ne nécessite aucun compte. Il n'y a rien à installer et aucune limite sur le nombre de palettes que vous inspectez.

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.

Oui — Pixoate prend en charge le traitement par lots et en masse. Passez en mode Batch, ajoutez jusqu'à 60 images sur Premium ou 200 sur Pro, définissez vos options une fois et chaque image est traitée avec les mêmes paramètres avant de télécharger une feuille de calcul : une ligne de palette par image. Le traitement en masse est une fonctionnalité Premium ; la sortie utilise la même qualité et les mêmes paramètres que le mode unique.

Oui : avec le traitement en masse, vous configurez les paramètres une seule fois et ils s'appliquent à chaque élément du lot – jusqu'à 60 images sur Premium ou 200 sur Pro. Il n'est pas nécessaire de répéter la configuration pour chaque élément et l'extraction de palette s'exécute dans votre navigateur ; seule la feuille de calcul terminée est enregistrée pour le téléchargement.

Presque toujours l’une des trois choses suivantes. Le fichier dépasse la limite de téléchargement gratuit de 20 Mo : Premium prend 50 Mo et Pro 120 Mo. Le format n'est pas celui accepté par cet outil, alors vérifiez la liste affichée sur le panneau de téléchargement. Ou bien le fichier n'est pas vraiment le format que son nom indique : renommer un fichier ne change pas ce qu'il contient, et c'est la raison pour laquelle une image d'apparence valide est refusée.

Il indique ce qui se trouve réellement dans le fichier, donc un résultat vide ou surprenant signifie généralement que les données n'ont jamais été là : supprimées par l'application qui les a enregistrées en dernier, supprimées par une plate-forme lors du téléchargement ou absentes de l'original. Essayez le fichier original intact directement à partir de l'appareil photo ou de la source plutôt qu'une copie passée via une application de messagerie.

Color Picker supports free standard use within the published processing allowances. Free downloads are clean — no watermark. No signup is required for standard tool use. Photo effects and AI edits have a web-size limit on Free, with the original-resolution result available through Premium or one credit. Crop, resize, rotate, compress and convert stay full size. Premium supports batches of up to 60 files, with the applicable plan limits shown before processing.

Non — Couleur Picker fonctionne dans le navigateur sur ordinateur comme sur téléphone. Rien à installer, aucun essai à démarrer et aucune licence à acheter avant de vérifier qu’il répond à vos besoins. Essayez-le avec le fichier qui vous pose réellement problème plutôt qu’avec un exemple.