UTILYARD
tools / image

Sélecteur de couleur depuis une image

Téléchargez une image et cliquez n'importe où pour choisir une couleur. Obtenez instantanément les valeurs HEX, RGB et HSL.

Déposez une image ou cliquez pour télécharger

PNG, JPEG, WebP, GIF

FAQ

Quelle est la différence entre HEX, RGB et HSL ?
Les trois représentent la même couleur dans des formats différents. HEX (#ff6b35) est utilisé en CSS et HTML. RGB (255, 107, 53) sépare les canaux rouge, vert et bleu — utile en code. HSL (teinte, saturation, luminosité) est intuitif pour ajuster les couleurs : changez la luminosité pour obtenir des teintes et des nuances, changez la saturation pour rendre les couleurs plus ou moins vives.
Mon image est-elle téléchargée quelque part ?
Non. L'image est dessinée sur un canevas local dans votre navigateur et les pixels sont lus directement. Rien n'est envoyé à un serveur.
Pourquoi la couleur semble-t-elle légèrement différente de ce que j'attendais ?
Les écrans affichent les couleurs différemment selon le profil colorimétrique et l'étalonnage. Le sélecteur lit la valeur brute du pixel — ce que vous voyez à l'écran dépend de vos paramètres d'affichage. Les captures d'écran peuvent également avoir un profil colorimétrique appliqué lors de la capture.

À PROPOS DE CET OUTIL

Upload any image and click anywhere on it to read the exact color at that pixel, returned instantly in HEX, RGB, and HSL formats. This works like the eyedropper tool found in design software, except it runs entirely in your browser with no software install. It's the fastest way to pull an exact brand color off a logo, match a color from a screenshot of someone else's website, or figure out what shade a particular pixel in a photo actually is when you can't just eyeball it. Because it reads real pixel data, the result is precise rather than an approximation from looking at a color swatch.

COMMENT UTILISER

  1. Upload the image containing the color you want to identify.
  2. Click on the exact pixel or area whose color you need.
  3. Read the resulting HEX, RGB, and HSL values shown on screen.
  4. Zoom in first if the target area is small, for a more precise click.
  5. Copy the color code you need and paste it into your design tool or CSS.

CAS D'USAGE COURANTS

  • A brand manager extracting the exact HEX code from a client's logo file to match it in a new design.
  • A web developer matching a background color from a competitor's screenshot to replicate a layout accurately.
  • A painter or crafter identifying the RGB value of a color in a reference photo before mixing physical paint.
  • A UI designer sampling multiple colors from a mood board image to build a cohesive palette.
  • Someone matching wall paint or a product color to a photo found online before ordering.

CONSEILS ET ERREURS COURANTES

  • Zoom into the image first if you're picking a color from a small or detailed area — a single misplaced click can grab an anti-aliased edge pixel instead of the intended color.
  • JPEG compression can slightly shift colors due to lossy artifacts, so for exact brand color matching, use a PNG or the original source file if you have one.
  • A gradient or photo rarely has one 'true' color — sample a few nearby pixels and average them if you need a representative shade rather than one exact point.
  • HSL values are often easier to adjust manually than HEX, since hue, saturation, and lightness are separated into distinct numbers.

AUTRES QUESTIONS

Why does the color I picked look slightly different when I use it elsewhere?
Screen calibration, color profiles, and JPEG compression artifacts can all cause small shifts — for exact brand matching, always confirm against an official brand guideline or a lossless source file.
What's the difference between HEX, RGB, and HSL, and why show all three?
They're just different ways of expressing the same color — HEX and RGB are common in web CSS, while HSL is often more intuitive for manually tweaking a shade lighter, darker, or more saturated.
Can I pick a color from a transparent area of a PNG?
Clicking on a fully transparent pixel typically returns no meaningful color, or shows the value with zero alpha, since there's no visible pixel data to sample there.
How accurate is this compared to a physical color-matching tool like a Pantone swatch?
It's pixel-accurate to the digital image file, but a screen's color rendering and a printed swatch can differ, so for print work treat this as a close reference rather than a guaranteed print match.

GUIDES ASSOCIÉS

Les codes couleur expliqués
Ce que signifient les codes couleur HEX, RGB et HSL, comment convertir entre eux et quand utiliser chaque format.
Lire →
Sélecteur de couleur depuis une image — UtilYard