Skip to content
TryDocsy

Color Picker

Click anywhere on an image to extract colors in HEX, RGB, and HSL formats

100% Private: All processing happens in your browser. Your files never leave your device.

Upload a photo and move your mouse over it to see a live swatch and HEX value follow the cursor; click anywhere to lock that pixel in as a saved color, shown in HEX, RGB, and HSL together. Every click adds a new entry to the top of the Picked Colors list, up to 12 at a time, and clicking any one of the three format values for a saved color copies just that string to your clipboard.

One detail matters for precision: the color is sampled from the same canvas the photo is displayed on, and that canvas is capped at 600px on its longer side. If your photo is bigger than that in either dimension, the browser shrinks it down before it's ever drawn, and that resize can blend neighboring pixels together slightly — so a picked value from a large photo may be a shade off from the exact pixel in your original file. For pixel-accurate sampling, crop tightly to the area you care about first so the cropped image stays under 600px.

How it works

  1. 1. Drop or browse a photo

    One image at a time, up to 20 MB — larger files are rejected at this step.

  2. 2. Move your mouse over the image

    A live swatch and its HEX value follow the cursor before you click anything, so you can preview a spot before committing to it.

  3. 3. Click to save a color

    Adds the clicked pixel's HEX, RGB, and HSL values to the top of the Picked Colors list, up to 12 entries.

  4. 4. Copy a value or clear the list

    Click any HEX, RGB, or HSL value in a saved entry to copy just that string, or press Clear All to empty the list and start over.

When you'd use it

  • Matching a design to a photo's palette

    Pull exact colors out of a product photo, screenshot, or mood-board image to reuse in a design tool or a stylesheet.

  • Grabbing a brand's exact color from its logo

    Sample a logo image directly rather than guessing a hex code from memory when a document or slide needs to match a brand's colors.

  • Checking a paint, fabric, or wall color from a photo

    Sample a photo of a swatch or a room to get a reference HEX or RGB value before making a purchase decision.

  • Building a small palette from one photo

    Click two or three points on the same image to build a short, consistent color set for a slide deck or a poster.

How the sample is actually taken

A click reads a single pixel's color data directly off the canvas at the exact coordinates under your cursor, then converts that pixel's red, green, and blue values into the HEX and HSL strings shown alongside the RGB values. There's no averaging of a neighborhood of pixels — it's always a one-pixel sample from whatever is on the canvas at that point.

Why a picked color can differ slightly from your original file

The canvas you see and click on is limited to 600px on its longer side. A photo larger than that gets scaled down to fit before it's drawn, and that scaling uses the browser's own image-smoothing, which can blend adjacent pixels together. The pixel you click on the shrunken canvas is therefore not always identical to the corresponding pixel in your full-size original — for images already at or under 600px in both dimensions, no scaling happens and the sample is exact.

Reading and reusing the three formats

Each saved color shows its HEX code, its RGB triplet, and its HSL values side by side, and each of the three is independently clickable to copy — so you can grab just the HEX for CSS, or just the RGB for a design tool that wants that format instead, without retyping or converting anything yourself.

Frequently asked questions

Is the picked color always identical to the exact pixel in my original file?

Only if your photo is 600px or smaller in both dimensions. Larger photos are scaled down onto the display canvas before you click, and that scaling can shift a color by a shade. Crop tightly first for pixel-accurate results on a large photo.

How many colors can I save at once?

Up to 12. Each new click adds to the top of the list; once you're past 12, the oldest entries drop off the bottom.

Can I zoom in to pick a very precise pixel?

No, there's no zoom or magnifier — you click at the image's displayed size. Crop tightly to the area you need with /image/crop first if you need finer targeting.

Which color formats can I copy?

HEX, RGB, and HSL are all shown for every saved color, and each one is independently clickable to copy to your clipboard.

Does hovering over the image pick a color?

No, hovering only shows a live preview swatch and HEX value. You have to click to actually add a color to the saved list.

Is there a size limit on the photo I can upload?

Yes, 20 MB per image, checked before the file is previewed.