Page & Bell

Image Color Picker

Drop an image, move over it to read any pixel's exact color, and click to save it — you get HEX, RGB, and HSL with one-click copy, plus a magnifier so you can land on the precise pixel instead of guessing. It reads the real pixel values straight off a <canvas> in your browser, so the picked color is exactly what's in the file, not an approximation. The image never leaves your device, which matters when you're sampling brand colors from a confidential mockup or a competitor's screenshot.

Drop an image here or click to choose

Read in your browser — the image never leaves your device.

How to use the image color picker

  1. Drop or choose an image; it loads into the picker.
  2. Move the crosshair over the image — the magnifier and live HEX/RGB/HSL update for the pixel under it.
  3. Click to save a color to your swatches; click any swatch to copy its HEX.
  4. Copy HEX, RGB, or HSL directly from the readout for whichever format your tool needs.

HEX, RGB, and HSL — the same color, three notations

The picker reports every color three ways because different tools expect different formats, and knowing what each one means saves you from converting by hand:

  • HEX (#1E90FF) — two hex digits each for red, green, and blue. The default in CSS and design tools; compact and unambiguous.
  • RGB (rgb(30, 144, 255)) — the same three channels as 0–255 decimals. Easier to tweak a single channel by eye, and the form most code expects.
  • HSL (hsl(210, 100%, 56%)) — hue, saturation, lightness. The most intuitive for adjusting a color: nudge lightness for a tint or shade, or rotate hue to find a complement, without touching the others.

Why the magnifier matters

Photographs and screenshots are rarely flat color. JPEG compression, anti-aliased edges, gradients, and subtle noise mean two pixels that look identical can differ by several values — so where you click changes the result. The magnifier shows the individual pixels under your cursor with the exact sampled pixel boxed, so you can sit on a representative spot rather than accidentally grabbing a compression artifact or an edge pixel that's a blend of two regions. For a flat UI screenshot, any pixel in a region is fine; for a photo, aim for the middle of an evenly lit area.

From swatch to stylesheet

Sampling a color is usually step one. Once you've pulled a palette off a reference image, you'll often drop those values straight into CSS — a HEX for a background, an RGB for a semi- transparent overlay, an HSL you can shift for hover states. If you're building shadows from a sampled color, the box-shadow generator takes it from here. And if you only needed the color to re-create an asset at a new size, the image resizer and format converter finish the job.

Frequently asked questions

Is my image uploaded to pick colors from it?

No. The image is drawn to a canvas and the tool reads pixel values locally with getImageData. Nothing is sent to a server, so you can sample colors from confidential mockups, contracts, or competitor screenshots without the file leaving your browser — it even works offline once loaded.

How do I get the HEX code of a color in an image?

Load the image, move the crosshair over the spot you want, and read the HEX value in the live readout — then click Copy, or click the pixel to save it as a swatch and click the swatch to copy. The magnifier helps you land on the exact pixel rather than a neighboring one.

Why do I get slightly different colors clicking near the same spot?

Because most images aren't perfectly flat. JPEG compression and anti-aliasing make neighboring pixels vary, and edges blend two regions. Use the magnifier to sit in the middle of an evenly colored area, away from edges and texture, to get a representative value.

Can I pick colors on my phone?

Yes — the picker works with touch. Because the eyedropper maps your touch point to the underlying pixel regardless of how the image is scaled on screen, you get the true color whether the image is shown large on a desktop or small on a phone.

Does it handle transparency?

The readout reports the visible RGB of each pixel. Fully transparent areas show the checkerboard backdrop, and the sampled values reflect the pixel's color channels. For solid, reliable samples, pick from opaque regions of the image.

Related tools