WebyTooly

Pipette à couleur d'image

Envoie une image et clique dessus pour lire la couleur exacte de ce pixel en HEX, RGB et HSL.

Espacio publicitario

Glisse ton image ici ou clique pour la choisir

Accepte JPG, PNG, WebP et GIF

Espacio publicitario

Comment on lit la couleur d'un pixel

À l'envoi, l'image est dessinée une seule fois dans un canvas caché à sa taille d'origine. Au clic, nous convertissons la position du pointeur dans l'élément affiché en coordonnées du canvas et demandons ce seul pixel avec getImageData.

HEX = #RRGGBB avec chaque canal en base 16

Le navigateur renvoie quatre valeurs de 0 à 255 (rouge, vert, bleu et alpha). Le HEX n'est que ces trois canaux en hexadécimal, et le HSL se calcule à partir du canal maximum et minimum.

L = (max + min) ÷ 2

La couleur affichée est celle du pixel exact, sans moyenne avec les voisins : sur un JPG bruité, deux pixels contigus peuvent donner des valeurs légèrement différentes.

S = (max − min) ÷ (1 − |2L − 1|)

Exemple pratique

En cliquant sur un bleu corporate, tu obtiens #3366FF, soit rgb(51, 102, 255) et hsl(225, 100%, 60%) : la même couleur écrite de trois façons.

Questions fréquemment posées

Puis-je l'utiliser sur des captures d'écran ?
Oui. C'est le moyen le plus rapide de récupérer la couleur exacte d'une marque depuis une capture ou la photo d'une affiche.
Pourquoi la couleur ne correspond-elle pas à ce que je vois ?
Cela peut venir du profil de ton écran ou d'un profil colorimétrique intégré à l'image. La valeur donnée est celle du pixel tel que le navigateur le décode.
Quel format de couleur utiliser en CSS ?
Le HEX est le plus courant, le RGB permet d'ajouter de la transparence avec rgba(), et le HSL est le plus pratique pour créer des variantes plus claires ou plus foncées.
Ça marche avec des images transparentes ?
Oui, et nous indiquons en plus la valeur du canal alpha du pixel choisi.

Calculatrices connexes