Free Color Picker from Image
Pick any pixel from an image with a magnifier, copy HEX, RGB or HSL values and extract a dominant color palette in your browser.
Loading tool…
How to pick exact colors and a palette from an image
Upload or paste an image, hover to preview pixels in a zoomed magnifier and click to pick a color. Copy it as HEX, RGB or HSL and pull a palette of the image's dominant colors.
- Choose, drop or paste a PNG, JPEG, WebP, AVIF, GIF or BMP image, or load the example.
- Move the pointer over the image to preview pixels in the magnifier. With the keyboard, focus the image and use the arrow keys.
- Click, tap or press Enter to pick the pixel. Its HEX, RGB and HSL values appear with copy buttons and join your recent picks.
- Choose how many dominant colors to extract and click any swatch to copy it, or copy the whole palette as HEX or CSS variables.
- Where your browser supports it, use the screen eyedropper to pick a color from anywhere on your display.
When to pick colors from an image
Designers, developers and marketers often need a color they can see but do not have as a code. A client sends a logo as a screenshot, a mood board photo has the exact teal a brand wants, or a product shot needs a matching background. Picking the pixel gives you an exact HEX value you can paste into a design tool, a stylesheet or a slide template.
The palette feature answers a broader question: which colors make up this picture? It is useful for building a theme around a hero photo, checking whether an illustration stays within brand colors, or creating a quick color story for a presentation.
Everything happens in your browser, so you can use unreleased artwork or private photos without uploading them.
Worked example: from pixel to HEX, RGB and HSL
Suppose you click a pixel in a blue button and the image stores it as red 52, green 152 and blue 219. In hexadecimal, 52 is 34, 152 is 98 and 219 is DB, so the HEX code is #3498DB and the RGB value is rgb(52, 152, 219).
For HSL, the channels become fractions of 255: about 0.204, 0.596 and 0.859. Lightness is the average of the largest and smallest, (0.859 + 0.204) divided by 2, which is about 0.53 or 53%. The spread between them is 0.655, and saturation is that spread divided by 1 minus the absolute value of (2 times lightness minus 1), giving about 70%. Blue is the largest channel, so hue is 60 times ((red minus green) divided by the spread, plus 4), which comes to 204 degrees. The result is hsl(204, 70%, 53%).
Now imagine a flat logo where 70% of opaque pixels are pure red, 20% pure blue and 10% pure green. With six colors requested, the palette shows three swatches, #FF0000 at 70%, #0000FF at 20% and #00FF00 at 10%, because the image has no other distinct colors.
How the picker and palette work
When you open an image, the browser decodes it into a grid of red, green, blue and alpha values. The picker maps your pointer position to the matching pixel and reads its values, and the magnifier redraws an 11 by 11 pixel neighborhood at large size so you can land on the exact pixel you want.
The palette uses k-means clustering. It takes an even sample of up to 20,000 pixels, skips mostly transparent ones, chooses well spread starting colors and then repeatedly assigns each pixel to its nearest color and moves each color to the average of its group. After a few rounds the groups settle, and the tool reports each average color with its share of the sample.
Common mistakes when sampling colors
Picking on an edge is the most common error. Anti-aliased text and shapes blend the foreground and background, so a pixel on the border can be a mix of both. Zoom in with the magnifier and choose a pixel well inside the shape.
Another mistake is trusting a heavily compressed screenshot. JPEG and messaging apps can shift colors by several values, so ask for an original PNG or the brand guidelines when exact matching matters.
Finally, remember that a palette describes area, not importance. A small but vivid accent color may cover only 2% of the picture and be left out of a short palette, so increase the number of colors or pick it directly.
Useful tips and limitations
- Pick from the middle of a flat area rather than an edge, where pixels blend two colors together.
- Photos have noise, so neighboring pixels differ slightly; use the palette for an average brand-like color.
- Copy the palette as CSS variables to start a stylesheet with the image's colors already defined.
- Check text and background picks together in a contrast checker before using them on a website.
Common questions
Does the Color Picker from Image upload my picture?
No. The image is decoded and read in your browser, and the palette is calculated on your device. Nothing is sent to a server.
Why does the Color Picker from Image give a different HEX than my design file?
Exported images can be compressed or converted to another color profile, which shifts pixel values slightly. JPEG compression in particular changes colors near edges and in gradients.
How does the Color Picker from Image choose dominant colors?
It samples up to 20,000 pixels, ignores mostly transparent ones and groups similar colors with k-means clustering. Swatches are sorted by how much of the image each group covers.
Can the Color Picker from Image read colors outside the browser window?
Only through the screen eyedropper, which appears in browsers that support the EyeDropper feature, such as recent Chrome and Edge on desktop.
Does the Color Picker from Image handle transparent PNG files?
Yes. The picker reports the stored RGB values of any pixel, and the palette skips pixels that are mostly transparent.
What is the largest image the Color Picker from Image accepts?
Files up to 30 MB and 8,000 pixels per side, with no more than 12 million pixels in total.
Your input is processed in your browser without a ToolWorld Online account. Copy or download anything you want to keep before leaving the page.