Image Color Picker

A client sends you their logo as a PNG and says “match the brand blue.” You eyedrop it in Figma and get #2563EB. But the JPEG version gives you #2461E8 because of compression artifacts, and the print PDF shows Pantone 2728 C. You need the dominant color extracted from the actual image file — not an approximation from a compressed version — with HEX, RGB, and HSL values you can paste directly into CSS.

Why This Tool (Not the Browser Eyedropper or the Color Converter)

The browser’s built-in eyedropper (EyeDropper API) picks one pixel at a time and only gives you HEX. Figma’s eyedropper samples from the rendered canvas, which may include color management transforms. PureDevTools has a Color Converter for converting between HEX/RGB/HSL/OKLCH, but it doesn’t extract colors from images. This tool uploads an image locally, extracts the dominant color palette, and lets you click any pixel — all with HEX, RGB, and HSL output. Your image never leaves your browser.

What Is an Image Color Picker?

An image color picker is a tool that analyzes an uploaded image and extracts its most prominent colors. Designers, developers, and artists use color pickers to identify exact color values from photos, screenshots, artwork, brand assets, and UI mockups.

Whether you want to match a brand color from a logo, reproduce a palette from a photograph, or identify the precise hex code of a color in a design file — an image color picker gives you immediate, accurate results without leaving your browser.

How Dominant Color Extraction Works

This tool uses the median cut algorithm to find the dominant colors in an image:

1. Pixel sampling — The image pixels are sampled at regular intervals to keep processing fast even for large images.
2. Color space partitioning — The sampled pixels are grouped into buckets based on their RGB values. At each step, the bucket with the widest color range is split at the median along its dominant channel (red, green, or blue).
3. Representative colors — The average color of each bucket becomes one of the extracted palette colors.
4. Dominance ranking — Colors are sorted by bucket size, so the most prevalent color in the image appears first.

The result is a balanced palette that reflects the true color distribution of the image — not just the darkest or most saturated colors.

Click-to-Pick: Identify Any Pixel’s Color

In addition to automatic palette extraction, this tool lets you click directly on the image preview to identify the exact color of any pixel. The picked color’s HEX, RGB, and HSL values are shown instantly, making it easy to find precise shades anywhere in the image.

HEX, RGB, and HSL: Which Format Do You Need?

HEX (Hexadecimal)

HEX codes like #3b82f6 are the standard format for web development. They are used in HTML, CSS, SVG, and design tools like Figma and Sketch. Each pair of digits represents the red, green, and blue channels in base-16 notation.

RGB (Red, Green, Blue)

RGB values like rgb(59, 130, 246) specify color using three numeric channels, each ranging from 0 to 255. RGB is the native format of screens and is commonly used in CSS, canvas drawing, and image processing.

HSL (Hue, Saturation, Lightness)

HSL values like hsl(217, 91%, 60%) are intuitive for human perception. The hue represents position on the color wheel (0-360°), saturation represents color intensity (0-100%), and lightness represents brightness (0-100%). HSL is useful when you need to create color variations — adjusting lightness while keeping the hue constant, for example.

Privacy and Security

All image processing happens entirely in your browser using the HTML5 Canvas API. Your image is never uploaded to any server, never stored anywhere, and never leaves your device. This makes the tool safe to use with confidential design assets, proprietary screenshots, or personal photos.

Use Cases

Brand Color Extraction Upload a company logo to identify its exact brand colors in HEX format, ready to use in CSS variables or design tokens.

Photograph Color Grading Analyze a reference photograph to understand its dominant palette before applying color grading to your own images.

UI Design Consistency Click on specific elements in a UI screenshot to capture exact colors for use in design documentation or code.

Artwork and Illustration Reference Extract a color palette from artwork, paintings, or illustrations to use as inspiration or reference in your own designs.

Accessibility Review Identify foreground and background colors from screenshots to check WCAG contrast ratios with other tools.

How to Use This Tool

1. Upload an image — drag and drop a file onto the upload area, or click to open the file picker. JPEG, PNG, GIF, WebP, and SVG images are supported.
2. View the extracted palette — the tool automatically shows the top dominant colors with their HEX, RGB, and HSL values.
3. Click on the image — move your cursor over the image preview and click anywhere to pick the exact color at that location.
4. Copy any value — click the copy button next to any color value to copy it to your clipboard.
5. Adjust the palette size — use the count selector to extract between 5 and 10 dominant colors.

Frequently Asked Questions

Does this tool support transparent images (PNG with alpha)? Yes. Transparent or semi-transparent pixels (alpha < 50%) are excluded from color extraction, so the palette reflects only the visible content of the image.

How large an image can I upload? The tool works with any image your browser can load. For very large images (over 10 megapixels), pixel sampling is automatically increased to maintain performance without sacrificing accuracy.

Why does the extracted palette differ from what I see in the image? The median cut algorithm finds statistically dominant colors, which may not match the most visually striking colors. If a single bright color covers only a small area, it may be merged into a nearby bucket. Use the click-to-pick feature to identify specific colors precisely.

Is the HEX value always six digits? Yes. This tool always outputs 6-digit lowercase HEX codes (e.g. #3b82f6), which are compatible with all browsers, CSS preprocessors, and design tools.

Can I use the extracted palette in Figma or CSS? Yes. HEX values can be pasted directly into Figma’s color picker, CSS color properties (color, background-color, border-color, etc.), Tailwind’s arbitrary value syntax (text-[#3b82f6]), and most other design and development contexts.