Pipette de couleur d'image en ligne
Déposez une image, survolez pour prévisualiser n'importe quel pixel, et cliquez pour saisir ses valeurs HEX, RGB et HSL — le tout dans votre navigateur. L'image ne quitte jamais votre appareil.
La pipette de couleur d'image décode votre image sur un canvas et échantillonne les pixels entièrement dans votre navigateur. L'image que vous déposez et les couleurs que vous choisissez ne quittent jamais votre appareil et ne sont pas téléversées vers ArrayKit.
Ouvrir le convertisseur de couleurs CSS
À propos de Pipette de couleur d’image
La pipette de couleur d'image transforme toute image en échantillonneur de couleurs. Déposez ou choisissez une photo, un logo, une capture d'écran ou une maquette de conception, puis déplacez votre curseur dessus pour prévisualiser le pixel sous le réticule, et cliquez pour verrouiller cette couleur exacte. Chaque échantillon est affiché en HEX, RGB et HSL à côté d'un aperçu de couleur en direct, si bien que vous pouvez le déposer directement dans du CSS, un jeton de conception, ou un pot de peinture. Une bande de couleurs récentes garde vos derniers choix à portée de main pour construire une palette, et chaque valeur a son propre bouton de copie. Les pixels transparents conservent leur canal alpha, si bien que les superpositions PNG se relisent en rgba et #rrggbbaa. Elle est conçue pour les designers, les développeurs front-end, et toute personne qui reproduit une couleur de marque depuis une image. L'image est décodée sur un canvas et échantillonnée sur votre appareil — elle n'est jamais téléversée.
Fonctionnalités
- Survolez une image pour prévisualiser la couleur du pixel en direct, puis cliquez pour la verrouiller
- Affiche HEX, RGB et HSL pour chaque pixel échantillonné à côté d'un aperçu en direct
- Boutons de copie par valeur pour la notation HEX, RGB et HSL dont vous avez besoin
- La bande de couleurs récentes retient vos derniers choix pour construire une palette
- Le canal alpha est préservé — les pixels PNG translucides se relisent en rgba et #rrggbbaa
- Accepte les images PNG, JPEG, WebP, SVG, GIF, AVIF, BMP et ICO
- Le curseur en réticule et un fond à damier rendent les zones transparentes évidentes
- S'exécute entièrement dans votre navigateur — l'image est échantillonnée sur votre appareil
Comment utiliser Pipette de couleur d’image
- Cliquez sur la zone de dépôt ou faites glisser un fichier image dessus
- Déplacez votre curseur sur l'image pour prévisualiser la couleur du pixel
- Cliquez sur un endroit pour verrouiller cette couleur et révéler ses valeurs HEX, RGB et HSL
- Copiez la notation dont vous avez besoin, ou rouvrez un choix antérieur depuis Couleurs récentes
Exemple
Entrée
Sampled pixel: R 37, G 99, B 235 (opaque)
Sortie
HEX #2563eb
RGB rgb(37, 99, 235)
HSL hsl(221, 83%, 53%)
Un clic sur un bouton bleu transforme le pixel en valeurs de couleur CSS prêtes à coller.
Erreurs courantes et dépannage
- La couleur choisie semble légèrement différente de l'image source. — Le JPEG et le WebP utilisent une compression avec perte, si bien que les aplats peuvent varier d'une nuance entre pixels voisins. Échantillonnez quelques points proches, ou utilisez un export PNG de la conception pour des couleurs de marque exactes.
- Une zone transparente renvoie rgba(0, 0, 0, 0) au lieu d'une couleur. — Ce pixel est entièrement transparent, si bien qu'il n'y a pas de couleur à lire. Survolez une partie remplie de l'illustration ; le fond à damier marque les régions transparentes.
- Un SVG ou une image haute résolution affiche une couleur du mauvais endroit. — La pipette échantillonne le pixel sous le réticule à la résolution propre de l'image. Zoomez dans votre navigateur pour un contrôle plus fin, ou cliquez précisément sur le bord que vous voulez.
Foire aux questions
- Comment choisir une couleur dans une image ?
- Déposez ou choisissez l'image, survolez-la pour prévisualiser la couleur du pixel, puis cliquez sur l'endroit exact que vous voulez. La pipette affiche instantanément les valeurs HEX, RGB et HSL de ce pixel avec un aperçu, et chaque valeur a un bouton de copie.
- Puis-je obtenir le code HEX d'une couleur dans une capture d'écran ?
- Oui. Chargez la capture d'écran comme n'importe quelle image, survolez pour trouver la nuance que vous voulez, et cliquez dessus. Le code HEX apparaît à côté des valeurs RGB et HSL afin que vous puissiez le copier dans du CSS ou un outil de conception.
- La pipette conserve-t-elle la transparence des images PNG ?
- Oui. Quand un pixel échantillonné n'est pas entièrement opaque, le canal alpha est reporté : le RGB s'affiche en rgba(...) et le HEX gagne une huitième paire alpha (#rrggbbaa), correspondant à la façon dont le pixel se rend réellement.
- Depuis quels formats d'image puis-je choisir des couleurs ?
- Tout ce que votre navigateur peut décoder sur un canvas — PNG, JPEG, WebP, SVG, GIF, AVIF, BMP et ICO. Pour des couleurs de marque exactes, préférez un PNG sans perte, puisque le JPEG et le WebP peuvent décaler un aplat d'une nuance.
- Puis-je enregistrer plusieurs couleurs depuis une même image ?
- Oui. Chaque clic ajoute la couleur à la bande Couleurs récentes, jusqu'à une douzaine de choix. Cliquez sur n'importe quel aperçu là pour le rouvrir, puis copiez son HEX, RGB ou HSL pour assembler une palette à partir de l'image.
- Mon image est-elle téléversée quand je choisis une couleur dedans ?
- Non. La pipette de couleur d'image dessine votre image sur un canvas et lit les pixels entièrement sur votre appareil. L'image n'est jamais envoyée à ArrayKit ni à aucun serveur, si bien que les maquettes et photos privées restent locales.
Outils associés
Tous les outils ArrayKit