Color Picker from Image

What does this tool do?

The Color Picker from Image tool analyses any photo or graphic you upload and identifies its most visually dominant colors, returning them as ready-to-use HEX codes and RGB values with color swatches. Whether you are building a brand palette from a logo, matching UI tokens to a hero image, or simply trying to identify a color you spotted in a reference photo, this tool gives you instant, accurate results without opening a design application.

How to use this tool

1. Click Choose File and select any image from your device (PNG, JPG, WebP, or GIF up to 20 MB).
2. A thumbnail preview appears immediately — no upload to any server occurs at any point.
3. Choose how many colors you want in the palette: 4, 6, 8, or 10.
4. Click Extract Colors to run the analysis.
5. Each swatch shows the HEX code, RGB value, and the percentage of the image that color covers.
6. Click the HEX or RGB button below any swatch to copy the value to your clipboard.

How color extraction works

The extraction uses a technique called color quantization — a method for reducing the thousands of colors in a photograph down to the most representative few. Here is what happens step by step:

1. Downscale: The image is scaled to a ~200 px thumbnail using an HTML5 Canvas. This dramatically speeds up processing and is sufficient for palette extraction — dominant colors remain the same regardless of resolution.
2. Bucket grouping (4-bit quantization): Each pixel's red, green, and blue channels are each rounded to 4-bit precision (16 levels per channel), placing every pixel into one of 4,096 color buckets. This merges visually similar shades into the same bucket, which is key to getting distinct, useful colors rather than dozens of near-identical grey tones.
3. Sort and filter: Buckets are sorted by pixel count (most common first). A minimum perceptual distance filter (Euclidean distance ≥ 30 in RGB space) ensures the final palette contains visually distinct colors — no two swatches in the output will look nearly identical.
4. Average within bucket: Each selected bucket's pixels are averaged to produce a smooth, representative swatch color rather than using a raw bucket edge value.

What the percentage value means

The percentage shown under each swatch ("X% of image") is the fraction of visible pixels that belong to that color cluster. A color at 35% is visually dominant — it appears in roughly a third of the image area. Colors near 1–3% are accent or edge colors that appeared consistently enough to be in the top N but are minority elements in the composition. Transparent pixels (alpha below 50%) are excluded from the count entirely.

Privacy — your image never leaves your device

This tool runs entirely in your browser using the HTML5 Canvas API and JavaScript. When you select a file, the browser reads it locally via URL.createObjectURL() — no bytes are uploaded to any server. The thumbnail and color data exist only in your browser tab's memory and are discarded when you navigate away or click Clear. This is especially important when working with sensitive images such as internal design mockups, confidential documents, or personal photos.

Tips for getting the best palette

• Use 4–6 colors for logos — most brand palettes have 2–5 primary colors. Requesting 8 or 10 on a simple logo will fill the remaining slots with minor background shades.
• Use 8–10 colors for photographs — photos contain many tones and gradients; more buckets captures a richer palette.
• Crop out white or black backgrounds before uploading if you only want the subject's colors — large uniform backgrounds dominate the bucket counts.
• For gradient-heavy images, the averaged bucket colors represent mid-points of gradient ranges rather than the exact start or end values — this is expected behavior.

Common use cases

• Brand palette extraction — upload a company logo or product photo to identify the official palette as HEX values for use in CSS or design systems
• UI theming — match an application's accent colors to a hero image or marketing asset
• Graphic design — identify complementary colors in a reference image when building a mood board or layout
• Front-end development — quickly pull color values from a design file screenshot when you do not have access to the source Figma or Sketch file
• Print and physical design — extract dominant colors from a photograph to use as Pantone-matching starting points
• Data visualisation — derive a color scale from an existing chart or illustration to ensure visual consistency

HEX vs RGB — which should you use?

Both HEX and RGB represent the same color — they are just different notations. HEX (e.g. #3A86FF) is the standard in HTML, CSS, and most design tools. RGB (e.g. rgb(58, 134, 255)) is useful in CSS when you need to apply opacity (rgba()) or perform programmatic color manipulation in JavaScript. Copy whichever format fits your workflow.