Pipette à couleurs

Besoin de connaître la couleur exacte d’un logo, d’une photo ou d’une capture d’écran ? Importez l’image, survolez l’endroit qui vous intéresse et cliquez. Le code de la couleur part directement dans le presse-papiers, dans le format de votre choix : HEX, RVB, HSL, HSV ou LCH. Rien à installer, et l’image ne quitte jamais votre ordinateur.

Comment trouver le code couleur d’une image

1. Importez une image. Glissez-la dans la fenêtre ou cliquez sur « Parcourir les fichiers ». La pipette accepte JPG, PNG, WebP et GIF.
2. Choisissez le format. Au-dessus de l’image, indiquez dans quelle notation vous voulez copier la couleur. HEX convient généralement pour le web, RVB pour les logiciels graphiques. L’outil retient votre choix.
3. Survolez la couleur. Une loupe apparaît près du curseur avec les pixels environnants agrandis, et le code de la couleur en dessous.
4. Cliquez. Le code est dans le presse-papiers et la couleur rejoint l’onglet Couleurs choisies. Il ne reste qu’à la coller où vous en avez besoin.

Envie d’essayer une autre image ? Déposez-la directement sur l’image actuelle, ou supprimez-la avec l’icône de corbeille.

Ce que fait cette pipette à couleurs en ligne

Une loupe qui montre chaque pixel

Une pipette classique n’affiche que la couleur sous le curseur, et viser le bord fin d’une lettre devient une loterie. Notre loupe agrandit une zone de 11 × 11 pixels autour du curseur et encadre celui du milieu. Vous voyez exactement ce que vous allez cliquer avant de cliquer.

Zoom jusqu’au pixel

Avec les boutons plus et moins, ou la molette de la souris et la touche Ctrl, vous zoomez jusqu’à 64 fois. Avec la grille activée, les contours des pixels apparaissent, ce qui permet de viser juste sur des icônes, du pixel art ou du petit texte.

La couleur de l’original, pas d’une miniature

Beaucoup d’outils en ligne réduisent d’abord l’image et lisent la couleur dans cet aperçu, où les pixels voisins se mélangent. Notre pipette travaille sur l’image en pleine résolution (jusqu’à 4096 px sur le côté le plus long), donc vous obtenez la vraie couleur du pixel.

Copie en un clic

Pas besoin de sélectionner du texte ni de retaper des chiffres. Chaque clic sur l’image copie le code dans le format choisi. Si vous avez besoin de la même couleur dans une autre notation, le détail de la couleur affiche les cinq formats, chacun avec son propre bouton de copie.

Palette de couleurs dominantes

Dès que l’image est chargée, l’outil trouve jusqu’à huit couleurs qui dominent l’image et les affiche dans l’onglet Couleurs dominantes. Les teintes quasi identiques sont fusionnées, la palette n’affiche donc pas cinq variantes de gris, et les zones transparentes d’un PNG sont ignorées. Cette palette sert de base pour un site web, une présentation ou des publications sur les réseaux sociaux. Pour vérifier si les couleurs gardent assez de contraste sans leur teinte, testez la conversion de l’image en niveaux de gris.

Les couleurs choisies toujours sous la main

Chaque couleur sur laquelle vous cliquez est enregistrée dans l’onglet Couleurs choisies (les 24 dernières). Vous pouvez ainsi comparer plusieurs endroits de l’image et y revenir à tout moment. Sur un grand écran, le panneau des couleurs se trouve juste à côté de l’image.

À quoi sert de trouver le code couleur d’une image

• Web et applications : le client a envoyé le logo seulement en JPG et vous avez besoin de la couleur exacte de la marque pour votre CSS. Si vous voulez aussi une version avec fond transparent, utilisez le suppresseur d’arrière-plan.
• Graphisme et réseaux sociaux : vous voulez que le texte d’une publication s’accorde avec la photo. Prenez la couleur directement dedans.
• Présentations et documents : réglez les couleurs du logo de l’entreprise dans PowerPoint, Google Slides ou Canva grâce au HEX ou au RVB.
• Contrôle qualité d’une maquette : sur une capture d’écran, vérifiez qu’un bouton de l’application utilise bien la couleur prévue par le design. Vérifiez ensuite la taille des visuels exportés avec l’analyseur de dimensions d’images.
• Décoration et mode : vous avez une photo de tissu ou de mur et cherchez une teinte proche. Le code sert de point de départ pour chercher dans un nuancier.

Les formats de couleur que renvoie la pipette

• HEX (#1373b6) : la notation utilisée en HTML, en CSS et dans la plupart des outils graphiques.
• RVB (rgb(19, 115, 182)) : la part de rouge, de vert et de bleu, chacune entre 0 et 255. Le fonctionnement du mélange additif des couleurs est expliqué sur Wikipédia.
• HSL (hsl(205, 81%, 39%)) : teinte, saturation et luminosité. Pratique pour préparer une variante plus claire ou plus foncée.
• HSV : teinte, saturation et valeur, comme dans le sélecteur de couleur de Photoshop ou de GIMP. La différence entre HSL et HSV est détaillée sur Wikipédia.
• LCH : un modèle qui correspond à la façon dont l’œil humain perçoit les couleurs. Il se copie dans la syntaxe que le CSS moderne comprend (voir la documentation MDN).

La pipette trouve la couleur d’une image. Pour l’affiner, la convertir dans d’autres formats ou lui trouver des teintes assorties, continuez vers le sélecteur de couleurs.

Questions fréquentes

Mon image est-elle envoyée sur un serveur ?

Non. L'image est chargée et traitée directement dans votre navigateur, elle n'est jamais transmise nulle part, et rien n'est conservé une fois la page fermée. Vous pouvez donc utiliser la pipette même sur des documents internes ou des maquettes non publiées.

Comment trouver le code HEX d'une couleur sur une photo ?

Importez la photo, laissez le format HEX sélectionné au-dessus de l'image et cliquez sur l'endroit dont vous voulez la couleur. Le code, par exemple #75dab2, est aussitôt dans le presse-papiers.

Pourquoi la couleur d'une photo diffère-t-elle de la réalité ?

L'appareil photo influence les couleurs par l'éclairage, la balance des blancs et la compression. La pipette renvoie exactement la couleur enregistrée dans le fichier. Sur une photo, cliquez donc plusieurs endroits et comparez-les dans l'onglet Couleurs choisies. Si vous mélangez une peinture à partir du code, prenez-le comme une indication.

La pipette fonctionne-t-elle sur mobile ?

Oui. Sur un écran tactile, touchez un endroit de l'image et le code se copie comme sur ordinateur. La loupe près du curseur ne s'affiche pas sur mobile, donc zoomez d'abord sur l'image pour les détails fins.

Quelle est la différence entre HEX et RVB ?

Les deux notations décrivent la même couleur. RVB l'exprime avec trois nombres de 0 à 255, HEX écrit ces mêmes nombres en base hexadécimale après un signe #. Par exemple, rgb(255, 87, 51) correspond à #ff5733.

Comment obtenir toute une palette de couleurs à partir d'une image ?

Ouvrez l'onglet Couleurs dominantes. Vous y trouverez jusqu'à huit couleurs principales de l'image, et cliquer sur l'une d'elles copie son code.