Color Picker from Image
Color picker from image: point at any pixel to see it magnified, click to keep its color and copy it as HEX, RGB, HSL or OKLCH. Free, and nothing is uploaded.
What is a color picker from an image?
A color picker from an image, usually called an eyedropper, reads the color of a single pixel in a picture and gives it back to you as a code. It's how you match a brand color off a logo or grab a shade from a photo for a slide.
This one reads exactly one pixel and doesn't average in its neighbors. The code you get is that dot's exact value as the browser decodes the file.
How to pick a color from an image
Load an image or drop one onto the panel, then point at it. A loupe pops up above the pointer showing the 15 by 15 pixels around it at eight times their size, with the center one outlined and its hex code underneath. Click to keep that color. On a phone, touch the picture, drag until the loupe shows the pixel you're after, and lift your finger.
The kept color is written out as HEX, RGB, HSL and OKLCH, and clicking any line copies it. Each kept color also lands in the list below, newest first, up to ten. A swatch there copies its hex code, and Copy all copies the whole list as one comma-separated line. To use the keyboard, focus the picture: the arrow keys move the loupe one pixel at a time (ten with Shift), and Enter keeps the color.
Tips for picking a logo's color, a skin tone and a sky
A logo's color: pick from the middle of a flat area, where the loupe shows a block of identical pixels. Edges blend with the background into an in-between color. From a PNG, that pick is exact. A JPG shifts it, by the amounts we measured further down this page.
A skin tone: go for a lit, matte part of the cheek or forehead, away from shine and shadow, and keep a pick from each. Then Color Mixer at 50 : 50 gives you the color halfway between, which is close to how the face reads from a distance.
A sky for a gradient: keep one pick near the top of the frame and another at the horizon. The first number on each OKLCH line is lightness, so you can see how far apart the two ends are before building the gradient.
How do HEX, RGB, HSL and OKLCH describe the same color?
A pixel is three numbers from 0 to 255, one each for red, green and blue. RGB writes them in decimal, as rgb(47, 124, 246). HEX writes those same three bytes in base 16, as #2f7cf6. HSL converts them into a hue angle, a saturation and a lightness, which are easier to tweak by hand.
OKLCH comes from Oklab, the color space Björn Ottosson published in 2020 so that equal steps would look like equal changes. It lists lightness as a percentage, then chroma, then hue in degrees. CSS accepts all four. A gray has no hue, so its OKLCH chroma and hue are both written as 0.
Why does another app show a different code for the same pixel?
A hex code names a color in sRGB, the space CSS defines it in. A picture, though, can be saved in a different color space with its profile attached, and Display P3, which is wider than sRGB, stores different numbers for the same color. We drew #2f7cf6 into a Display P3 PNG. The file holds #457aee, and in Chrome this picker reads #307cf6, one step off the original, because the browser converts the picture through its profile to sRGB before reading the pixel.
An app that reports the file's raw numbers will show #457aee, which is only right inside that P3 file. Saved the same way, #e63946 gets stored as #d4494c. When two tools disagree, check which space each one reports in. For a website or a stylesheet, use the sRGB code.
How close is a pick from a JPG logo?
Close in the middle of a flat area, and way off near its edges. We filled a #e63946 block, drew a 3 px line next to it on white, saved the picture as a JPG at quality 80 in Chrome and read it back. From eight pixels inside the block onward, no channel was more than 5 off, and the center read #e53945. Within three pixels of an edge, the error hit 48, with the outermost pixel at #b64d54. No pixel of the thin line got within 12 of the true value, and its middle read #d3414e.
So put the loupe well inside a solid area, keep two picks and compare them in the list, and don't ever take a brand color from small type or a hairline in a JPG. If you're after the main colors of a whole photo, Color Palette from Image averages groups of similar pixels instead. Pictures longer than 4096 pixels on a side get read scaled down to that size, because some browsers won't make a bigger canvas, so a pick on one of those blends a few neighboring pixels.