How to use the Color Picker from Image
- Load a picture. Press Open image, drag a file onto the preview, or paste a screenshot with Ctrl+V (⌘V on a Mac). Until you do, a sample painting is loaded so you can try the controls. Your image never leaves your device — it is decoded and sampled inside the browser.
- Choose a sample size. 1×1 reads a single pixel; 3×3 and 5×5 average 9 or 25 pixels around the point. The loupe outlines exactly which pixels are included.
- Hover, then click. The loupe magnifies the 15 × 15 pixels under your cursor and shows the live HEX value. Click to pick: the color appears on the right in HEX, RGB, HSL, HSB and approximate CMYK, along with the nearest named CSS color. On a phone, touch and drag, then lift your finger to pick.
- Fine-tune with the keyboard. Click or tab into the image, then use the arrow keys to move one pixel at a time (hold Shift for ten). Enter adds the current color to your palette.
- Save what you found. Every click lands in Your palette, which this browser remembers between visits. Copy the HEX list, copy CSS variables, or Download .gpl for GIMP, Krita, Inkscape or Aseprite. In Chrome and Edge, Pick from screen lets you sample any pixel on your display, outside the page too.
Why one pixel is rarely the color you want
Zoom far enough into any photo or scan and the “flat” blue of a sky turns out to be a mosaic. Camera sensor noise, paper texture and film grain all push neighboring pixels a few levels apart. Pick a single pixel and you get one random member of that crowd; average a 3 × 3 block and you get something much closer to what your eye reads as the color.
JPEG files add their own wobble. The format compresses in 8 × 8 pixel blocks, and most JPEGs also store color at half resolution in both directions — one color sample per 2 × 2 block of pixels — while keeping full detail in brightness. Near edges that produces fringes and blocky color shifts that are invisible at normal size but very visible to a 1-pixel eyedropper.
Edges are the third trap. An anti-aliased line drawn in #1D1C1A over white contains a dozen grays that were never in the artist’s palette. If you are matching a line color, pick from the thickest part of the stroke, not its edge, and check the loupe to make sure the sample box sits entirely inside it.
That is why painting apps offer averaged samples: Photoshop’s eyedropper has 3 × 3 and 5 × 5 average options for exactly this reason. Use 1×1 for pixel art, flat vector screenshots and UI mockups, where every pixel is intentional, and 3×3 or 5×5 for photos, scans and painted textures.
Which format to copy
| Format | Example | Where it goes |
|---|---|---|
| HEX | #E07A4F |
Procreate and Photoshop hex fields, Canva, CSS, brand guides |
| RGB | rgb(224, 122, 79) |
CSS, Figma, game engines, code |
| HSL | hsl(18, 70%, 59%) |
CSS when you want to tweak lightness by hand |
| HSB / HSV | hsv(18°, 65%, 88%) |
The Hue, Saturation and Brightness sliders in Procreate and Photoshop |
| CMYK ≈ | cmyk(0%, 46%, 65%, 12%) |
A rough starting point for print — not a press value |
The CMYK figure uses the simple textbook formula: K is one minus the brightest channel, and each ink is what is left after that. Real print conversions depend on the paper, the ink set and an ICC color profile, so a printer will give you different numbers for the same orange. When the exact print color matters, convert in your layout software with the printer’s profile and order a proof.
Color profiles: why your pick may differ from Photoshop
When a browser draws an image for sampling, it converts the colors to sRGB, the standard color space of the web. For ordinary sRGB images — almost everything online, and most exports — the numbers you read here are the file’s own values. Photos from recent phones are often saved in Display P3, a wider color space, and the conversion changes them: a vivid red can read differently here than in Photoshop, which reports values in the document’s own P3 space when you keep the embedded profile.
If you need the untouched numbers stored in the file, tick Read raw file values and the image is reloaded without color conversion, in browsers that support it. For colors you will use on the web, leave it off: the converted value is what a browser will actually display.
Tips from practice
Pick from mid-tones, not highlights. On a glossy apple the highlight is nearly white and the core shadow nearly black; the local color lives in the lit half just before it turns into shadow.
Squint first, then sample. Decide which area reads as the color you want, then average a 5×5 sample there. It mirrors how you mix paint by eye.
Name colors to remember them. The nearest CSS name, with its ΔE distance, is a quick label: under about 2 the two are hard to tell apart, above 10 it is only a family resemblance. For poetic names that suit a portfolio, try the Color Palette Name Generator.
Turn a handful of picks into a scheme. Five colors pulled from a reference photo make a strong start for a painting palette; feed them into the Image to Palette Extractor if you want the dominant colors chosen for you.