WebToolVerseWebToolVerse

Image Color Picker

Hover to preview · Click to pick · Export your palette

Drop or tap to pick colors

JPG, PNG, WEBP, SVG — any image

Next steps

Color Palette Generator

Pull a beautiful color palette from any image — export as CSS or Tailwind.

Compress image

Shrink images by up to 80% without visible quality loss.

Remove background

Remove backgrounds instantly with AI — no uploads, no signups.

Make profile photo

Crop, frame, and polish the perfect profile picture in seconds.

View all tools →
Runs entirely in your browser. No uploads. Your files stay private.

Pick Pixel-Accurate Colours From Any Image

Image Color Picker reads pixel values directly from the Canvas API. Your image is decoded into an HTMLImageElement, drawn into a Canvas at its native resolution, and getImageData returns the raw RGBA buffer. When you hover over a pixel the tool reads four bytes from that buffer and converts them on the fly into HEX, RGB, and HSL representations using the standard CSS Color Module 4 conversion formulas.
EXIF orientation is honoured before drawing. JPEG bytes are inspected for the orientation tag and the Canvas is pre-rotated and pre-flipped so a phone photo flagged as orientation 6 is sampled in the way it actually displays — not in the raw landscape pixels. Without that step, a portrait iPhone photo would return colours from the wrong place.
A magnifier overlay enlarges the area under your cursor by 10x so you can target single pixels without the cursor body getting in the way. The magnifier is a second small Canvas that re-samples the same source pixels with imageSmoothingEnabled set to false, giving a chunky pixel-perfect zoom rather than a blurred CSS scale.
Picked colours are accumulated in a session palette. Each entry can be copied individually as HEX, RGB, or HSL via the Clipboard API, or exported in bulk as CSS custom properties, JSON, or a self-contained SVG swatch sheet. The HEX format includes the leading hash, the RGB and HSL formats use modern space-separated CSS Color 4 syntax.
An auto-palette mode pulls the dominant colours from the whole image using the same median-cut quantiser the dedicated Color Palette Generator uses, so you do not need to switch tools when you want a palette plus the ability to spot-check specific pixels.
Browsers and the EyeDropper API: when available (Chromium-based browsers, version 95 and newer), an Eyedropper button opens the system colour picker so you can sample pixels anywhere on screen, including outside the browser. Firefox and Safari currently do not expose this API, so the tool falls back to in-image sampling there.
Everything runs locally. The image lives as a blob URL in your tab, sampling reads from a local Canvas, and the palette is held in React state. There is no upload, no analytics on the image content, and the picked colours never leave your device unless you copy or export them yourself.

Common Use Cases

01

Brand colour extraction from logos

Pull the exact HEX values from a logo PNG or marketing screenshot so the colours match in every CSS file you ship.

02

UI screenshot sampling

Sample colours from a competitor's product screenshot to figure out the precise tints they use for buttons, alerts, and surfaces.

03

Design system audits

Verify that buttons across multiple pages actually use the same colour by sampling pixels in screenshots and comparing values.

04

WCAG contrast checks

Extract foreground and background colours from a real-world screenshot, then plug them into a contrast checker to validate accessibility.

Frequently Asked Questions

The image is drawn into a Canvas and getImageData is called on the area under your cursor. The four returned bytes are the red, green, blue, and alpha components of that pixel, converted to HEX, RGB, and HSL on the spot.
HEX (#RRGGBB), modern CSS Color 4 RGB (rgb(255 0 0)), and HSL (hsl(0 100% 50%)). Click any value in the palette to copy it via the Clipboard API.
It deliberately disables image smoothing so you see the actual pixel grid at 10x magnification. A smoothed zoom would invent intermediate colours, which is exactly what you do not want when you are picking a single pixel.
Yes, when available. Chromium browsers (Chrome, Edge, Brave, Opera) version 95 and newer expose the EyeDropper API, which lets the tool sample pixels anywhere on screen. On Firefox and Safari the tool falls back to in-image sampling only.
No. The image is decoded locally, drawn into a Canvas in your tab, and sampled directly. The picked colours stay in React state until you copy them yourself.
Not directly — drop a screenshot of the frame in instead. Use a tool like Image Compressor or your operating system's screenshot utility to capture the frame, then sample it here.
Two pixels with identical RGB values can look different depending on the surrounding colours and the display's calibration. If colours feel inconsistent across sites, check that everyone is working in sRGB rather than mixing colour spaces.
Yes. The orientation tag is parsed from the JPEG bytes and the Canvas is rotated and flipped accordingly before sampling. Without that step, portrait iPhone photos would return colours from the wrong region.
Yes. The auto-palette button runs a median-cut quantiser on the entire image and returns 5-8 dominant colours in one shot, in addition to whatever pixels you have picked manually.
Canvas getImageData returns sRGB values regardless of source colour space, so the picked HEX is the sRGB approximation. For wide-gamut work, sample with macOS's Digital Colour Meter in Display P3 mode and convert manually.

Advertisement