Image Color Picker User Guide

Open Image Color Picker. It is free on every plan. The visible workspace has three tabs: Workbench, Analysis and Actions.

The tool is designed for local analysis. Uploaded image files are decoded with browser APIs, drawn to an HTML canvas and sampled in memory. The runtime has zero imports and zero network calls of its own. If you paste a remote image URL, the browser loads that image directly; the remote server must allow cross-origin canvas reads or the tool cannot sample its pixels.

• Best for: brand palette extraction, editorial color audits, product image sampling, UI moodboards, accessibility color checks and palette documentation.
• Input formats: any browser-readable image type accepted by image/*, including PNG, JPEG, WebP, GIF and BMP.
• Output formats: copied HEX, copied CSS variables, copied JSON, downloaded JSON, SVG and CSV.

In the Workbench tab, use the image source panel on the left. You can drag a file onto the drop zone, click the drop zone to open the file picker or paste a URL into the URL field and press Load URL. The file label and image metadata update after the browser decodes the image.

Large images are scaled to fit the analysis canvas with a maximum working size of about 800 by 500 canvas pixels. This keeps interaction fast while still spreading samples across the full image. The original pixel dimensions are still shown in the metadata line.

If a remote image fails with a CORS message, download the image and load it as a local file. This is a browser security limit, not a palette extraction failure.

The extraction engine samples opaque pixels from the canvas, filters optional near-black and near-white pixels, then builds representative colors. Flat graphics with no more unique sampled colors than the requested cluster count keep exact colors; richer images use K-means++ clustering and optional merge cleanup.

• Clusters: controls how many representative palette colors are requested. Use fewer clusters for brand summaries and more clusters for detailed photo analysis.
• Quality: changes the sample grid. Fast modes skip more pixels. Detailed modes sample more densely. The runtime caps the working sample set around 50,000 samples.
• Merge threshold: combines visually close clusters after extraction. Raise it when a photo creates many near-duplicate swatches.
• Ignore dark: skips pixels with very low WCAG relative luminance.
• Ignore light: skips pixels with very high WCAG relative luminance.

Most controls re-run extraction when changed after an image is loaded. The Re-extract button is useful after changing several settings at once.

The preview canvas doubles as an eyedropper. Hover over the image to preview the pixel color, then click the image or press Pin to add that exact color to the picked strip. Pinned colors are separate from extracted clusters, so you can keep exact logo, product or accent pixels even if the clustering engine groups nearby colors together.

The live preview reports HEX, RGB, HSL, WCAG relative luminance and canvas pixel coordinates. The picked strip stores up to 24 unique colors. Clicking a pinned swatch copies its HEX value.

• Transparent pixels with alpha below the runtime threshold are ignored for pinning.
• Duplicate pins are skipped automatically.
• Use pins for exact sampling; use extracted swatches for representative palette structure.

After extraction, the Workbench shows a preview canvas, palette count, sample count, swatches, tone bands, WCAG contrast pairs and color harmony suggestions.

For accessibility decisions, use the WCAG pairs as a first pass and then test the exact foreground and background colors in the dedicated contrast tools. Image-derived palettes can include colors that are beautiful as accents but weak as text/background pairs.

The Analysis tab renders four canvas charts after extraction. Each chart is drawn from the current palette and rerenders on resize.

• Cluster Population: bar chart of relative cluster share.
• Color Distribution: donut chart showing palette share by extracted color.
• HSL Scatter: hue versus saturation plot with dot size by population share.
• Luminance Bars: sorted WCAG relative luminance values from dark to light.

The page includes a fullscreen chart overlay. Use the fullscreen button beside a chart, or the double-click behavior provided by the chart helper, when you need more room to inspect small population differences or dense hue clusters.

The Take it with you panel on the Workbench (Hex, CSS, JSON, SVG) and the Actions tab (JSON and CSV downloads, Copy page link) turn the current palette into reusable formats for design systems, documentation, code and research notes.

• Copy HEX List: copies a comma-separated list such as #D3AF37, #735244.
• Copy CSS Variables: copies a :root block with --palette-01, --palette-02 and so on.
• Copy JSON: copies full palette analysis, including image metadata, settings, sample count, RGB, HSL, Lab, LCH, luminance, population and pins.
• Copy Page Link: copies the current route for sharing the tool, not the image data.
• Download JSON: saves palette-analysis.json.
• Download SVG: saves a palette strip with labels as palette.svg.
• Download CSV: saves palette.csv with one row per extracted palette color.

Keyboard shortcuts work when focus is not inside an input: J copies JSON, H copies the HEX list, R resets the workspace and E re-extracts the palette.

Batch Color Analysis accepts hex colors separated by new lines, spaces, commas or semicolons. It is useful when you already have a candidate palette and want the same analysis table without loading an image.

The output table reports swatch, HEX, RGB, HSL, CIE Lab, LCH, WCAG relative luminance and tone classification for each valid color. Three-digit hex values are expanded to six digits. Eight digit inputs are accepted by the validator, but the RGB parser uses the leading six color digits for the visible color analysis.

#D3AF37
#735244
#4A90D9
#E84855
#3BB273

Image Color Picker is registered in the Library system as a palette tool. A saved palette keeps the extracted colors and pinned colors, and a save made in the picker also brings back its tool state through the public AAImagePicker runtime hook. Source image pixels are not stored as a large binary payload; reload the original image if you need to continue eyedropper sampling.

• Save for brand work: keep image-derived colors as palette assets.
• Save for comparison: preserve palette and history state for later review.
• Save for documentation: pair the exported JSON or CSV with a Library asset when you need auditable color metadata.

When restoring a saved palette, expect colors and settings to reappear, while the source image itself may need to be loaded again before pixel picking can resume.

• Use file upload for private assets and for remote images that block canvas pixel access.
• Use lower cluster counts for simple brand summaries and higher counts for photo studies.
• Use merge threshold to reduce near-duplicate clusters after extraction.
• Use Ignore dark or Ignore light when backgrounds, borders or white margins dominate the palette.
• Use pinned colors when exact pixels matter more than representative clusters.
• Use JSON export when you need Lab, LCH, luminance, population and settings in one artifact.
• Use CSV export when the palette needs spreadsheet review or batch QA.
• Confirm text contrast in a dedicated contrast workflow before approving UI colors.

For implementation details, see the Image Picker Developer Reference.