Color picker from image (eyedropper)
Open an image via the file picker, drag and drop or Ctrl + V, then click or tap the spot you want. The eyedropper shows the pixel’s color as HEX, RGB and HSL and finds the image’s main colors. Your image is never uploaded.
How it is calculated
Your image stays on your device
The eyedropper runs entirely in your browser: the image is decoded locally and drawn onto a canvas, and the color value is read straight from memory with getImageData(). There is no upload and no network request containing image data; once you close the page, the image is gone. Only for HEIC photos that your browser cannot open itself is a decoder loaded once from this website – your photo still stays local.
How to pick a color
- Choose an image, drag it into the box or paste it with Ctrl + V (a screenshot, for example).
- Click or tap the spot you want. With a keyboard, the arrow keys move the eyedropper pixel by pixel.
- Copy the HEX, RGB or HSL value. Your last eight picks stay on screen as swatches.
How the main colors are found
For the main colors, the image is scaled down to at most 200 pixels on its longest side. Every opaque pixel falls into one of 4,096 color bins (16 levels per channel). The most frequent bins that differ clearly from each other become up to six main colors; the percentage is their share of all opaque pixels. This is a simple quantization – good for an overview, but not a color measurement.
Why the value may differ from the original
- Color profiles: browsers convert images with an embedded profile (e.g. Display P3 from a smartphone) to sRGB. The eyedropper shows the sRGB value you would use in CSS – an image editor working in P3 will show different numbers.
- Compression: JPEG and WebP store colors lossily, so neighboring pixels in a “solid” area can differ by a few levels.
- Very large images (more than 4,096 pixels on a side) are scaled down for reading, which averages neighboring pixels. The position shown refers to the original image.
Frequently asked questions
Is my image uploaded or stored?
No. The image is processed only in your browser’s memory and is not sent anywhere. Nothing is saved to browser storage (localStorage) either.
How do I get the color code from a screenshot?
Take a screenshot (e.g. on Windows: Win + Shift + S; on a Mac: Cmd + Ctrl + Shift + 4 copies it to the clipboard), then click this page and press Ctrl + V (Cmd + V on a Mac). Click the spot you want and the HEX code appears right away.
Which image formats work?
JPG, PNG, WebP, GIF, BMP and AVIF, as long as your browser can open them, plus HEIC photos from an iPhone. For transparent images the eyedropper also shows the pixel’s opacity.
What can I do with the color next?
Copy the HEX value and convert it to other formats in the color converter, build matching colors in the color palette generator, or use the contrast checker to see whether text in that color is easy to read.
Sources and legal basis
- MDN Web Docs – CanvasRenderingContext2D: getImageData()
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
As of:
Related tools
- Color converter: HEX, RGB, HSL, HSV, CMYKConvert color codes: HEX to RGB, RGB to HEX, HSL, HSV, HWB and CMYK – type any format or use the color picker and copy the result, right in your browser.
- Color palette generatorBuild matching colors from one base color: complementary, analogous, triadic, square, split-complementary or monochrome – with HEX, RGB and HSL values.
- Color contrast checker (WCAG 2.2)Check the contrast between text and background colors: WCAG 2.2 contrast ratio with AA/AAA ratings for normal text, large text and UI components.
- BMI calculator (WHO categories)Calculate your body mass index in lb and ft/in or kg and cm. See your WHO category, from underweight to obesity class III, and the healthy weight range.
- BMR and daily energy needs calculatorCalculate your basal metabolic rate with the Mifflin-St Jeor equation and your total daily energy needs with FAO/WHO activity levels (PAL), in kcal and kJ.
- Body Fat Calculator (U.S. Navy Method)Estimate your body fat percentage from height, neck, waist and hip measurements using the U.S. Navy equations by Hodgdon and Beckett (1984). In inches or cm.