Color Picker from Image & Screen

Pick a color from your screen, an image or a pasted screenshot, pixel-exact with a loupe. Get HEX, RGB, HSL, OKLCH and Display P3 that convert back exactly.

Runs in your browser
Your data never leaves your browser
Free · No Sign-Up

Click to start the screen picker, then choose one pixel in any window. Esc cancels. The EyeDropper API returns an sRGB color; the button appears only when this browser provides the API. Open or drop an image, or paste a screenshot with Ctrl+V / ⌘V. Formats depend on browser support. Images above 16,777,216 pixels are scaled before sampling; the image note shows the working size. Opens the system color dialog. Changing its color updates the fields; confirming a change adds the color to Recent colors. Clears the color fields and closes the image. Pending image loads and screen picks are canceled. To remove saved colors, use Clear beside Recent colors.

Click “Pick from screen”, then click any pixel in any window. Esc cancels.

HEX Type or paste HEX, rgb(), hsl(), oklch(), color(display-p3 …), or a CSS color name into any field. The other formats update for each valid color and keep its transparency. While the value is not a color, the other fields are emptied, Copy is off and the status line says what is wrong.

Copy beside a format copies that field as text. Copy all under Recent colors copies one HEX value per line.

Drop an image here or paste a screenshot Ctrl+V / ⌘V pastes from the clipboard. PNG, JPEG, WebP, GIF, SVG, and anything else this browser can display.

RGB

HSL

OKLCH

Display P3

Recent colors The most recent 16 distinct HEX colors are kept. Click a swatch to apply it again. Clear beside this list removes saved colors; typed input alone does not add a color.

Colors you pick appear here.

The last 16 picks and the sample size are kept in this browser (localStorage). Images are never stored.

Read the full guide Pick Any Pixel on Your Screen with the EyeDropper API

Examples, details and FAQ Worked examples, how it compares with other tools, and answers to common questions.

Examples

Check a brand color in a screenshot. A product page shows a blue button. Paste the screenshot, click the button, and the tool reads #1a73e8. The other fields read hsl(214.1, 81.7%, 50.6%), oklch(57.4% 0.195 257.9) and color(display-p3 0.218 0.444 0.879). Each of these converts back to #1a73e8. Pickers that round HSL to whole numbers give hsl(214, 82%, 51%), which is #1c74e9. The test reads every printed value back: 636,056 colors on a 3-step grid of the sRGB cube with the tool’s own parser, and 30,000 random colors with culori.

Find the HEX for a Tailwind v4 color. Tailwind CSS 4.3 defines --color-blue-500: oklch(62.3% 0.214 259.815) in its theme.css. Paste that value into the OKLCH field. HEX shows #2b7fff, and the tool warns that the color is outside sRGB. HEX, RGB and HSL can only hold sRGB, so each channel is clipped. The OKLCH and Display P3 fields keep the real color.

Pick one pixel, not a blend. A test image of 2000 × 400 px has 1-px columns that alternate between #ff0000 and #0000ff. The tool reads the image at full resolution. A point sample gives #ff0000 or #0000ff, and the status line names the pixel, for example “x 1000, y 200”. The 3 × 3 average gives rgb(85, 0, 170): one red column and two blue ones. Use the average on photos and gradients, where single pixels are noisy.

Read a transparent pixel. In a PNG, a pixel of #1a73e8 with alpha 10 out of 255 came back from Chromium’s canvas as rgba(26, 128, 230, 0.039). A canvas stores color multiplied by alpha, so a faint pixel loses precision. The tool shows the alpha in every format and adds a note instead of hiding it.

Which color you get

Screen. The EyeDropper API returns an sRGB hex string (MDN). On macOS, Chromium converts the sampled display color to sRGB and then to 8 bits per channel (skia_utils_mac.mm, CGColorRefToSkColor). On a wide-gamut display, a color outside sRGB comes back clipped.
Images. The tool draws the image into an sRGB canvas and reads the pixel. CSS Color 4 says that browsers must apply an image’s embedded color profile (§3.4) and must treat untagged images as sRGB (§3.5). Browsers that can create a Display P3 canvas (Chrome and Edge 92+, Safari 15.2+, but not Firefox, per MDN compatibility data) give the tool a second readout. When that pixel is outside sRGB, the tool shows the warning and keeps the P3 value. For example, P3 red color(display-p3 1 0 0) is oklch(64.86% 0.2995 28.96), but its HEX can only be #ff0000.
Conversions use the matrices and transfer functions of the CSS Color 4 sample code. The test compares them with colorjs.io to within 10⁻⁹.

When the browser cannot pick from the screen

Browser	EyeDropper API
Chrome, Edge (desktop)	95+. Not on Linux Wayland
Opera (desktop)	81+
Firefox, Safari, Chrome on Android, iOS browsers	No

Source: MDN browser-compat-data 8.1.3 (2026-09-24). Without the API, take a screenshot and paste it into the tool. On a Mac, add Control to the shortcut, for example Control-Shift-Command-4, to copy the screenshot to the clipboard instead of saving a file (Apple). On Windows, PrtSc puts the whole screen on the clipboard. Windows + Shift + S opens Snipping Tool, and Ctrl+C copies the snip (Microsoft). The operating system also has a screen picker: Digital Color Meter on macOS, and on Windows PowerToys Color Picker (Win + Shift + C, copies HEX by default).

How it compares

We tested on 2026-10-01 in a Chromium desktop browser with the same files. htmlcolorcodes.com drew the 2000 × 400 striped image into a 1536 × 307 canvas and reported #90006F. imagecolorpicker.com drew it at 529 × 105 and reported #7f007f at every point we clicked. Neither color occurs in the image. For the transparent pixel, imagecolorpicker.com showed #1a80e6 and an rgba() value without an alpha. eyedropper.online works only with the EyeDropper API. With the API removed, its button opened an alert that said to use Chrome, Edge or Opera. This tool reads full-resolution pixels, keeps the alpha and flags colors outside sRGB. When you need the contrast of two picked colors, use the Color Contrast Checker. For a whole palette from one image, use the Image Color Palette Extractor.

Limits

Images larger than 16,777,216 pixels are scaled down before picking, because iOS limits a canvas to 4,096 × 4,096 (MDN). The tool shows the new size.
Each screen pick needs a click. The API rejects open() without a user action (NotAllowedError), and it samples one pixel per call.
Image formats are the ones your browser can display. HEIC opens only in Safari.
Output formats are HEX, RGB, HSL, OKLCH and Display P3. For CMYK, Lab or HSV, convert the HEX in the Color Converter.

FAQ

Why is there no “Pick from screen” button in Firefox, Safari or on my phone?

Screen picking uses the EyeDropper API, which only Chrome, Edge and Opera on desktop provide (Chrome and Edge 95+, Opera 81+; not on Linux Wayland). In other browsers the tool hides the button and makes “Open image” the main action: take a screenshot, paste it with Ctrl+V or ⌘V, and click the pixel.

Is the picked color the same value Photoshop or Figma shows?

For an untagged image or an sRGB image, yes: the tool reads the pixel as the browser draws it in sRGB. For a wide-gamut image the browser converts to sRGB first, so HEX, RGB and HSL can be clipped. The tool then shows a warning and keeps the real color in the OKLCH and Display P3 fields.

Why does the HSL value have decimals?

HSL rounded to whole numbers usually converts back to a different color. #1a73e8 becomes hsl(214, 82%, 51%), which is #1c74e9. The tool writes the fewest decimals that convert back to the exact same HEX, so you can paste any field into CSS and get the same pixel.

Is my image uploaded or stored?

No. The image is decoded and read in a canvas on your device, and nothing is sent to a server. This browser's localStorage keeps two things: the last 16 picked HEX values and the sample size (Point, 3 × 3 or 5 × 5). Use Clear next to Recent colors to remove the colors.

Can it read the color of a transparent PNG pixel?

It shows the alpha value and writes HEX with an alpha byte, for example #1a80e60a. A canvas stores colors premultiplied by alpha, so the RGB of a nearly transparent pixel is approximate. Fully transparent pixels have no color, and the tool says so.