Comment utiliser un sélecteur de couleurs pour rechercher des couleurs à partir de n'importe quel pixel
Réponse rapide
Pour choisir une couleur : ouvrez le sélecteur de couleurs, téléchargez une image (ou utilisez la pipette d'écran), cliquez sur le pixel dont vous souhaitez la couleur et les valeurs HEX, RGB et HSL apparaissent. Tout le traitement s'effectue localement : votre image n'est jamais téléchargée.
Introduction
Un sélecteur de couleurs (également appelé pipette) vous permet de trouver la couleur exacte d'un pixel. Ceci est essentiel pour faire correspondre les couleurs de la marque, échantillonner les couleurs à partir d’images ou créer une palette de couleurs à partir d’une photo. Les sélecteurs de couleurs basés sur un navigateur peuvent lire les couleurs des images téléchargées à l'aide de Canvas API, et l'EyeDropper API intégré au navigateur peut sélectionner les couleurs n'importe où sur l'écran. Ce guide vous montre comment utiliser un sélecteur de couleurs dans votre navigateur.
Pas à pas
-
Ouvrez l'outil Sélecteur de couleurs
Accédez à la page de l'outil Sélecteur de couleurs. L'outil prend en charge la sélection des couleurs à partir des images téléchargées et, dans les navigateurs pris en charge, depuis n'importe où sur l'écran via EyeDropper API.
-
Choisissez votre source
Pour choisir parmi une image : téléchargez ou glissez-déposez une image. Pour effectuer une sélection à partir de l'écran (Chrome/Edge uniquement) : cliquez sur le bouton « Choisir à partir de l'écran », puis cliquez n'importe où sur votre écran.
-
Cliquez sur le pixel à échantillonner
Pour la sélection d'image, déplacez votre curseur sur l'image et cliquez sur le pixel dont vous souhaitez la couleur. L'outil lit la couleur des pixels sur le canevas à l'aide de getImageData(). Une loupe peut vous aider à sélectionner le pixel exact.
-
Lire les valeurs de couleur
L'outil affiche la couleur sélectionnée aux formats HEX, RGB et HSL, ainsi qu'un échantillon. Les valeurs se mettent à jour instantanément lorsque vous déplacez le curseur.
-
Copiez la couleur
Cliquez sur Copier à côté de n'importe quel format pour copier la valeur de couleur dans votre presse-papiers. Utilisez-le dans votre CSS, votre outil de conception ou votre application.
Exemples
Choisissez une couleur de marque à partir d'un logo
Saisir: logo.png, cliquez sur le pixel de couleur de la marque
Sortir: HEX : #1a73e8, RGB : rvb(26, 115, 232), HSL : hsl(217, 89 %, 51 %)
Échantillonner une couleur à partir d'une photo
Saisir: photo.jpg, cliquez sur un pixel du ciel
Sortir: HEX : #87ceeb, RGB : rvb(135, 206, 235), HSL : hsl(197, 71 %, 73 %)
Choisir à partir de l'écran (Chrome/Edge)
Saisir: Cliquez sur « Choisir à partir de l'écran », puis cliquez sur n'importe quel pixel de votre écran.
Sortir: HEX valeur de ce pixel, par exemple #ff5733
Problèmes courants
- L'anticrénelage mélange les couleurs sur les bords : les pixels sur le bord entre deux couleurs sont un mélange. Échantillonnez au centre d’une zone de couleur unie pour plus de précision.
- EyeDropper API non pris en charge : le sélecteur d'écran nécessite Chrome 95+ ou Edge 95+. Firefox et Safari ne le prennent pas en charge ; utilisez plutôt la méthode de téléchargement d’image.
- La compression JPEG modifie les couleurs — La compression avec perte JPEG modifie légèrement les couleurs des pixels. Pour les couleurs exactes de la marque, utilisez un PNG ou la source vectorielle originale.
- Différences de profil de couleur : les images avec des profils de couleur intégrés (ICC) peuvent s'afficher différemment de ce que suggèrent leurs valeurs brutes de pixels.
Conseils
- Utilisez la loupe pour sélectionner le pixel exact : avec un zoom élevé, vous pouvez sélectionner un seul pixel précis plutôt qu'un bord fusionné.
- Échantillonnez plusieurs pixels d'une zone unie et faites-en la moyenne si la compression a introduit du bruit : cela donne une couleur plus représentative.
- Utilisez EyeDropper API (Chrome/Edge) pour sélectionner les couleurs de n'importe quelle application, pas seulement les images dans le navigateur.
- Utilisez notre sélecteur de couleurs pour un échantillonnage instantané et privé des couleurs : vos images ne quittent jamais votre navigateur.