Online Tool Store
Image Color Picker
Read the exact colour of any pixel in an image as HEX, RGB, and HSL, with contrast ratios and a list of recent picks. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
No image yet — choose one, then click it (or use the arrow keys) to read a colour.
How it works
- Choose an image. It is drawn into the page — nothing is uploaded.
- Move the pointer to preview colours as you go, and click to record one.
- Or focus the image and use the arrow keys, with Shift for bigger steps, then Enter to record.
- Copy the HEX, RGB, or HSL value, and pick again from the recent list at any time.
Three notations for one colour
Every pixel is three numbers from 0 to 255. HEX just writes them in base 16, so the conversion is mechanical:
rgb(47, 111, 237) → #2F6FED (47 = 0x2F, 111 = 0x6F, 237 = 0xED)
hsl(220°, 84%, 56%) — the same colour, restated
HSL is worth knowing because it is the only one of the three you can reason about. Hue is the position on the colour wheel, saturation is how vivid it is, and lightness runs from black to white. Want a hover state 10% darker? Subtract from the lightness. Doing the same in HEX means converting, adjusting three channels, and converting back.
Why the contrast numbers are shown
Picking a colour usually means putting text on it, so the ratio matters. WCAG measures relative luminance with a weighting that reflects how the eye works — green contributes most, blue least:
L = 0.2126 R + 0.7152 G + 0.0722 B (after gamma correction)
contrast = (L_lighter + 0.05) ÷ (L_darker + 0.05)
That gives 21:1 for black on white, the theoretical maximum, and 1:1 for a colour on itself. The threshold to aim for is 4.5:1 for body text — which is why the middle grey #767676 is a famous edge case at 4.54:1 on white, just scraping a pass. Anything lighter fails, however pleasant it looks.
Because the blue coefficient is so small, a saturated blue is much darker to the eye than its numbers suggest, and yellow is much lighter — which is why yellow text on white is unreadable no matter how bold you set it.
FAQ
Is my image uploaded anywhere?
No. The image is decoded onto a canvas in this page and the pixels are read from there, so nothing is uploaded or stored. That matters more than it sounds — people often sample colours from unreleased designs, client mockups, or screenshots of private work.
Can I use it without a mouse?
Yes. Tab to the image, then move the crosshair with the arrow keys — hold Shift to jump ten pixels — and press Enter to record the colour. Most colour pickers are click-only, which makes them unusable by keyboard.
What is the difference between HEX, RGB, and HSL?
They describe the same colour three ways. HEX and RGB are the same numbers in different notation, one in base 16 and one in decimal. HSL restates them as hue, saturation, and lightness, which is far easier to adjust by hand — nudge the lightness and you get a lighter version of the same colour, which is hard to do in HEX.
What are the contrast figures for?
They tell you whether text will be readable on the colour you just picked. WCAG asks for at least 4.5:1 for normal body text, and the line says which of black or white gets you there. Black on white is the maximum possible at 21:1.
Why does the colour look different from the original design?
Usually because the image has been re-compressed. JPEG shifts colours slightly, especially at edges and in flat areas, so a swatch sampled from a JPEG screenshot can be a shade or two off the source value. Sample from a PNG where exactness matters.
Can it pick a colour from anywhere on my screen?
No — a web page can only read pixels from an image you give it, not from your desktop. If you need to sample outside the browser, take a screenshot and open that here, or use your operating system's own colour picker.
How we compare
| Feature | Online Tool Store | Upload-based colour pickers | Photoshop / Figma |
|---|---|---|---|
| Your image never leaves your device | ✓ | ✗ | ✓ |
| Works by keyboard, not just clicking | ✓ | ✗ | Partly |
| HEX, RGB, and HSL together | ✓ | Often HEX only | ✓ |
| WCAG contrast shown as you pick | ✓ | ✗ | Plugin required |
| Sample from anywhere on screen | ✗ | ✗ | ✓ |
| Extract a whole palette automatically | ✗ | ✓ | ✓ |
Best for lifting an exact colour out of a screenshot, a logo, or a photo — with the contrast check right there, so you find out immediately whether text will be readable on it. It samples one pixel at a time from an image you provide; automatic palette extraction and screen-wide sampling are different jobs.