100% browser-based · zero uploads

Image Color Picker

Pick any color from a photo, screenshot, or design — instantly. Hover the image to preview the pixel under your cursor with a magnifier, then click to copy the HEX, RGB, RGBA, HSL, HSV, HWB, OKLCH, or CMYK value. Save up to 24 colors as a working palette and export them as JSON. Everything runs in your browser, so your images never leave your device.

Drop an image here, or click to browse

JPG, PNG, WebP, GIF, BMP — up to 50 MB

How It Works

This free online image color picker reads pixel data directly in your browser — no upload is ever sent to a server.

  1. 1. Load the image locally

    When you drop or select an image, the browser turns it into a local Blob URL and decodes it with the native HTMLImageElement. Nothing is transmitted over the network — the file stays on your device.

  2. 2. Cache the pixel buffer

    The decoded image is drawn once to an offscreen HTMLCanvasElement and the full pixel buffer is captured with CanvasRenderingContext2D.getImageData(). This gives us a flat Uint8ClampedArray of RGBA values for pixel-accurate lookups, even on a downscaled preview.

  3. 3. Read the pixel under your cursor

    As you move your cursor (or finger), pointer coordinates are mapped from the rendered image rectangle back to the original resolution. The RGBA value at that index is read from the buffer and converted to HEX and HSL on the fly using a standard sRGB-to-HSL formula.

  4. 4. Save and copy colors

    Click to add the current color to the picked palette. Each entry exposes one-click copy via the navigator.clipboard API and you can export the full palette as a JSON file generated locally with Blob and URL.createObjectURL — no server round-trip required.

Why users love this tool

  • Your images never leave your device — pixel reads happen in-browser, so screenshots of designs, mockups, or private artwork stay private.
  • Pixel-accurate — the magnifier samples directly from the original-resolution buffer, not from the on-screen preview, so the HEX you copy matches the source file.
  • Designer-friendly outputs — copy HEX for CSS, RGBA for canvas work, or HSL for adjustments in Figma and Tailwind.
  • Works on any device — touch-friendly on mobile and tablets, no app or installation required.
  • Completely free — no account, no watermarks, no usage limits.

Frequently Asked Questions

Are my images uploaded to a server?

No. All processing happens locally in your browser using a Canvas getImageData() read. Your images are never sent to or stored on any server.

Is this image color picker free?

Yes, completely free. No account required, no watermarks, no usage limits, and no hidden charges.

What color formats can I copy?

Every picked color exposes HEX, RGB, RGBA (with alpha), HSL, HSV/HSB, HWB, OKLCH (CSS Color 4 / Tailwind v4), and CMYK percentages. Click any value in the picked palette to copy it to your clipboard. CMYK values are an uncalibrated mathematical conversion — for print production use a color-managed tool with an ICC profile.

Which image formats are supported?

JPG, JPEG, PNG, WebP, GIF, and BMP up to 50 MB. Any image format your browser can decode natively will work.

Is the picked color pixel-accurate?

Yes. Pointer coordinates are scaled from the displayed image back to the original full-resolution buffer, so the HEX, RGB, and HSL values come straight from the source pixel — not a downscaled preview.

Can I save and export multiple colors?

Yes. Click anywhere on the image to add that color to the picked palette. You can save up to 24 colors per session and export the whole palette as a PNG or SVG swatch strip, or as a JSON file with HEX, RGB, RGBA, HSL, HSV, HWB, OKLCH, and CMYK values — all generated locally in your browser.

Does it work on mobile?

Yes. The tool works in any modern browser on any device — tap to pick a color on phones and tablets, no app or download needed.