Image Color Picker - Get HEX, RGB & HSL From Any Image

Get the exact color, not a close enough one

Eyeballing a color from a screenshot never works. You pick something that looks right, drop it next to the original, and it's clearly a shade off. Pixel-level picking fixes that. Load the image, aim, click, and you get the HEX, RGB and HSL values of that exact pixel, ready to paste into Figma, Canva, CSS, PowerPoint or a paint store's color matcher.

The magnifier is what makes it accurate. Photos and screenshots are full of anti-aliased edges, JPEG noise and gradients, so the pixel under your cursor is often not the color you think you're pointing at. The loupe shows an 11x11 pixel grid around your cursor at 16x zoom with the target pixel outlined. Aim at the middle of a flat area, not an edge, and you'll get the real color.

How to pick a color from an image

Choose an image, drop it on the page, or paste a screenshot straight from the clipboard with Ctrl+V (Cmd+V on a Mac). That last one is the fastest workflow: screenshot a website, paste, pick. Move your mouse over the image to see live values, then click to save the color to your picked list. On a phone, press and drag your finger to aim, and lift to pick.

Each picked color shows three buttons: HEX, RGB and HSL. Tap one to copy it. Keyboard users can focus the image, move the aim point with the arrow keys (Shift jumps ten pixels) and press Enter to pick, which is also the most precise way to hit a one-pixel line.

HEX, RGB or HSL: which one to use

HEX (#1A73E8) is the universal copy-paste format. Every design tool, CSS file and brand guide accepts it. RGB (rgb(26, 115, 232)) is the same thing written as three numbers from 0 to 255, handy for code and for apps like PowerPoint that ask for red, green and blue separately. HSL (hsl(214, 82%, 51%)) describes hue, saturation and lightness, and it's the one to use when you want variations. Keep the hue, drop the lightness to 40 percent for a hover state or raise it to 95 percent for a tinted background, and the family stays consistent.

If you need CMYK for print or want to convert between formats, paste the HEX into the color converter. For checking whether text in that color is readable on a background, run the pair through the color contrast checker; WCAG AA wants 4.5:1 for body text.

Extract a palette from a photo

Below the picker, the tool pulls the dominant colors out of the whole image automatically. It uses median cut, the classic algorithm behind GIF and PNG color reduction: take all the pixels, split the group along its widest color channel at the median, and keep splitting the biggest, most varied group until you have the number of colors you asked for. Each swatch is the average of its group, and the percentage shows how much of the image it covers.

Because the method is deterministic, the same image always gives the same palette, unlike random k-means tools that reshuffle every time you reload. Choose between 3 and 12 colors. Five or six is the sweet spot for a brand or slide theme; more colors start picking up minor shades of the same thing. Copy as CSS variables gives you a ready :root block to drop into a stylesheet.

Use it for matching a website to a product photo, building a moodboard from a travel shot, pulling brand colors out of a client's logo when they can't find their brand guide, or picking wall paint that goes with a rug you photographed. For paint, take the HEX to the store: most chains can match a digital color, though the result on the wall depends on lighting, so get a sample pot first.

Why the color might not match what you expected

A picked value is exactly what's stored in the file, but a few things can make it differ from what you see elsewhere. Screenshots capture your display's color profile, so a color screenshotted on a wide-gamut MacBook can read slightly more saturated than the original CSS value. JPEG compression shifts colors in small blocks, especially reds and around text, so pick from the center of a flat area or use a PNG. Photos also carry shading: a "white" wall in a photo is usually a light gray or beige, and that's the honest answer.

Huge images over about 16 megapixels are scaled down before sampling so the page stays fast on phones. That doesn't change flat colors, but on a detailed scan it can blend neighbouring pixels. The image itself never leaves your device; all reading happens on a canvas in your browser.