Image Color Picker
Open an image, hover to magnify pixels, and copy HEX, RGB, and HSL. Nothing is uploaded.
Choose an image on this device, or load the example swatch.
Hover to magnify pixels. Click to lock HEX, RGB, and HSL.
Color formats
#6366F1
rgb(99, 102, 241)
hsl(239, 84%, 67%)
cmyk(59%, 58%, 0%, 5%)
Picked color
#6366F1
rgb(99, 102, 241)
hsl(239, 84%, 67%)
Why pick a color from an image?
A screenshot, a logo PNG, or a photo of a physical swatch is often the only source of a brand token. Hovering with a magnified pixel grid is faster than guessing HEX from a compressed JPEG, and clicking locks HEX, RGB, HSL, and an approximate CMYK string you can paste into CSS. This is not an operating-system eyedropper for other windows, and it is not the Color Picker pad — the source is a file you chose in this tab.
Your data stays private
The image is decoded and sampled in this browser. Nothing is uploaded or stored on a server.
About sampling HEX from a local image
Image Color Picker reads a JPEG, PNG, WebP, or other bitmap this browser can decode, then samples sRGB pixels in a canvas in this tab. Hover shows a magnified neighborhood so thin lines and anti-aliased edges are easier to judge. Click locks HEX, RGB, HSL, and a naive CMYK string. Nothing is uploaded to Toolora or a CDN. Use it when a mock, a screenshot, or a product photo is the source of truth — not when you already have a hex (that is Color Converter) and not when you want to invent a token on a saturation pad (that is Color Picker at /tools/color-picker).
Pixels come from what the browser decoder and canvas expose. Color profiles flatten to that sRGB-style readout; Display-P3 photos can shift. JPEG artifacts invent colors at edges. Transparent PNG pixels still have an RGB triple under the alpha — we report the RGB the canvas stored, not a composited backdrop unless you flattened the file first. HEIC depends on the browser. Animated GIF or WebP is a still frame of the decoder, not a timeline.
The magnifier is nearest-neighbor so you see the actual pixel, not a blurry upsample. Coordinates are image pixels, not CSS layout pixels. Huge photos can exhaust memory in the tab — compress or resize first on Image Compressor or Image Resizer if the picker feels slow. Crop on Image Cropper if you only needed a rectangle, then sample here.
Related: Color Picker for a pad, Color Converter for a string you already typed, Gradient Generator / CSS Shadow Generator / CSS Border Generator to consume the token, CSS Formatter to pretty-print a surrounding rule. Image Base64 embeds a file; it does not return a hex.
The URL is /tools/image-color-picker. This is not Figma, not Photoshop, not an ICC press pipeline, and not a screen capture of other apps. Close the tab to drop the bitmap from memory. Copy the token into your stylesheet or design tokens file and own it there.
How to pick a color from an image
Choose a file
Pick a JPEG, PNG, or WebP from this device, or load the example. Nothing is uploaded.
Hover to magnify
Move the pointer over the image. The loupe zooms the pixels under the cursor.
Click to lock HEX
Click a pixel to copy HEX, RGB, HSL, or all formats. The preview swatch follows the locked color.
Stay on this device
Close the tab to discard the bitmap. Color Picker is the pad if you did not have a photo.
Related tools
Color Picker
Pick a color and copy HEX, RGB, and HSL values in this browser.
Color Converter
Convert colors between HEX, RGB, and HSL. Type or paste below — all three formats update as you type.
Image Cropper
Crop an image with a drag rectangle and download the result locally. Nothing is uploaded.
Image Compressor
Shrink a JPEG, PNG, or WebP image in your browser with a quality control. Nothing is uploaded.
Gradient Generator
Build a CSS linear-gradient with two stops and a live preview. Copy the CSS locally.
CSS Formatter
Pretty-print or minify CSS in your browser. The result updates as you type.
Image Color Picker FAQ
No. The browser decodes the bitmap and samples pixels in a canvas in this tab. Close the tab to drop the file from memory. We do not store the photo on a CDN or an account.
Nearest-neighbor: each cell is a source pixel, not a smoothed zoom. Coordinates are image pixels, not CSS layout pixels. JPEG edges can invent colors; transparent PNG still has an RGB triple under the alpha.
No. The source is a file you chose on this page, or the example swatch. Color Picker at /tools/color-picker is the saturation pad if you want to invent a token. Color Converter if you already typed a hex.
No. CMYK here is a naive sRGB conversion for a quick paste, same as Color Picker. It is not ICC, P3, or LAB. Display-P3 photos can shift after the canvas flattens them. HEIC and animated WebP depend on the browser decoder — you usually get a still frame.