Pipette couleur en ligne : trouvez le code HEX de n'importe quelle couleur

Ajoutez l'image, puis cliquez sur l'endroit voulu. Son code hexadécimal s'affiche aussitôt à côté d'un large échantillon de la couleur, prêt à être copié dans une appli de design, un site web ou un message.

Pour un pixel uni, le code correspond à sa valeur exacte. Il est lu depuis l'image en pleine taille, jamais depuis un aperçu réduit, donc le moindre détail d'une photo de 12 Mpx garde sa vraie couleur.

C'est important car les photos sont bruitées. Deux pixels côte à côte peuvent différer de quelques nuances, même dans un ciel bleu uni. La loupe repère le pixel central, pour que vous sachiez quel code vous obtiendrez avant de cliquer.

Dans une capture d'écran PNG, les pixels d'une zone unie comme un bouton partagent souvent le même code. Dans un JPG, choisissez loin des contours et du texte, où la compression altère le plus les couleurs.

Chaque code est une valeur sRGB, la norme pour les couleurs web. Certaines photos d'iPhone contiennent une gamme de couleurs plus large. Elles sont converties en sRGB, ce qui peut rendre une teinte très vive légèrement plus terne.

Sur Chrome, Edge ou Opera sur ordinateur, cliquez sur Choisir sur l'écran. Votre curseur devient une pipette qui lit n'importe quel pixel de votre écran, comme un site web, une application ou un document. Cliquez sur un point, et ses codes s'affichent ici comme pour toute autre sélection.

Firefox, Safari et les navigateurs mobiles ne peuvent pas lire l'écran de cette façon, le bouton n'apparaît donc pas. Faites plutôt une capture d'écran, collez-la ici avec Ctrl+V (Cmd+V sur Mac) et sélectionnez-y une couleur.

Sur téléphone, faites une capture d'écran, puis ajoutez-la depuis vos photos. Dans tous les cas, aucune extension de navigateur ni application à installer.

Chaque sélection affiche la même couleur en cinq formats, chacun avec son propre bouton de copie. Voici un pixel violet :

• HEX : #8338ec, le code court utilisé par la plupart des sites et applis de design
• RGB : rgb(131 56 236), les quantités de rouge, vert et bleu, de 0 à 255
• HSL : hsl(265 83% 57%), la teinte, la saturation et la luminosité
• HSV : teinte 265°, saturation 76% et valeur 93%, le modèle utilisé par de nombreuses applis de design dans leurs pipettes
• CMYK : 44% cyan, 76% magenta, 0% jaune et 7% noir, comme estimation pour l'impression

Les codes HEX, RGB et HSL sont du CSS valide, donc ils se collent directement dans une feuille de style. Si un pixel est partiellement transparent, comme sur le contour doux d'un logo PNG, les codes conservent aussi cette transparence, et la couleur est aussi fidèle que ce que le navigateur peut lire.

Trouver le nom d'une couleur

Chaque sélection reçoit aussi un nom. La pipette trouve le nom CSS le plus proche parmi les 148 disponibles et l'affiche sous la forme Proche de, par exemple ce pixel violet affichera Proche de : blueviolet. Utilisez ce nom pour décrire une couleur en mots, ou collez-le tel quel dans votre code CSS.

Quel code de couleur utiliser ?

Utilisez le HEX pour la plupart des usages, car les sites et la plupart des applis de design l'acceptent. Les autres codes aident dans certains cas :

• RGB lorsqu'une appli demande des valeurs séparées de rouge, vert et bleu
• HSL ou HSV pour éclaircir, assombrir ou adoucir une couleur à la main
• CMYK comme point de départ approximatif pour l'impression. Il vient d'une formule simple, pas d'un profil d'imprimante, demandez donc à votre imprimeur de confirmer la couleur finale

Toute image fonctionne, d'une photo de téléphone à une capture d'écran d'une page web. Usages courants :

• Captures d'écran : copiez une capture et collez-la ici pour obtenir une couleur d'un site ou d'une appli
• Logos : prélevez une couleur de marque dans un fichier de logo quand vous n'avez pas la charte graphique
• Photos : obtenez la couleur d'un ciel, d'une robe ou d'un mur peint à partir d'une image

Enregistrez les couleurs que vous choisissez

Chaque sélection rejoint Vos couleurs, la plus récente en premier, avec une capacité de 24 couleurs. Copiez ou supprimez une couleur, ou effacez toute la liste. Exportez ensuite la liste complète au format :

• Variables CSS à coller dans une feuille de style
• Un extrait de config Tailwind
• JSON avec le HEX, RGB et HSL de chaque couleur
• Une image PNG de vos échantillons à partager

La liste est enregistrée dans votre navigateur, elle reste donc présente après un rechargement ou l'ouverture d'une autre image. Elle ne contient que les codes de couleur, jamais vos images. Une fois la liste pleine, la couleur la plus ancienne disparaît.

Voir les couleurs principales de votre image

La pipette affiche aussi les 6 couleurs principales de votre image. Cliquez sur l'une d'elles pour l'ajouter à Vos couleurs. Pour obtenir les couleurs principales de toute l'image sous forme de palette, de 4 à 12 couleurs, ouvrez l'extracteur de palette.

Cette pipette couleur est gratuite, sans inscription ni compte, même pour exporter vos couleurs. Vos images s'ouvrent sur votre téléphone ou ordinateur et ne sont jamais envoyées en ligne. Elle fonctionne dans le navigateur, sans application à télécharger.

• Fonctionne sur téléphones, tablettes et ordinateurs. Sur écran tactile, la loupe se place au-dessus de votre doigt, qui ne cache donc jamais le pixel.
• Fonctionne aussi au clavier. Accédez à l'image par Tab, déplacez le réticule avec les flèches (Maj le déplace de 10 px), et appuyez sur Entrée pour sélectionner.
• Ouvre les fichiers JPG, PNG, WebP, AVIF, GIF, BMP, SVG, HEIC, HEIF et TIFF jusqu'à 50 Mo. Un GIF utilise sa première image.
• Les photos HEIC d'iPhone s'ouvrent telles quelles, sans conversion préalable.
• Fonctionne sur une image à la fois. Ouvrez-en une autre, et Vos couleurs reste inchangé.