Color Picker from Image

How to find a color from an image

Load an image and move across it: the round loupe magnifies the pixels under the pointer about twelve times, so you can see exactly which one you are on, with the sampled area outlined in the middle. Click to pick. The color appears as a large swatch with its HEX, RGB, and HSL codes, ready to copy, and joins the list of picked colors underneath, which you can copy as a set of CSS custom properties for your stylesheet. With the keyboard, focus the image and use the arrow keys (hold Shift to move ten pixels at a time), then press Enter.

Why the sample size matters

A single pixel is often not the color you see. JPEG compression works on 8 × 8 blocks and stores color at half resolution, so flat areas are speckled with slightly different values and colors bleed across edges. The edges of text and shapes are anti-aliased, blended with the background so curves look smooth. A 3 × 3 sample, the default, averages nine pixels and smooths out most of that noise; 5 × 5 goes further for grainy photos. Choose 1 × 1 only when you need one exact pixel from a clean PNG or a flat UI screenshot.

Colors are reported in sRGB

Recent phones capture wide-gamut Display P3 color, but HEX codes and CSS rgb() values describe sRGB. The browser converts the image to sRGB as it reads it, so the codes you copy are web-ready and match what the same image shows on a web page. Very saturated reds and greens in a P3 photo may have no exact sRGB equivalent, and you get the nearest one.

From picked color to palette

To get the dominant colors of a whole photo rather than individual pixels, use the color palette extractor, which groups similar pixels and averages each group. To convert a code by hand, or add transparency, use the HEX to RGB converter. To understand why a picked brand color sometimes comes out a shade off, read how to get the hex code of a color from an image.