Lorsqu’un design utilise une couleur à réemployer, l’estimer à l’œil est lent et imprécis. Un sélecteur de couleur depuis une image lit le pixel choisi et renvoie ses valeurs HEX, RGB et HSL. Ouvrez le sélecteur de couleur depuis une image, chargez une photo ou une capture, cliquez sur la couleur et copiez la valeur nécessaire.
L’outil lit l’image dans le navigateur, accepte les fichiers JPG, PNG et WebP et permet d’agrandir la zone lorsque le point visé est difficile à atteindre. Vous pouvez cliquer ou utiliser le clavier ; une seule nuance reste active à la fois.
Que fait un sélecteur de couleur depuis une image ?
L’outil échantillonne un pixel sélectionné et le convertit dans des formats courants :
- HEX est pratique pour CSS, le web et les tokens de design.
- RGB convient aux workflows qui utilisent les canaux rouge, vert et bleu.
- HSL facilite le travail sur la teinte, la saturation et la luminosité.
Cliquez sur un autre point pour remplacer l’échantillon actif, puis copiez la nouvelle valeur. Cela permet d’assortir un arrière-plan, de vérifier une photo produit ou de transformer une couleur de capture en valeur réutilisable.
Comment choisir une couleur dans une image en ligne
1. Choisissez une source nette
Utilisez la photo originale ou une capture haute résolution lorsque c’est possible. Une miniature compressée, un aperçu flou ou un filtre de couleur peut modifier la valeur exacte à reproduire.
2. Ouvrez le sélecteur de couleur en ligne
Ouvrez le sélecteur de couleur depuis une image et choisissez un fichier JPG, PNG ou WebP. L’image est traitée dans le navigateur et n’a pas besoin d’être envoyée à un serveur pour l’échantillonnage.
3. Cliquez sur le pixel cible
Cliquez sur la zone dont vous voulez connaître la couleur. Sur un fond uni, éloignez-vous des bords et des ombres. Pour un produit ou une illustration, choisissez une zone représentative plutôt qu’un reflet, une brillance ou une bordure anticrénelée. Agrandissez l’image si nécessaire.
4. Copiez le code couleur
Copiez HEX pour une couleur CSS, ou utilisez RGB et HSL selon le prochain outil ou système de design. Collez la valeur dans le code, le fichier de design, les notes de marque ou une variable, puis vérifiez-la dans son contexte réel.
Comment obtenir un échantillon plus fiable
La lumière, les ombres, les reflets, la compression et l’écran influencent la couleur visible. Un pixel donne la valeur de ce point, mais ne retrouve pas nécessairement la couleur de marque originale modifiée par la photo ou l’étalonnage.
Pour un graphisme uni, choisissez une zone centrale au remplissage régulier. Pour une photo, prenez plusieurs échantillons sur le même matériau et comparez-les. Évitez les bords, le texte anticrénelé et les surfaces brillantes.
Si l’image est trop grande, utilisez le redimensionneur d’image pour créer une copie de travail et gardez l’original. Utilisez le recadreur d’image pour retirer les bordures gênantes avant l’échantillonnage.
HEX, RGB ou HSL : quelle valeur choisir ?
HEX pour les styles web
HEX est compact et courant en CSS, dans les tokens et la documentation. Une valeur comme #2F80ED peut être collée directement dans une feuille de style.
RGB pour les canaux et la transparence
RGB expose séparément les canaux rouge, vert et bleu. Il est utile pour comparer les canaux ou compléter la valeur en rgba() avec une transparence séparée.
HSL pour les variantes contrôlées
HSL sépare teinte, saturation et luminosité. Il devient plus simple de créer un fond plus clair, une bordure plus douce ou un état hover plus sombre.
Erreurs fréquentes lors du choix d’une couleur
Échantillonner une ombre au lieu de la couleur de base
Une ombre peut rendre une surface neutre grise ou une couleur beaucoup plus sombre. Choisissez une zone éclairée et représentative et comparez des pixels proches.
Choisir un pixel de bord
Les bords contiennent parfois des pixels mélangés par l’anticrénelage ou la compression. Déplacez le point vers le centre de l’objet ou du fond.
Échantillonner une capture avec un filtre d’écran
Le mode nuit, le HDR, les profils couleur et les extensions peuvent modifier l’apparence. Utilisez l’original ou une capture non modifiée lorsque la couleur est importante.
Confondre un échantillon avec une palette complète
Le sélecteur identifie le point choisi et conserve une nuance active, mais ne déduit pas automatiquement toute la palette. Mesurez les couleurs clés séparément et notez leur rôle.
Oublier le contexte de sortie
Une couleur peut changer d’apparence à côté d’un autre fond ou sur un autre écran. Testez la valeur dans la page, le composant, la publicité ou le fichier de design réel et vérifiez le contraste.
Workflow simple de transmission design
- Gardez la photo ou la capture originale comme référence.
- Échantillonnez séparément le fond, le sujet, le texte et l’accent.
- Notez chaque valeur HEX avec un rôle précis.
- Utilisez RGB ou HSL lorsque l’implémentation le demande.
- Vérifiez le contraste, les états hover et la taille d’affichage finale.
Utilisez le compresseur d’image après l’échantillonnage. Convertissez la copie finale avec PNG vers WebP si la destination le permet, mais gardez la source pour les futures vérifications.
FAQ
Comment choisir une couleur dans une image ?
Ouvrez le sélecteur de couleur depuis une image, choisissez un fichier JPG, PNG ou WebP, cliquez sur le pixel voulu et copiez sa valeur HEX, RGB ou HSL.
Comment trouver un code HEX dans une image ?
Chargez l’image dans le sélecteur HEX depuis une image, cliquez sur un pixel représentatif et copiez la valeur HEX affichée.
Puis-je choisir une couleur dans une capture d’écran ?
Oui. Une capture se traite comme toute image compatible. Pour un résultat proche, utilisez une capture non compressée et évitez bords, ombres et filtres d’écran.
Puis-je choisir plusieurs couleurs ?
Oui, mais un seul échantillon est actif à la fois. Cliquez chaque pixel cible et copiez ou notez sa valeur avant de passer au suivant.
Le sélecteur est-il privé ?
L’échantillonnage se fait dans le navigateur après le chargement de la page. L’image n’a pas besoin d’être envoyée à un serveur pour lire le pixel.
Continuer avec les outils image
Utilisez le sélecteur de couleur depuis une image pour obtenir une valeur depuis une photo ou une capture. Le recadreur d’image retire les bordures, le redimensionneur prépare une copie de travail et le compresseur d’image prépare le fichier final.