Pickcolorsfrom any image
Click any pixel in an image to grab its exact color as HEX, RGB and HSL. Build a palette of several colors, then copy every code in one click. Everything runs locally in your browser, so your image never gets uploaded.
Online Color Picker From Image
Drop an image here or click to select
Click the image to sample any pixel color
JPG • PNG • WebP — up to 30MBHow the color picker works
When you open an image, it is drawn onto an HTML<canvas>element in your browser. As you move your cursor over it, the tool reads a single pixel with the canvasgetImageDataAPI and shows a magnified preview loupe of the color under your pointer. Click, and that exact pixel's red, green and blue values are captured and converted into three common formats: HEX, RGB and HSL. Every step happens locally — the pixel data never leaves your device.
HEX, RGB and HSL explained
These are three notations for the very same color, useful in different situations:
- HEX(
#4f46e5) — a base-16 string packing red, green and blue into six characters. This is the format HTML and CSS expect by default, and the one most design tools copy. - RGB(
rgb(79, 70, 229)) — the same three channels written as decimals from 0 to 255. Handy when you need to read or adjust a single channel, like "lower the red". - HSL(
hsl(243, 76%, 60%)) — hue, saturation and lightness. Closer to how people think about color, so it's the easiest for picking tints, shades and harmonious combinations.
Getting the truest color
Two things can make a sampled color differ slightly from what your eye sees. Many photos carry a color profile (ICC) that the canvas flattens to standard sRGB, which can cause a small shift. And because JPG compression blends neighbouring pixels, an edge may read as a mix of two colors. For the most accurate result, use a PNG, zoom in, and sample from the middle of a solid-colored region rather than an edge or a gradient.
At a glance
| Property | Detail |
|---|---|
| Formats | JPG, PNG, WebP |
| Output | HEX, RGB, HSL for each color |
| Palette | Collect many colors from one image |
| Copy | One-click copy per code |
| Best for | Brand colors, gradients, design sampling |
| Privacy | 100% in-browser, no upload |
Frequently asked questions
How does the color picker read colors from my image?
Your image is drawn onto an HTML canvas element in your browser. When you click, the tool reads the exact red, green, blue and alpha values of that single pixel using the canvas getImageData API, then converts those numbers into HEX, RGB and HSL. Nothing is uploaded — the pixel data never leaves your device.
Why is the picked color slightly different from what I see?
Color can shift for two reasons. First, many images use color profiles (ICC) that the canvas may flatten to standard sRGB, causing tiny shifts. Second, JPG compression blends neighbouring pixels, so an edge pixel may read as a mix of two colors. For the truest reading, use a PNG or zoom in and pick from the middle of a solid-colored area.
What are HEX, RGB and HSL?
They are three ways to write the same color. HEX (#4f46e5) packs the red, green and blue values into a base-16 string used in HTML and CSS. RGB (79, 70, 229) lists each channel from 0 to 255. HSL (243°, 76%, 60%) describes color as hue, saturation and lightness, which is often more intuitive for adjusting tints and shades.
Can I pick more than one color?
Yes. Every click adds the sampled color to a palette below the image, so you can collect several colors from one photo — a brand set, a gradient, or the colors of a scene — and copy each code individually.
Is the color picker free and private?
Yes. Color sampling runs entirely in your browser with no upload, and it is free with no sign-up, no watermark and no usage limits.