Sélecteur de couleur d'image

Sélecteur de couleur à partir d'une image : extraire une couleur exacte et une palette

Utilisez ce sélecteur de couleur d'image pour obtenir les valeurs exactes à partir d'une photo locale, d'une capture d'écran, d'une illustration ou d'une capture d'interface. Chaque clic sur l'aperçu correspond au pixel source exact et renvoie ses valeurs HEX, RGB, HSL, alpha et ses coordonnées. Il fonctionne donc comme un sélecteur de couleur d'image et un sélecteur de couleur HEX d'image pour les tâches de conversion d'image en HEX, d'obtention de code HEX à partir d'une image et d'obtention de code couleur à partir d'une image, sans téléversement sur un serveur. Le même flux de travail sert de sélecteur de couleur pour photo, de sélecteur de couleur d'image, de pipette de couleur d'image ou de sélecteur de couleur à partir d'une image.

Comment obtenir un code HEX à partir d'une image

1. Choisissez, déposez ou collez une image locale, ou commencez avec l'échantillon fourni.
2. Cliquez ou appuyez sur un pixel, ou saisissez les coordonnées sources exactes et utilisez la loupe pour un contrôle au niveau du pixel.
3. Copiez le code HEX de l'image, choisissez une couleur de palette dominante, ou exportez la palette en tant que variables CSS ou jetons JSON.

Échantillonnage exact des pixels avec les coordonnées de la source

Le canevas mis à l'échelle ne modifie jamais le système de coordonnées de la source. Les contrôles par pointeur, tactile, clavier et coordonnées numériques échantillonnent tous à partir de l'image source décodée par le navigateur. La loupe utilise un rendu au plus proche voisin pour que le pixel central reste visible, y compris les pixels transparents et partiellement transparents.

Créer une palette de couleurs à partir d'une image

La palette de couleurs résultant de l'image est extraite d'un sous-échantillon délimité dans un worker de navigateur, ainsi les grandes images ne nécessitent pas une analyse des couleurs en pleine résolution sur le thread principal de l'interface. Six couleurs dominantes déterministes deviennent une palette de couleurs à partir d'une photo, une palette de couleurs d'image ou le résultat d'un extracteur de palette d'image, un bloc de propriétés personnalisées CSS ou un fichier de jetons JSON, ce qui fait également de l'outil un générateur de schémas de couleurs pratique à partir de fichiers photo. Les pixels entièrement transparents sont ignorés et l'alpha partiel contribue proportionnellement.

Étapes suivantes : vérifiez le contraste de cette palette par rapport aux seuils WCAG, ou transformez une couleur échantillonnée en une palette complète avec des teintes, des nuances et des valeurs Tailwind.

Sortie HEX, RGB, HSL, CSS et JSON

Un pixel échantillonné peut être copié en HEX ou HEXA, RGB ou RGBA, et HSL ou HSLA. La palette dominante peut être copiée ou téléchargée en tant que variables CSS pour une page web ou en tant que jetons de couleur JSON pour un système de design. Les GIF animés utilisent l'image décodée par le navigateur, et les valeurs affichées peuvent différer d'une autre application lorsque la gestion du profil de couleur varie.

Traitement d'image local et privé

Le décodage de l'image, l'échantillonnage des pixels, l'agrandissement, l'extraction de la palette et l'exportation se font localement dans ce navigateur. L'outil n'a pas de champ d'URL distante et n'envoie pas le contenu de l'image, les noms de fichiers, les dimensions, les coordonnées, les couleurs exactes, les palettes ou les fichiers générés aux services d'analyse. Le remplacement d'une image libère l'URL de l'objet local précédent.

Foire aux questions

Comment sélectionner une couleur dans une image ?

Ouvrez, déposez ou collez une image, puis cliquez ou appuyez sur le pixel de votre choix. L'outil affiche les coordonnées exactes de la source et les valeurs HEX, RGB, HSL et alpha correspondantes.

Puis-je obtenir une palette de couleurs à partir d'une photo ?

Oui. Après le décodage de l'image, le navigateur extrait six couleurs dominantes déterministes. Choisissez n'importe quel échantillon, copiez la palette ou téléchargez les variables CSS ou les jetons JSON.

Les pixels transparents sont-ils pris en charge ?

Oui. L'échantillonnage exact des pixels préserve l'alpha et identifie un pixel entièrement transparent. L'extraction de la palette ignore les pixels entièrement transparents et pondère les pixels partiellement transparents par leur valeur alpha.

Mon image est-elle téléversée ?

Non. Votre image est décodée et inspectée localement dans ce navigateur. Il n'y a pas d'API de téléversement d'image ni de récupération d'URL distante, et les données de l'image sont exclues des analyses.

Pourquoi une autre application pourrait-elle afficher une couleur légèrement différente ?

Les navigateurs et les applications graphiques peuvent gérer différemment les profils de couleur intégrés, les images d'animation et l'arrondi de conversion. Cet outil indique les pixels produits par le décodeur de votre navigateur.