The fastest way to find a colour you can describe but can’t name: photograph it (or screenshot it) and run an image color picker over it. Brand designers do this with mood-board photos. Frontend developers do it when matching a CSS background to a hero image their team’s photographer captured. Print designers do it before specifying CMYK values for a poster run. The photo holds the colour information at full precision; an image color picker translates that into the format your CSS, design tool, or print spec actually uses.
Our image color picker tool reads the photo via your browser’s canvas API and extracts the exact RGB values of any pixel you click. It outputs in HEX, RGB, HSL, HSV, and CMYK simultaneously, with one-click copy on each format. The photo never uploads — useful for proprietary brand work, NDA-protected mockups, or anything you’d rather keep off third-party servers.
The five colour formats and when each is right
| Format | Example | Use for |
|---|---|---|
| HEX | #635BFF |
CSS, brand guidelines, design tools — the universal web colour notation |
| RGB | rgb(99, 91, 255) |
Programming (every image library uses RGB), some legacy CSS |
| HSL | hsl(244, 100%, 68%) |
Building palettes — easier to derive lighter/darker shades by adjusting one number |
| HSV | hsv(244, 64%, 100%) |
Photoshop and Affinity Photo’s default colour picker — useful for matching design files |
| CMYK | cmyk(61%, 64%, 0%, 0%) |
Print — magazine, brochure, business card. Different gamut from RGB; expect approximation |
Why HSL is the designer’s secret weapon. Once you have a colour in HSL, you can build an entire palette by changing only the lightness. hsl(244, 100%, 68%) with the lightness pushed to 90% becomes a soft tint suitable for a card background; pushed to 30% becomes a deep shade for hover states. RGB and HEX don’t expose this control as cleanly — adjusting them to a perceived lighter/darker version requires multiple channel changes that often shift the hue.
The CMYK caveat. Computer screens use additive RGB; printers use subtractive CMYK. The two colour spaces don’t perfectly align — vivid screen blues, oranges, and greens often can’t be reproduced in print. The CMYK output from a screen-photo color picker is an approximation; for production print work, ask your printer for their colour-managed conversion (they’ll use ICC profiles to map RGB → CMYK accurately).
Five common workflows for an image color picker
- Brand palette extraction. Drop your company’s hero photo into the tool, click on the four or five distinctive colours. Save those as the starter palette for your design system.
- Matching website accents to imagery. When a marketing photo dominates a landing page, the CTA buttons and section backgrounds look better when they pull from the photo’s palette. Sample from the photo first, then build the CSS.
- Reproducing a competitor’s colour. Found a colour you like on someone else’s site or in a magazine? Screenshot, drop into the picker, copy the HEX. Faster than guessing and far more accurate than a paper colour wheel.
- Print colour matching. Photograph a paint chip or fabric swatch under daylight, sample it, and use the result as the starting CMYK for a printed brochure. Calibrate against the actual print sample for accuracy.
- Accessibility audits on photos. Sample the dominant colour of a photo behind text. Run the WCAG contrast check against your text colour. If it fails, you know exactly which photo region needs an overlay.
How to use the browser image color picker
- Open the image color picker
- Drop your photo onto the dropzone, or click to pick from disk
- The image renders in a zoomable canvas. Use scroll-wheel or pinch to zoom in for pixel-precision sampling
- Click anywhere on the image to sample — the HEX, RGB, HSL, HSV, and CMYK values appear instantly with a swatch preview
- Click the copy icon next to any format to grab that exact value to your clipboard
- Sample additional pixels by clicking new locations — each sample stays in your history sidebar for easy comparison
Everything happens client-side via the canvas getImageData API. The photo never uploads, the sampled colour never transmits.
Sampling colours in code
Browser JavaScript (canvas getImageData):
const canvas = document.createElement("canvas");
const img = new Image();
img.crossOrigin = "anonymous";
img.onload = () => {
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// Sample pixel at coordinates (x, y)
const [r, g, b, a] = ctx.getImageData(x, y, 1, 1).data;
const hex = "#" + [r, g, b].map(n => n.toString(16).padStart(2, "0")).join("");
console.log(hex);
};
img.src = "/path/to/photo.jpg";
Node.js (Sharp + raw pixel access):
import sharp from "sharp";
const { data, info } = await sharp("photo.jpg")
.raw()
.toBuffer({ resolveWithObject: true });
const idx = (y * info.width + x) * info.channels;
const [r, g, b] = [data[idx], data[idx + 1], data[idx + 2]];
console.log(`rgb(${r}, ${g}, ${b})`);
Python (Pillow):
from PIL import Image
img = Image.open("photo.jpg")
r, g, b = img.getpixel((x, y))[:3]
print(f"#{r:02x}{g:02x}{b:02x}")
The four mistakes that produce the wrong colour
- Sampling JPEG artefact pixels. JPEG compression creates colour noise around hard edges. A pixel sampled at the boundary between a logo and its background often has a “halo” colour that doesn’t match either neighbour. Sample 10-20 pixels into the solid region.
- Trusting screenshots over the source. If you screenshot a website to sample its CSS colour, your screen’s colour profile, your monitor’s calibration, and macOS/Windows’s gamma all shift the values. Use browser DevTools’ eyedropper directly on the live element instead.
- Mixing up sRGB and Display P3. Modern Macs and iPhones photograph in Display P3 colour space, which encodes vivid colours that sRGB can’t reach. A picker that assumes sRGB on a P3 photo returns desaturated values. Most browser tools handle this automatically, but be aware when results look slightly off.
- Sampling backlit or shadowed regions. A subject’s shirt looks bright pink in direct sun, dim pink in shade. The “real” colour exists somewhere in between — for brand work, photograph in even diffused light or sample multiple regions and average them.
When NOT to use a single-pixel color picker
- For palette extraction from complex photos. A single pixel doesn’t represent a photo’s overall colour story. Use a dominant-colour or palette-extractor tool that analyses the whole image. (We have one: the Image Color Extractor.)
- For accessibility-grade colour matching. WCAG contrast calculations need precise colour values. A single sample can hit a JPEG artefact pixel; sample 20 and average for accuracy.
- For print colour proofing. The CMYK approximation from a screen photo is rough. Order a printed proof or ask your printer for an ICC-managed conversion.
- From low-resolution or heavily-compressed sources. A 200×200 thumbnail saved at JPEG quality 50 has bands of false colour everywhere. Source a higher-res copy if you need accurate colours.
Frequently asked questions
What’s the difference between an image color picker and a screen color picker?
An image color picker samples colours from a static image you upload. A screen color picker (like Chrome DevTools’ eyedropper or macOS Digital Color Meter) samples colours directly from any pixel on your screen, including live web pages. For sampling a colour from a photo, image color picker. For sampling a CSS colour from a competitor’s live site, screen picker.
Can I get the dominant colour of an entire image?
Not from a single-pixel picker. Use our dedicated Image Color Extractor which analyses the whole image and returns the top 5-8 dominant colours plus a perceptual palette suitable for design systems.
Why does my sampled HEX not match the colour I expected?
Three common causes: (1) JPEG artefacts producing false colours near edges — sample further into solid regions; (2) your monitor’s calibration shifting how colours display; (3) the source photo using Display P3 colour space which encodes wider gamut than sRGB. For brand work, sample multiple pixels in the same region and use the median value.
Is my photo uploaded when I use the picker?
No. The browser reads the photo via the File API, draws it on a canvas, and reads pixel data from the canvas — all without making any network requests. Verify in DevTools’ Network tab. The photo and any sampled colours stay on your device.
Can I sample colours from a website screenshot?
Yes — drop the screenshot into the picker like any other image. For higher accuracy though, use Chrome DevTools or browser extensions that sample directly from the live page (avoiding screenshot compression). Both Chrome and Firefox have built-in eyedroppers in their colour pickers.
Does the tool work on transparent PNGs?
Yes. Transparent regions return alpha = 0 in the sample readout, with the underlying pixel colour shown for reference. If you click on a transparent pixel and want the colour you’d see (white if displayed on white), composite the image first or sample a non-transparent neighbour.
Related tools and guides
- Image Color Picker — the tool this guide is about
- Image Color Extractor — pull the dominant 5-8 colours from any image
- Image Average Color Finder — compute the single mean colour of a photo
- HEX to RGBA Converter — convert sampled HEX values into other formats
- Color Shades Generator — turn a sampled colour into a 10-step ramp
- All image tools
![Image Color Picker Tool: Sample HEX, RGB & HSL [2026]](https://simpletool.io/blog/wp-content/uploads/2026/05/image-color-picker-tool.png)
![Free Image Cropper Online: Aspect Ratio Presets [2026]](https://simpletool.io/blog/wp-content/uploads/2026/05/free-image-cropper-online.png)
![PDF Merger Tool: Combine PDFs in Your Browser [2026 Guide]](https://simpletool.io/blog/wp-content/uploads/2026/05/pdf-merger-tool.png)
