Colour Picker From Image

What it does

The Colour Picker From Image is an eyedropper for any image — drop the file, click any pixel, get its hex and RGB values. Recent picks are remembered as a small swatch row for quick comparison and copying. The whole thing reads pixel data directly off a canvas in the browser; the file is never uploaded.

Common situations

You’re auditing a photographer’s deliverables and need to extract the dominant colours actually present in their work. The brand guide says “the colour palette is X”; the photographs lean toward different hues entirely. Sampling the imagery surfaces the gap — useful evidence in a “the photography drifts from the brand” conversation.

You’re rebuilding a competitor’s colour scheme from a screenshot of their site. Right-click-Inspect-Element gives you the CSS for elements you can click; it does not help with the rendered pixels of imagery, gradients, or composited UI. Eyedropping the screenshot returns the colours regardless of source.

You’re working from a moodboard or reference image and need to translate the feeling into a real palette. The reference might be a painting, a product photograph, a street scene, an architectural detail. Sampling four or five pixels — sky, shadow, accent, focal — captures the colour structure that made the reference compelling in the first place.

You’re matching brand colours that exist only in print or photographed format. The agency delivered a brand book as a PDF; somewhere in there is the printed swatch with the right colour, but no hex value. Eyedropping the printed swatch in a high-quality scan returns close-enough hex values to start the digital implementation.

You’re building a content management workflow where editors upload imagery and the site needs to extract a dominant colour for theming purposes (background tints, accent colours, hero overlays). The eyedropper is the manual version of what the build pipeline will do automatically; using it now reveals which colours work and which do not.

What you need to know

The image is rendered to a hidden canvas at its natural resolution (not the displayed size). When you click on the displayed image, the click coordinates are scaled back to the natural-resolution canvas, and the browser’s getImageData returns the four bytes (R, G, B, alpha) of that pixel. The tool formats them as hex and RGB. Mouse-move while hovering performs the same read continuously, so the displayed colour updates as you sweep across the image — useful for finding gradients or comparing nearby regions before clicking to commit.

This is one of the few cases where local file processing genuinely matters for a non-privacy reason: cross-origin canvas reads are blocked by browsers as a security measure. Reading pixel data off an image fetched from another domain throws a security error. Reading pixel data off a locally uploaded file works freely. The architectural decision (local files only) is what makes the tool functional, not just polite.

The colour you sample is the rendered colour at that pixel, including any compression artefacts and JPEG colour-space adjustments. JPEGs often have visible colour blocking that produces inaccurate samples around edges; PNGs are byte-accurate. For brand-critical work, sample multiple nearby pixels and average them mentally — a single pixel can be an outlier.

Photographs have wider colour ranges than you might expect. A “white” wall in a photo is often slightly warm, slightly cool, or noticeably tinted by ambient light. Eyedropping reveals the truth: there is no such thing as pure white in real photography, and brand palettes built from photographic references should reflect that.

For accessibility-aware sampling, remember that eyedropper colours are RGB, not WCAG. The hex value tells you what the pixel renders as; running the pair through the Contrast Checker tells you whether that pair is legible. Sampling a “good enough looking” colour pair from a reference does not guarantee accessibility — that has to be verified separately.

Some images contain embedded colour profiles (sRGB, Display P3, Adobe RGB, ProPhoto) that affect how browsers render the pixels. The same hex value displayed under different profiles produces different rendered colours. The tool reads the rendered output; if profile drift matters for your work, render in a colour-managed environment and accept some variation across viewing surfaces.

Frequently asked questions

How do I pick a colour from an image?

Drop the image into the tool, click anywhere on it. The hex and RGB values of that pixel appear immediately. Mouse-hover before clicking gives you a live preview as you sweep across the image.

Can I extract a colour palette from a photograph?

The eyedropper picks individual colours, not full palettes. For automatic palette extraction (dominant 5–10 colours in an image), specialist tools like Coolors’s image-to-palette feature or k-means clustering algorithms are the right shape. The eyedropper is for picking specific named colours, not summarising the image.

Why doesn’t the eyedropper work on website screenshots from my browser?

It does work — drop the screenshot file in here. What does not work is eyedropping a live website directly; that requires browser extensions because of cross-origin restrictions. Take a screenshot, drop it in, sample.

Are the colours I pick exactly accurate?

The hex values reflect the rendered pixel, including any compression artefacts. JPEGs have visible colour blocking that produces some sample inaccuracy. PNGs are byte-accurate. For brand-critical work, sample several nearby pixels and average mentally.

Can I sample colours from a video?

Not directly — drop a screenshot of the video frame. The tool works on still images; video sampling needs a video-specific tool that handles frame extraction.

How do I get the dominant colour of an image?

Sample multiple regions and pick the one that appears most often visually. For algorithmic dominant-colour detection, look at libraries like Vibrant.js (browser) or Pillow’s quantize (Python) — those produce a programmatic answer rather than requiring eyedropper sampling.

Why are the colours different when I sample versus what I see in Photoshop?

Photoshop renders with colour management; browsers may not, depending on the image’s embedded profile. The same image can produce different sampled values across different rendering environments. Sample in the environment closest to where the image will be consumed.

Can I sample from SVG?

Yes — drop the SVG, click anywhere. The browser rasterises the SVG to canvas at its intrinsic dimensions, and the eyedropper samples the rasterised pixels. Note that SVG gradients sample at the rendered position, not as gradient stops.

Common problems

Problem: The colour I sampled looks different from what I see on screen.

The displayed image is sometimes scaled or filtered by the browser; the sampled colour is the source pixel value, not the displayed pixel. Make sure the image is at native size when sampling, or accept a small rendering-vs-source discrepancy.

Problem: Sampled hex values vary wildly when I click adjacent pixels.

JPEG compression produces blocky colour transitions, particularly around edges. Adjacent pixels can differ by 10–20 RGB values where the source is more uniform. Sample several nearby pixels and average; for high-precision work, start from a PNG source.

Problem: I cannot eyedrop a website directly — only uploaded images.

Browser security blocks cross-origin canvas reads. Workarounds: take a screenshot of the website (Cmd+Shift+4 on macOS, Snipping Tool on Windows) and drop the screenshot in. For native eyedropper functionality, browser DevTools and OS-level pickers (macOS Digital Color Meter, Windows PowerToys) handle live screen sampling.

Problem: Recently sampled colours look duplicated.

The recent picks list deduplicates exact matches. If you see what looks like duplicates, they are slightly different hex values that round to the same display swatch — useful precision for brand work, sometimes confusing visually.

Problem: The eyedropper does not work after the page has been open a while.

Modern browsers sometimes lose the canvas reference if the tab has been backgrounded for very long periods. Reload the page and re-upload the image; the canvas is re-initialised and the eyedropper works normally again.

Quick guides

For brand auditing: Open the brand’s existing creative (website screenshots, marketing PDFs, product photography) and sample the dominant colours from each. Compare against the documented brand guide; gaps are where the brand has drifted from spec.

For palette inspiration: Drop a moodboard image (a painting, a photograph, a Pinterest board screenshot) and sample 5–8 pixels representing different regions. Plot them as a candidate palette; refine via the Colour Palette Generator.

For accessibility checking: Sample text colour and background colour from a screenshot, then run the pair through the Contrast Checker to verify WCAG compliance. The eyedropper provides the inputs; the contrast checker provides the verdict.

Tips

• Click empty regions to sample backgrounds; click a subject to sample foreground colours. Hover to scan an area before committing.
• The colour you sample is the rendered colour at that pixel, including any compression artefacts and JPEG colour-space adjustments. For brand work, sample multiple nearby pixels and average them mentally — a single pixel can be an outlier.
• Photographs have wider colour ranges than you might expect. A “white” wall in a photo is often slightly warm, slightly cool, or noticeably tinted by ambient light. Eyedropping reveals the truth.
• For accessible text colours, sample the background where text would sit, then use the Contrast Checker to verify the chosen text colour against it.
• PNG sources produce byte-accurate samples. JPEG sources have compression-related sampling noise — average several nearby pixels for accuracy.
• Recent picks remember the last few samples. Click any to copy without re-sampling.

Related tools in this suite

The natural pairing is the Colour Palette Generator — eyedrop the dominant colour from a moodboard, generate a full palette around it. The Colour Converter is useful immediately after picking when you need the colour in a format other than hex.

Take it further

A repeated need to extract colours from imagery often signals an absent or under-specified colour system. Brands that depend on photography for their identity benefit from explicit colour rules — primary, secondary, supporting, background — derived once from the photographic style and then applied consistently. The systems we build handle that translation work for clients whose visual language is photographic rather than graphic.