Pick Colors from Any Image

When you load an image, the tool reads pixel data from the picture in your browser. Each pixel is a tiny square of color, usually stored as RGBA (red, green, blue, and transparency). Clicking (or tapping) the image samples the color at that exact pixel and converts it to formats you can copy—HEX, RGB, HSL, and more.

Use the image source panel to get a picture onto the canvas. Each path is suited to a different workflow—mix and match as you like.

Photos and screenshots are often scaled to fit the layout. The loupe magnifies the area under your pointer so you can see individual pixels and avoid accidentally sampling a blended edge or anti-aliased stroke.

Adjust zoom when you need either a wider context or a tighter view. For crisp logos and line art, zoom in until the pixel grid is obvious, then click the center of the shape you care about.

The palette builder groups similar pixels so you get a small set of representative colors instead of thousands of near-duplicates. Tolerance controls how "close" colors must be to merge: lower values keep shades distinct; higher values collapse noisy gradients and compression into broader swatches.

Under the image workspace, the same expandable sections as the main color picker help you go from a sampled swatch to a full design workflow: harmonies and variations, multi-format conversion, WCAG contrast checks, and color-vision simulation.

What you see on screen is only as faithful as the image file. Heavily compressed JPEG photos introduce blocky artifacts and false colors at edges—prefer PNG or WebP for UI captures when possible.

Very large images are downscaled for performance; sampling still uses the displayed pixels, so for critical brand work use a crop or export at a reasonable resolution rather than a multi-megapixel photo shrunk in the browser.

Display calibration, night mode, and wide-gamut monitors can shift appearance. For handoff to developers, always copy the numeric values (HEX/RGB) rather than relying on a visual match alone.