Pipette à couleurs d'image

Comment fonctionne la pipette

Importez une photo, une capture d'écran ou un logo et cliquez n'importe où. L'outil lit ce pixel précis et affiche sa couleur en HEX (par exemple #1e88e5) et en RGB (rgb(30, 136, 229)). Le bouton Copier place le code HEX dans le presse-papiers. Au chargement, le pixel central est lu d'office pour que vous ayez tout de suite une valeur.

Chaque couleur cliquée s'ajoute à une rangée d'échantillons récents (jusqu'à huit) : vous pouvez tester plusieurs zones — un bouton, un fond, un titre — et comparer avant de choisir. L'image est lue dans un canvas de votre navigateur et n'est jamais envoyée en ligne.

HEX, RGB et HSL en clair

Les trois décrivent la même couleur à l'écran, simplement écrite autrement.

• HEX — #RRGGBB, trois paires de chiffres hexadécimaux pour le rouge, le vert et le bleu, de 00 à ff. C'est ce qu'attendent CSS, Figma, Canva, les thèmes WordPress et la plupart des champs « couleur de marque ».
• RGB — les trois mêmes canaux en nombres décimaux de 0 à 255. #1e88e5 et rgb(30, 136, 229) sont identiques. Pratique dans le code, dans Office et dans les logiciels à curseurs.
• HSL — teinte (0–360° sur le cercle chromatique), saturation et luminosité en pourcentage. La pipette n'affiche pas le HSL, mais n'importe quel outil de design ou le CSS convertit le HEX instantanément. Le HSL est idéal pour obtenir une version plus claire ou plus foncée de la couleur relevée : on garde la teinte, on ne change que la luminosité.

Relever des couleurs sur une capture d'écran

Pour reprendre la couleur d'une appli, d'un site ou d'une image de vidéo, faites une capture (Windows : Win + Maj + S ; Mac : Cmd + Maj + 4 ; téléphone : marche + volume bas, ou bouton latéral + volume haut sur iPhone) et déposez-la ici.

Conseils pour un résultat juste :

• Cliquez sur des zones unies. Visez le centre d'un bouton, pas son bord : les bords sont mélangés au fond (anticrénelage) et donnent une teinte intermédiaire.
• Les photos ont du grain. Les pixels voisins d'une photo diffèrent légèrement ; testez plusieurs points et gardez le plus représentatif.
• Les captures peuvent fausser les couleurs. Mode nuit, Night Shift, HDR ou écran calibré peuvent teinter la capture. Désactivez-les si la couleur exacte de la marque compte.
• Les JPG trop compressés dérivent. Un JPG réenregistré de nombreuses fois présente des pâtés près des contours. Utilisez le PNG ou le SVG d'origine du logo si vous l'avez.
• Les zones transparentes n'ont pas de vraie couleur ; cliquer dessus donne du noir (#000000). Cliquez sur la partie visible du logo.

Vérifiez le contraste avant d'utiliser la couleur

Une couleur agréable peut rester illisible en texte. Les règles d'accessibilité (WCAG) demandent un contraste d'au moins 4,5:1 entre un texte normal et son fond, et 3:1 pour les grands textes et les icônes. Gris clair sur blanc ou bleu moyen sur bleu foncé échouent souvent.

Une fois les couleurs du texte et du fond relevées, collez les deux codes HEX dans n'importe quel vérificateur de contraste. Si le rapport est trop faible, foncez le texte ou éclaircissez le fond — jouer sur la luminosité en HSL permet de corriger sans quitter la charte.

Usages courants

• Retrouver la couleur d'un logo reçu en simple image.
• Reproduire la couleur d'un bouton ou d'un fond de site dans votre propre maquette.
• Construire une palette à partir d'une photo pour des slides, des posts ou une planche déco.
• Choisir le fond de l'icône Apple touch dans le générateur de favicon.

Outils liés

• Détourez d'abord le sujet, puis relevez sa couleur sans le fond : Supprimer l'arrière-plan.
• Isolez une petite zone pour cliquer plus précisément : Rogner une image.
• Besoin de l'image elle-même en code pour le CSS ? Image en Base64.