Color Eyedropper
Pick a colour from anywhere on your screen or from any image, with a magnifying loupe for exact pixels, and get it as HEX, RGB, HSL, OKLCH, CMYK and its nearest CSS name.
How to Use
- Choose Screen to pick from anywhere on your display (Chrome, Edge and Opera), or Image to drop a photo, screenshot or logo.
- On an image, move the pointer to see a magnified loupe of the pixels underneath, then click to pick.
- Set the sample size to 3 × 3 or 5 × 5 to average a small area, which gives the true colour of a photo instead of one noisy pixel.
- The colour appears in every common format; click any value to copy it. Or type a colour into the box to inspect it.
- Each pick is added to the history below it, ready to copy as a list.
This browser cannot pick from the whole screen (it needs Chrome, Edge or Opera on a computer). Take a screenshot and use Image instead.
Worked Example
Pick the orange of a product in a noisy photo (the “Noisy photo” sample).
With a sample size of 1 pixel, clicking the same patch twice can give two different colours, because each pixel carries random noise: two neighbouring pixels read #CB6E32 and #CC6C2D, while the patch’s true colour at that spot is #C76C2B.
With 5 × 5, the 25 pixels under the pointer are averaged and the noise largely cancels: the same two spots give #C56E2C and #C86C2D, within a few levels of the true colour. The loupe shows the 11 × 11 pixels around the pointer so you can see the noise you are averaging away.
Show Work
Formulas
From Paint Programs to the Browser
The eyedropper has been part of paint programs since MacPaint’s successors in the 1980s, and every design tool since has one. On the web, a page could only read pixels from images it drew itself, so picking from the rest of the screen needed a browser extension or a separate app.
The EyeDropper API, shipped in Chrome 95 in 2021, lets a page ask the user to pick any pixel on screen. The browser shows its own magnifier and only tells the page the one colour chosen, so a site can never read the screen by itself.
About This Tool
This tool picks colours from the screen with the EyeDropper API or from an image with a pixel loupe, mapping each click back to the full-size image and optionally averaging a 3 × 3 or 5 × 5 area. The colour is shown as HEX, RGB, HSL, HSV, OKLCH, Lab and CMYK with its nearest CSS name and the more readable text colour.
Images are read with the same engine as the Universal Image Converter, so almost any format works, and nothing is uploaded.
Related tools: Palette from Image, Universal Color Converter, and Contrast Checker.
Frequently Asked Questions
Which browsers can pick from the whole screen?
Screen picking uses the EyeDropper API, available in Chrome, Edge and Opera on desktop since 2021. Firefox and Safari do not offer it yet; there, take a screenshot and use Image mode, which works in every browser.
Why does the colour from a photo look different from what I expected?
Photos are made of slightly different pixels, with noise, shading and compression artefacts, so a single pixel is rarely the colour you see. Set the sample size to 3 × 3 or 5 × 5 to average the area under the pointer. Picking from a screenshot of a website gives exact values, because those pixels are flat.
Are the picked colours exact?
From an image file, yes: the values are the pixel values stored in the image. When the image has an embedded colour profile, the browser converts it to sRGB first, as it does for display. Screen picking returns the colour as your screen shows it, which can differ slightly on wide-gamut or colour-managed displays.
Which format should I use?
HEX for CSS and most design tools, RGB for code that wants numbers, HSL to tweak lightness by hand, OKLCH for modern CSS when you want even adjustments, and CMYK only as a rough starting point for print, since true print colour depends on the press and paper.
Is my image uploaded?
No. The image is decoded and sampled in your browser; nothing is sent to a server.
How do I use the Color Eyedropper?
Simply type your numbers and read the result, which refreshes the instant you change something. There is nothing to submit and nothing to wait for.
Is it free? Does it work without internet?
Yes to both. It is free with no sign-up, and once the page has loaded it keeps working even with no internet.
Where does my data go?
Nowhere — every calculation runs on your own device. Nothing you enter is uploaded, logged, or stored.
Common Use Cases
Matching a website colour
Pick a button colour straight from another site on screen and paste its HEX into your CSS.
Colours from a logo
Drop the logo file and click each part to get the exact brand colours; flat artwork gives exact values.
Real colours from photos
Average 5 × 5 pixels on a product photo for a colour that represents the product rather than one noisy pixel.
Checking contrast
Pick a background and see at once whether white or black text reads better on it, with the WCAG ratio.
Last updated: