🎨

Image Color Picker

Hover to zoom in. Click any pixel to sample its color — HEX, RGB, HSL, and OKLCH. Builds a reusable palette.

Image
🖼️
Drop image here or click to select
JPEG · PNG · WebP · GIF · BMP · SVG

About Color Picker from Image

The Color Picker from Image tool lets you upload any photo, illustration, or screenshot and then hover over it to see a magnified zoom lens around your cursor. When you click a pixel, it samples the exact color at full original resolution and instantly displays it in HEX, RGB, HSL, and OKLCH formats — all four at once. Every clicked color is automatically saved to a growing palette below the canvas.

All processing happens locally in your browser using the HTML Canvas API — no image is ever uploaded to a server. You can export your collected palette as CSS custom properties (CSS variables) with a single click, making it easy to drop colors straight into your stylesheet.

Common Use Cases

How to Use

  1. Drop an image file onto the upload zone or click to browse — JPEG, PNG, WebP, GIF, BMP, and SVG are all supported
  2. Hover over the canvas to see a circular zoom lens that magnifies the area under your cursor with a teal crosshair on the target pixel
  3. Click any pixel to lock its color into the right panel — HEX, RGB, HSL, and OKLCH values appear with individual Copy buttons
  4. Continue clicking to build up a palette; click "Export CSS" to copy all colors as :root CSS variables to your clipboard

Frequently Asked Questions

Why does the sampled color look different from what I see on screen?

The tool reads raw pixel values from the image data, not from what your monitor renders. Display color profiles, browser color management, and monitor calibration can make colors appear slightly different visually. For pixel-perfect accuracy, make sure your image uses sRGB color space, which is the web standard.

What is OKLCH and why is it shown alongside HEX and RGB?

OKLCH (Lightness, Chroma, Hue) is a modern perceptually uniform color space supported in CSS Color Level 4. Unlike HEX or RGB, equal numeric steps in OKLCH correspond to equal perceived brightness changes, making it ideal for generating accessible color scales. Modern browsers support oklch() natively in CSS.

Can I remove individual colors from the palette?

Yes — double-click any color swatch in the palette grid to remove it. Single-clicking a swatch copies its HEX value to the clipboard. You can also clear the entire palette at once using the "Clear" button in the palette panel header.

Advertisement