Image Color Picker

What is the image color picker?

An image color picker lets you point at any pixel in a photo, screenshot, logo or artwork and read back its exact color as HEX, RGB and HSL. Instead of guessing values by eye or hunting through a design app, you load an image, hover over the spot you care about, and the tool samples the true pixel value and hands you copy-ready color codes. It is the digital version of a paint-shop swatch fan: designers use it to match a brand color from a reference image, front-end developers use it to lift a color out of a screenshot or mock-up, and anyone building a slide deck or social post uses it to keep a consistent palette across images. This tool does two jobs at once. First, it lets you manually pick as many individual colors as you like and collect them into a palette. Second, it automatically analyzes the whole image and suggests the handful of colors that best represent it, so you get a usable palette even before you click anything. Everything happens locally: your image is decoded and read entirely inside your own browser tab and is never uploaded to a server or stored anywhere.

How it works

When you add an image it is drawn onto an HTML canvas at its full native resolution, which is kept in memory for accurate sampling even though the on-screen preview is scaled down to fit. As you move the pointer, a magnifying loupe shows a zoomed-in view of the pixels under the cursor with a crosshair on the exact pixel that will be sampled — this matters for thin lines, text and tiny UI details where being one pixel off changes the color. When you click, the tool reads that single pixel's red, green, blue and alpha values straight from the canvas and adds them to your picked list, converting them into HEX, RGB, RGBA (when the pixel is partly transparent) and HSL. HEX and RGB describe the same thing two ways: RGB lists the amount of red, green and blue from 0 to 255, and HEX writes those same three numbers in base-16, two digits each, after a hash. HSL is a more human description of the same color as Hue (which color of the rainbow, 0–360 degrees), Saturation (how vivid, 0–100%) and Lightness (how light or dark, 0–100%). For the automatic palette, the image is first shrunk to a small sample — a couple of hundred pixels on the longest side is plenty — and the pixels are grouped into a small number of representative buckets by repeatedly splitting the widest spread of colors and averaging what falls into each group. This quantization runs in a background Web Worker so even large photos don't freeze the page, and fully transparent areas are ignored so a transparent PNG background doesn't dilute the result. You can then export the whole palette as a plain HEX list, as CSS custom properties, as a Tailwind colors object, or as a downloadable PNG strip.

Worked example

Say you have a screenshot of a brand's website and you want its primary blue. You drop the screenshot in, hover over a solid area of the header, and the loupe magnifies it so you can land precisely on the button rather than a nearby gradient edge. You click, and a swatch appears reading HEX #1f66f0, RGB rgb(31, 102, 240) and HSL hsl(220, 88%, 53%). Clicking the HEX code copies it instantly with a “Copied!” confirmation. Meanwhile the dominant-color panel has already suggested six colors — the blue you picked, a near-white background, a dark slate text color and a couple of accents — so you can copy the lot as CSS variables like --color-1: #1f66f0; and paste them straight into your stylesheet. If a color looks slightly different once pasted into another program, that is usually a color-profile or transparency difference rather than a wrong reading: the tool reports the literal stored pixel value, which is exactly what you want when matching colors in code.