How to Pick Colors from an Image
Load your image
Drag an image onto the drop zone or click Choose Image to browse. The file is read with the Canvas API right in your browser, so it stays on your device. JPEG, PNG, WebP, GIF, and BMP all work.
Hover and click to sample
In Pick mode the magnifier loupe shows a 6x zoomed view of the pixels under your cursor for precise targeting. Click to lock that pixel and read its exact HEX, RGB, and HSL values in the side panel.
Zoom, pan, and copy
Switch to Zoom or Pan mode, or scroll the wheel, to magnify up to 8x and reach fine detail. Use the per-format Copy buttons to send HEX, RGB, or HSL straight to your clipboard, or click any dominant-color swatch to inspect it.
The Three Interaction Modes
The picker has three modes plus mouse-wheel zoom. Pick mode reads pixels and shows the loupe, while Zoom and Pan let you navigate large or detailed images before sampling. Knowing which mode you are in tells you what a click will do.
| Mode | Cursor | Click action | Loupe shown | Best for |
|---|---|---|---|---|
| Pick | Crosshair | Samples the pixel and shows HEX, RGB, HSL | Yes (6x) | Reading a specific color |
| Zoom | Zoom-in | Magnifies toward the click point | No | Stepping into detail |
| Pan | Grab / grabbing | Drags the view, no sampling | No | Moving a zoomed image |
| Wheel scroll | Any mode | Zooms in or out toward the cursor | Follows mode | Quick zoom adjustments |
| Zoom buttons | n/a | Step zoom from center, or reset to 100% | No | Precise zoom control |
| Dominant swatch | n/a | Loads that palette color into the panel | No | Reading the auto palette |
Which Color Format Should You Use?
Use HEX
Choose HEX for CSS, design handoffs, and most web work. It is the most compact and widely recognized format, such as #1a73e8, and pastes cleanly into stylesheets and design tools.
Use RGB
Choose RGB when you need explicit 0-255 channel values, for example to tweak a single component or feed a color into code that expects numeric red, green, and blue inputs.
Use HSL
Choose HSL when you want to reason about hue, saturation, and lightness. It makes building tints and shades easy because you adjust lightness while keeping the same hue.
Use the dominant palette
Choose the dominant colors panel when you need a quick palette rather than one pixel. It surfaces the eight most common color groups so you can match a photo or build a theme fast.
Common Problems and Fixes
The picked color looks slightly off
JPEG compression can shift individual pixel values, so a flat-looking area may sample as several near-identical colors. Pick from a clean PNG or screenshot when you need an exact reference, or sample a few nearby pixels and compare.
I cannot reach a tiny detail
Stay in Pick mode and let the 6x loupe guide you, or switch to Zoom mode and click to magnify up to 8x. Use Pan mode or drag to reposition, then return to Pick mode to sample the exact pixel.
Copy button does not copy
Clipboard access needs a secure context and permission. If nothing copies, make sure the page is loaded over HTTPS and that your browser is not blocking clipboard access, then select the displayed value manually as a fallback.
Dominant colors are not what I expected
The palette is computed by sampling pixels, rounding each channel to reduce noise, and counting the most frequent groups. Large background or border areas can dominate the result, so crop to your subject first if you only want its colors.