Pipette à couleurs d’image

Importez ou collez l'image ici et cliquez sur le pixel souhaité — l'outil le lit via le canvas HTML et affiche instantanément les valeurs HEX, RGB et HSL, en copiant le code hex dans le presse-papiers. La loupe agrandit les pixels individuels autour du curseur pour que vous tombiez exactement sur le bon. Aucune donnée n'est envoyée à un serveur à quelque moment que ce soit ; tout s'exécute dans votre navigateur grâce à l'API canvas HTML5. Cela le rend instantané, privé et utilisable hors ligne une fois la page chargée. Pour les zones difficiles à cliquer comme le texte anti-crénelé ou les bords de logos, zoomez d'abord avec le zoom intégré du navigateur avant de cliquer.

Utilisez cette pipette gratuite dans le navigateur : déposez l'image, cliquez sur un pixel et copiez le code. Rien à installer, sans inscription. Contrairement à Adobe Photoshop ou Illustrator — qui démarrent à environ 20 EUR/mois — cet outil est entièrement gratuit. Contrairement à Digital Color Meter de macOS ou PowerToys Color Picker de Windows, il extrait également automatiquement la palette dominante de l'image, vous donnant tous les couleurs principales en une seule fois plutôt qu'en cliquant sur chacune individuellement. imagecolorpicker.com est l'alternative dédiée la plus populaire, mais elle envoie votre fichier sur un serveur ; cet outil ne le fait pas.

Ils encodent la même couleur de deux façons. HEX écrit rouge/vert/bleu sous forme de trois paires hexadécimales (#FF5733) et est le standard en CSS et design web ; RGB utilise trois nombres décimaux de 0 à 255 — rgb(255, 87, 51) — courant dans les éditeurs d'images et le code. La conversion entre les deux est sans perte, et cet outil affiche les deux pour chaque pixel sur lequel vous cliquez. Utilisez HEX pour écrire du CSS ou des classes Tailwind ; utilisez RGB pour travailler avec canvas, WebGL ou du code de traitement d'image qui attend des canaux numériques. Les deux formats décrivent le même point de couleur sRGB.

HSL décrit une couleur par sa Teinte (0-360°), sa Saturation et sa Luminosité — ce qui est plus intuitif pour ajuster les couleurs. Vous pouvez rendre une couleur plus claire ou moins saturée sans modifier sa teinte du tout. CSS prend en charge hsl() nativement, de sorte que les designers travaillent souvent en HSL lors de la création d'une palette : augmentez la Luminosité pour une teinte, diminuez-la pour une ombre. La pipette affiche HEX, RGB et HSL pour chaque pixel, vous pouvez donc copier celui dont votre flux de travail a besoin. Pour Figma, Sketch ou Adobe XD, HEX est généralement le format le plus rapide à coller ; pour Tailwind ou les propriétés CSS personnalisées, HEX et HSL fonctionnent tous les deux très bien.

Il suffit de charger la photo — la palette dominante apparaît automatiquement. L'outil quantifie les pixels de l'image en groupes et les classe par fréquence, retournant les huit couleurs les plus dominantes sous forme d'échantillons avec des codes HEX. Cliquez sur un échantillon pour le copier, ou copiez toute la palette en une seule fois. Adobe Color et le générateur de palette de Canva font la même chose mais nécessitent un compte ; Coolors.co peut générer des palettes depuis des photos mais envoie l'image à son serveur. Ici, l'extraction de palette s'exécute entièrement dans votre navigateur — rien n'est envoyé, aucun compte requis, et aucune publicité n'interrompt votre travail.

L'image est dessinée sur un élément canvas HTML dans votre navigateur ; un clic lit les valeurs rouge, vert et bleu de ce pixel via l'API getImageData et les convertit en HEX, RGB et HSL. Canvas s'exécutant localement, aucun serveur n'est impliqué. La loupe utilise un second élément canvas pour agrandir la zone de pixels autour du curseur, vous permettant de cibler exactement le bon pixel même sur des images avec des détails fins comme du texte anti-crénelé, des bords de logos ou des dégradés photographiques.

Avec cet outil, oui — l'image est uniquement chargée dans la mémoire de votre navigateur et n'est jamais transmise nulle part. Vous pouvez le vérifier dans l'onglet Réseau des outils de développement du navigateur : aucune requête n'est effectuée après le chargement de la page. Cela importe pour les maquettes non publiées, les logos clients et les photos privées. De nombreuses pipettes basées sur l'envoi de fichier — dont imagecolorpicker.com et certaines fonctionnalités de Canva — envoient votre fichier sur un serveur et le stockent temporairement. Cet outil traite tout localement, vos fichiers restent sur votre appareil et disparaissent quand vous fermez l'onglet.

Oui — le bouton « Sélectionner depuis l'écran » utilise l'API EyeDropper (prise en charge par Chrome et Edge) pour prélever n'importe quel pixel n'importe où sur votre écran, y compris d'autres fenêtres, applications et onglets du navigateur. La couleur sélectionnée apparaît dans le même panneau HEX/RGB/HSL et le même historique que les couleurs issues d'images. Pour les navigateurs sans l'API (Safari, Firefox), le flux par capture d'écran prend le relais : appuyez sur Impr. écran ou Cmd+Shift+4 sur Mac, puis collez directement dans la pipette avec Ctrl+V — inutile d'enregistrer le fichier d'abord. Cela couvre les images de vidéo, les PDF dans le navigateur et toute page web en direct.

Enregistrez ou capturez le logo et déposez-le ici, puis cliquez sur la couleur de marque et copiez le HEX. Ou évitez complètement la capture d'écran : utilisez le bouton pipette d'écran pour prélever directement le site web en direct pendant qu'il est ouvert dans un autre onglet. C'est plus rapide que d'utiliser les DevTools du navigateur pour inspecter les styles calculés, en particulier quand la couleur est incorporée dans un SVG ou une ressource image plutôt qu'une propriété CSS. L'historique conserve vos 16 dernières couleurs, vous pouvez donc collecter une palette de marque complète depuis plusieurs sources avant de passer à votre outil de design.

La plupart des palettes utilisables comportent 3 à 6 couleurs : une couleur dominante, une ou deux couleurs secondaires et des couleurs d'accent. L'extracteur retourne huit échantillons dominants pour que vous puissiez choisir le sous-ensemble qui fonctionne le mieux — copiez des échantillons individuels ou prenez l'ensemble complet pour un tableau d'inspiration. En pratique, quatre couleurs est un bon point de départ : une primaire, une secondaire, une neutre et une d'accent. Les systèmes de design d'entreprises comme Stripe ou Linear utilisent des palettes compactes avec de nombreuses variantes de luminosité et de saturation des mêmes teintes, plutôt que de nombreuses couleurs distinctes.

HEX pour CSS et le travail web (le plus courant dans les bases de code et les outils de design), RGB/RGBA pour les écrans et le code canvas, HSL pour la construction de palettes et les ajustements systématiques, et CMJN pour la sortie imprimée. Figma, Sketch et Adobe XD prennent tous en charge HEX, RGB et HSL. Cette pipette affiche HEX, RGB et HSL pour chaque pixel afin que vous puissiez copier celui dont votre flux de travail a besoin sans aucune conversion manuelle. Si vous avez également besoin du CMJN pour le travail d'impression, collez le HEX dans un convertisseur gratuit en ligne — l'API canvas ne produit pas le CMJN nativement.

Cliquer sur un pixel copie automatiquement son HEX dans le presse-papiers. Chaque ligne de valeur, échantillon de l'historique et puce de palette est également copiable par clic — cliquez simplement sur la valeur ou l'échantillon et il est copié. L'historique conserve vos 16 dernières couleurs afin de pouvoir collecter plusieurs teintes d'une image en séquence avant de passer à une autre. Survolez les échantillons pour voir leurs valeurs avant de cliquer. Si vous avez besoin de la palette complète sous forme de liste, utilisez « Tout copier » pour obtenir les huit codes hex séparés par des virgules, prêts à coller dans des variables CSS ou un document de design.

Oui — capturez d'écran l'image ou la page et collez-la dans la pipette avec Ctrl+V (inutile d'enregistrer un fichier), ou utilisez la pipette d'écran pour prélever directement pendant que le PDF ou la vidéo est en lecture. Pour les PDF ouverts dans le navigateur, la pipette d'écran est généralement la plus rapide : ouvrez le PDF dans Chrome, cliquez sur « Sélectionner depuis l'écran » puis sur la couleur souhaitée. Pour la vidéo, mettez d'abord sur pause sur l'image pour l'échantillon le plus précis.

Les navigateurs peuvent appliquer une conversion de profil colorimétrique (ICC) lors du rendu des images, et les captures d'écran héritent du profil colorimétrique de votre écran. La pipette rapporte les valeurs de pixels sRGB réelles telles que rendues par votre navigateur — les valeurs que vous utiliseriez en CSS — ce qui est correct pour le travail web. Si vous constatez un écart par rapport à Photoshop ou Figma, vérifiez que votre écran est étalonné en sRGB et que le fichier image possède un profil colorimétrique intégré correspondant. Pour les ressources de logos, le designer devrait idéalement fournir directement les valeurs HEX de la marque plutôt que de se fier à l'extraction.

imagecolorpicker.com est l'alternative la plus utilisée — elle propose la sélection pixel par pixel et l'extraction de palette, mais envoie votre image sur son serveur et affiche des publicités. Adobe Color extrait des palettes depuis des photos mais nécessite un compte Adobe et envoie les images sur les serveurs d'Adobe ; il ne propose pas non plus la sélection pixel par pixel avec loupe de zoom. La pipette couleur de Canva est intégrée dans l'éditeur Canva et ne fonctionne qu'avec des images à l'intérieur d'un projet Canva. Digital Color Meter de macOS et PowerToys Color Picker de Windows permettent le prélèvement d'écran mais n'extraient pas les palettes depuis des fichiers. Cet outil est la seule option gratuite, entièrement côté client, avec loupe de zoom, pipette d'écran, historique de 16 couleurs et extraction de palette combinés — sans compte, sans publicités, sans envoi de fichier.