Is this tool really free?

Yes, completely free with no limitations. No sign-up, no watermarks, no premium tiers.

Are my images uploaded to a server?

No. All processing happens in your browser using the Canvas API. Your images never leave your device.

How accurate is the color extraction?

We use K-means++ clustering in the OKLab perceptual color space, producing results that align with human color perception.

What color formats are supported?

HEX, RGB, HSL, OKLCH, and CMYK. Export as CSS variables, Tailwind config, SCSS, or JSON.

Does it work on mobile?

Yes. Tap the image to pick colors. The interface adapts with collapsible panels and touch-optimized controls.

Image Color Picker

Upload an image and click anywhere to pick colors, or let us extract the dominant palette automatically. Everything runs in your browser — nothing is uploaded.

Drop an image here or use the options below

Dominant Colors

Load an image to extract colors

Active Color

Click on the image to pick a color

Picked Colors

Click on the image to pick colors

Color Vision

Pick a color to see simulations

Palette Harmony

Pick a color to generate harmonies

Export

Pick colors to export them

Accessibility

Pick a color to check contrast

ShortcutsC Copy color+- Zoom0 FitSpace Pan←↑↓→ Move 1pxShift+Drag Area sampleShift+Arrow Pick & moveCtrl+Z UndoCtrl+V Paste

Click to upload or drag and drop

JPG, PNG, WebP, GIF, SVG, AVIF, ICO (max 20MB)

How to Use the Image Color Picker

Our Image Color Picker lets you extract precise color values from any image directly in your browser. No sign-up required, no data uploaded to any server — everything processes locally on your device.

Load an image — Upload from your device, paste from clipboard (Ctrl+V), or use the EyeDropper to pick colors from anywhere on your screen.
Hover to inspect — Move your cursor over the image. The magnifier shows a zoomed view of the pixels, and the tooltip displays the live HEX value and coordinates.
Click to pick — Click any pixel to add it to your picked colors collection. The color becomes active and all format values (HEX, RGB, HSL, OKLCH, CMYK) update instantly.
Export your palette — Copy individual values or export your entire palette as CSS variables, Tailwind config, SCSS, or JSON.

What is a Color Code?

A color code is a standardized way to represent a specific color digitally. Different formats serve different purposes: HEX codes are widely used in web development, RGB values map to how screens display color, HSL offers intuitive hue-saturation-lightness control for designers, OKLCH provides perceptually uniform adjustments, and CMYK represents print color mixing.

HEX vs RGB vs HSL vs OKLCH

HEX

A 6-character hexadecimal representation (e.g., #3B82F6). The standard format for CSS and web design. Compact and widely supported.

RGB

Red, Green, Blue values from 0-255. Directly maps to how displays produce color by mixing light. Used in CSS as rgb(59, 130, 246).

HSL

Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Intuitive for designers — easy to create variations by adjusting a single value.

OKLCH

A perceptually uniform color space. Changes in lightness, chroma, and hue correspond to how humans actually perceive color differences. The modern standard for design systems.

Supported Image Formats

The Image Color Picker supports all common image formats that browsers can render:

JPEGPNGWebPGIFSVGAVIFICOBMP

Privacy & Security

Your images never leave your device. All color extraction, pixel analysis, and palette generation happens entirely in your browser using the Canvas API. We do not upload, store, or transmit any image data. There are no analytics tracking your picked colors, no cookies profiling your usage, and no server-side processing. Your creative work remains completely private.

Frequently Asked Questions