What is the tolerance setting for in All Colors mode?

Tolerance controls how aggressively similar colors are merged. At 0, only exact RGB matches are grouped — this can produce hundreds of unique colors from a photograph. Increasing tolerance merges visually similar colors into a single representative swatch. A value of 10-20 works well for photographs; 0-5 is best for logos and graphics with flat colors. The algorithm uses Euclidean distance in RGB color space to determine similarity.

Can I use this for web design and branding?

Yes. Use Pixel Picker to extract exact brand colors from a logo. Use All Colors mode to reverse-engineer a complete color palette from any reference image, mood board, or competitor screenshot. Copy the HEX codes directly into your CSS: color: #3B82F6; All processing happens locally — your images are never uploaded to any server.

Image Color Picker & Palette Extractor | Find All Colors in Images

🎨
Drop an image here

How to Pick and Extract Colors from Images

Upload Your Image

Drag and drop any image file. The image loads at full resolution for accurate pixel-level color sampling.

Pick or Extract

Pixel Picker: hover with magnifier and click to pick. All Colors: click Extract to list every unique color.

View Color Values

Colors display in HEX, RGB, and HSL with copy buttons. The all-colors grid shows every color as a swatch.

Copy & Use Anywhere

Copy color codes to clipboard. Paste into CSS, Figma, brand guidelines, or any design tool.

Frequently Asked Questions

How do I find the exact color of a pixel in an image?

Upload your image and use Pixel Picker mode. Hover over any area — the circular magnifier lens shows a 10× zoom centered on your cursor for precise pixel targeting. The selected color appears instantly in HEX, RGB, and HSL. Click to save it to your palette history. The Canvas API reads raw pixel data at the image's native resolution.

How do I extract ALL colors from an image?

Switch to the All Colors tab and click Extract All Colors. The tool samples every pixel in your image (scaled for performance), deduplicates identical colors, and displays them as a swatch grid sorted by frequency — most common colors first. Use the Merge Similar slider to group near-identical shades together. This is ideal for building a complete color palette from a reference image, mood board, or screenshot.

What does the Merge Similar tolerance do?

Tolerance controls how aggressively similar colors are grouped. At 0, only exact RGB matches are merged — a photo might produce 500+ unique colors. At 20-40, visually similar shades (e.g., slightly different pixels in a gradient or JPEG artifacts) are merged into one representative swatch. The algorithm uses Euclidean distance in RGB space: sqrt((r1-r2)² + (g1-g2)² + (b1-b2)²). Values ≤8 work well for logos and flat graphics; 16-32 is better for photographs.

What are HEX, RGB, and HSL color formats?

HEX (#3B82F6) — standard CSS/web format. RGB (59, 130, 246) — red, green, blue channels 0-255, used in design software and programming. HSL (217°, 91%, 60%) — hue angle, saturation, and lightness; more intuitive for creating color variations. All three describe the same color — just different notations for different use cases.

Can I use extracted colors in CSS or design tools?

Yes. Click any Copy button (Pixel Picker) or click any swatch (All Colors) to copy the HEX code to your clipboard. Paste directly into CSS: color: #3B82F6;. Use RGB values in design tools like Figma, Sketch, or Adobe XD. Use HSL to generate lighter/darker variations programmatically. All processing happens locally — your images are never uploaded to any server.

Image Color Picker & Palette Extractor — Two Tools in One

Our tool combines a pixel-precise color picker with a full-image palette extractor. The Pixel Picker gives you a magnifier lens (10× zoom) to target individual pixels and get exact HEX, RGB, and HSL values — ideal for sampling a specific color from a logo, UI mockup, or photo. The All Colors mode extracts every unique color from the entire image and displays them as a sortable swatch grid, sorted by how frequently each color appears. Together they cover the complete workflow of color extraction: from surgically precise single-pixel sampling to comprehensive palette discovery.

Pixel Picker Mode — Surgical Color Precision

The Pixel Picker reads the exact RGB value of the pixel under your cursor using the HTML5 Canvas API's getImageData() method. The circular magnifier shows an 11×11 pixel region at 10× zoom with a crosshair overlay, making it easy to target the exact pixel you want — even on high-resolution images where pixels are too small to see with the naked eye. Each selected color is simultaneously displayed in three formats:

HEX — The 6-character hexadecimal code (e.g., #3B82F6). Standard for CSS, HTML, and web development.
RGB — Red, Green, Blue values from 0-255. Used in graphic design tools and when you need per-channel precision.
HSL — Hue (0-360°), Saturation (0-100%), Lightness (0-100%). The most intuitive format for creating tints, shades, and color harmonies.

Click any color to save it to your palette history (up to 12 colors). Use the Generate Palette button to automatically extract the 5 most dominant colors via frequency analysis — a quick way to get the main color scheme of any image.

All Colors Mode — Complete Palette Extraction

While the Pixel Picker excels at sampling individual points, the All Colors tab answers the question: "What colors are actually in this image?" It systematically samples every pixel (at a reduced resolution for performance — typically 150×150 pixels, or 22,500 samples), deduplicates identical colors, and presents the results as a grid of color swatches with HEX codes. The colors are sorted by frequency — the most common colors appear first.

The Merge Similar tolerance slider is the key control. Without it, a photograph could produce hundreds of visually indistinguishable colors due to JPEG compression artifacts, subtle gradients, and sensor noise. Increasing the tolerance merges colors whose Euclidean distance in RGB space falls below the threshold. This gives you a clean, usable palette instead of an overwhelming list. For logos and flat-color graphics, keep tolerance at 0-5. For photographs, 16-32 typically produces the best results.

When to Use Each Mode

Pixel Picker: Extracting a brand color from a logo file, sampling a specific UI element from a screenshot, getting the exact skin tone from a portrait, matching text color to a background in a hero image.
All Colors: Building a complete color palette from a mood board or reference image, reverse-engineering the color scheme of a competitor's website, analyzing the color composition of your own design work, creating a brand color system from a key visual.
Both together: Use All Colors to discover the palette, then switch to Pixel Picker to verify specific color values at full resolution.

Privacy & Processing

All image processing happens entirely in your browser using the Canvas API. Your images are never uploaded to any server — the file stays on your device. The tool reads pixel data locally, performs all calculations in JavaScript, and displays results instantly. No accounts, no cloud processing, no data collection. You can use it offline once the page is loaded.