Color Picker from Image

Pick any pixel's HEX, RGB and HSL color from an image, and extract its dominant-color palette. Everything runs in your browser — your image is never uploaded and nothing is stored.

or drag & drop an image here

How to use the color picker

  1. Click Choose image or drag and drop a picture onto the drop zone.
  2. Move your mouse over the image to preview the color under the cursor as HEX, RGB and HSL; use the magnifier to target a single pixel.
  3. Click a pixel to lock the color, then press Copy HEX. The extracted palette below shows the image's dominant colors — click any swatch to copy it.

HEX is the six-digit CSS code (like #e0457b), RGB gives red, green and blue from 0–255, and HSL describes hue, saturation and lightness. Your image stays on your device the entire time.

More PAYATE tools

My IP AddressYour IP, location & ISP HTML EntitiesEscape & unescape HTML Base ConverterBinary, octal, decimal & hex Aspect Ratio CalcScale sizes & find ratios

Frequently asked questions

How does the color picker work?

Load an image, then move your mouse over it. The tool reads the exact pixel under the cursor straight from a <canvas> and shows its color as HEX, RGB and HSL with a live swatch. Click a pixel to lock that color so you can copy it.

Is my image uploaded anywhere?

No. The image is drawn and read entirely in your browser using the canvas API — it is never sent to a server and nothing is stored. It is safe for private screenshots, mockups and photos.

How is the dominant-color palette calculated?

The tool samples the pixels of your image, groups similar colors together by rounding their red, green and blue channels into buckets, counts how often each bucket appears, and shows the most frequent ones as a palette of roughly eight swatches. Click any swatch to copy its HEX code.

What image formats can I use?

Any format your browser can display works — PNG, JPG/JPEG, WEBP, GIF, BMP and most SVG files. You can choose a file with the button or drag and drop an image onto the drop zone.

What is the difference between HEX, RGB and HSL?

HEX (e.g. #e0457b) is a compact six-digit code used in CSS and design tools. RGB gives the red, green and blue values from 0 to 255. HSL describes the color as hue, saturation and lightness, which makes it easy to tweak a shade by hand.

Can I zoom in to pick a precise pixel?

Yes. A magnifier follows your cursor and enlarges the area around it, so you can target a single pixel accurately even in a small or detailed image before clicking to lock the color.