Color picker from image (eyedropper)
Color picker from image: open an image, click or tap a spot, and the eyedropper shows that pixel’s color – a sky-blue pixel, for example, reads as #87CEEB = rgb(135, 206, 235) = hsl(197, 71%, 73%). Open the image via the file picker, drag and drop or Ctrl + V; the tool also finds up to six main colors. Your image is never uploaded.
Source: MDN Web Docs – CanvasRenderingContext2D: getImageData(). Updated: .
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 (JPG, PNG, WebP, GIF, BMP, AVIF or HEIC, up to 50 MB), 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 by 1 pixel (10 with Shift) and Enter saves the color.
- Copy the HEX, RGB or HSL value. Your last eight picks stay on screen as swatches.
Worked example: from HEX to RGB and HSL
Say the eyedropper returns #3A7BD5, a medium blue. This is how the three values shown belong together (CSS Color Module Level 4 formulas):
- HEX to RGB: each pair is a hexadecimal number from 00 to FF. 3A = 3 × 16 + 10 = 58, 7B = 7 × 16 + 11 = 123, D5 = 13 × 16 + 5 = 213, so rgb(58, 123, 213).
- Scale to 0–1: 58 ÷ 255 = 0.2275, 123 ÷ 255 = 0.4824, 213 ÷ 255 = 0.8353. Largest value 0.8353 (blue), smallest 0.2275, difference 0.6078.
- Lightness: (0.8353 + 0.2275) ÷ 2 = 0.5314, so L = 53%.
- Saturation: 0.6078 ÷ (1 − |2 × 0.5314 − 1|) = 0.6078 ÷ 0.9373 = 0.6485, so S = 65%.
- Hue: blue is largest, so H = 60 × ((R − G) ÷ difference + 4) = 60 × (−0.4194 + 4) = 214.8°, rounded 215°. Result: hsl(215, 65%, 53%).
Is white text readable on it? The WCAG contrast ratio is (L1 + 0.05) ÷ (L2 + 0.05) with the relative luminance L. #3A7BD5 has a luminance of 0.1987, white has 1, so (1 + 0.05) ÷ (0.1987 + 0.05) = 4.22:1. That is below the 4.5:1 that WCAG 2.2 success criterion 1.4.3 (W3C Recommendation, current in 2026) requires for normal text, but above 3:1 for large text. Black text reaches 4.97:1, which is why the color swatch in the tool labels this blue in black.
Typical colors picked from photos
| Color | HEX | RGB | HSL | Contrast with white | Contrast with black |
|---|---|---|---|---|---|
| Sky blue | #87CEEB | 135, 206, 235 | 197°, 71%, 73% | 1.74:1 | 12.06:1 |
| Deep sea blue | #006994 | 0, 105, 148 | 197°, 100%, 29% | 6.09:1 | 3.45:1 |
| Grass green | #568203 | 86, 130, 3 | 81°, 95%, 26% | 4.58:1 | 4.59:1 |
| Sand / skin tone | #E0AC69 | 224, 172, 105 | 34°, 66%, 65% | 2.04:1 | 10.27:1 |
| Brick red | #B22222 | 178, 34, 34 | 0°, 68%, 42% | 6.68:1 | 3.14:1 |
| Sunset orange | #FF8C00 | 255, 140, 0 | 33°, 100%, 50% | 2.33:1 | 9.00:1 |
| Lavender | #967BB6 | 150, 123, 182 | 267°, 29%, 60% | 3.62:1 | 5.81:1 |
| Dark slate | #2F4F4F | 47, 79, 79 | 180°, 25%, 25% | 8.93:1 | 2.35:1 |
The contrast values come from the same luminance formula; check your own pairs, including text on a picked background, with the contrast checker. Need a name rather than a code? The table of 148 HTML color names lists every CSS color name with its HEX value.
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. To build a full scheme from one of them, use the color palette generator.
Common mistakes
- Picking at an edge: at the border between two areas, pixels are blends of both colors (anti-aliasing). Click in the middle of a flat area and compare two or three neighboring pixels with the arrow keys.
- Trusting one JPEG pixel: JPEG and WebP store colors lossily, so neighboring pixels in a “solid” area can differ by a few levels.
- Comparing with a P3 image editor: 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 editor working in P3 shows different numbers.
- Ignoring transparency: for semi-transparent pixels the tool shows the color without opacity plus a separate opacity value. On a page, the result depends on the background behind it.
- Assuming a color works for text: a pleasant photo color like #FF8C00 reaches only 2.33:1 on white – fine for a shape, too weak for body text.
Very large images (more than 4,096 pixels on a side) are scaled down for reading, which averages neighboring pixels; the position shown still refers to the original image. To turn the value into HSV, HWB or CMYK, use the color converter.
Frequently asked questions
How do I get the HEX code of a color in an image?
Open the image on this page and click the spot you want; the HEX code appears at once, for example #87CEEB for sky blue. Press Copy next to it to put it on the clipboard.
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?
Copy the screenshot to the clipboard and press Ctrl + V on this page (Cmd + V on a Mac). On Windows, Win + Shift + S copies a screenshot; on a Mac, Cmd + Ctrl + Shift + 4 does. Then click the spot you want.
Does it work on an iPhone or Android phone?
Yes. Open a photo from your gallery and tap the spot you want; HEIC photos from an iPhone are supported. Nothing leaves your phone.
Which image formats work?
JPG, PNG, WebP, GIF, BMP and AVIF up to 50 MB, as long as your browser can open them, plus HEIC photos. For transparent images the eyedropper also shows the pixel’s opacity.
What is the difference between HEX, RGB and HSL?
None in the color itself – all three describe the same sRGB color. RGB gives red, green and blue from 0 to 255, HEX the same values in hexadecimal (#FF0000 = 255, 0, 0), and HSL hue, saturation and lightness (here 0°, 100%, 50%).
Why does the picked color differ from Photoshop or my phone’s editor?
Usually because of the color space. The browser converts images to sRGB, while an editor may show values in Display P3 or another profile; JPEG compression adds small deviations of a few levels.
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: · Editorial policy
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)BMI calculator in lb and ft/in or kg and cm: your body mass index with WHO category on a colour scale, healthy weight range for your height and BMI Prime.
- Online metronomeFree online metronome: 20–300 BPM, time signatures from 2/4 to 12/8, accents per beat, subdivisions and tap tempo. Sample-accurate, no app needed.
- Wilks calculator with DOTS and IPF GL pointsWilks calculator for powerlifting: enter bodyweight and total to get Wilks, DOTS and IPF GL points side by side – classic, equipped and bench only.
- A1C calculator: convert A1C and average glucoseA1C calculator: convert A1C % to estimated average glucose (eAG) in mg/dL and mmol/L, to IFCC mmol/mol, or work back from your average blood sugar.
- Pregnancy weight gain calculatorPregnancy weight gain calculator: recommended gain by week and in total for your pre-pregnancy BMI, in pounds or kg, based on the IOM guidelines – twins too.
- Texas child support calculator 2026Texas child support calculator 2026: guideline support from gross pay – net resources after taxes, 20% to 40% by number of children, $11,700 cap.