Image Color Picker

The Image Color Picker lets you click any pixel of an uploaded image to extract its exact color in hex, RGB, and HSL formats. Designers use this constantly — matching a logo color from a reference image, identifying brand colors from competitor sites, picking accent colors from photography for design projects, verifying colors in screenshots. Instead of guessing a color by eye, you click the exact pixel and get precise values ready to use in CSS, design tools, or anywhere else.

Upload any image, then click on any pixel to pick its color. Multi-color mode tracks multiple picks, building a palette you can export. Magnifier shows the exact pixel you\u2019re clicking for precise selection on detailed images. Output formats include hex, RGB, HSL, HSV, and CMYK. All processing runs in your browser using Canvas API to read pixel values — images never leave your machine. Works with JPG, PNG, WebP, and other common formats.

Color picking reads pixel RGB values from a Canvas:

1. Load image into Canvas
2. On click, get coordinates relative to canvas
3. Read ImageData at that position: ctx.getImageData(x, y, 1, 1).data
4. Data array contains [R, G, B, A] for that pixel
5. Convert to other formats (hex, HSL, etc.) as needed

Coordinate handling: need to translate screen coordinates to image coordinates. If the image is displayed at a different size than its native resolution, scaling must account for that.

Format conversions:
- RGB to hex: each channel as 2-digit hex, concatenated
- RGB to HSL: geometric conversion from cartesian RGB to cylindrical HSL
- RGB to HSV: similar geometric conversion to HSV
- RGB to CMYK: print-oriented, involves K (black) extraction from C, M, Y

Magnifier: shows a zoomed view of the area around the cursor for precise pixel selection. Important for small details or anti-aliased edges where one pixel vs the next makes a visible difference.

Anti-aliased edges: along edges of shapes in images, anti-aliasing blends colors. Picking a pixel on an edge may return an intermediate color (not the pure shape color or background). Hover over nearby solid-color regions for cleaner picks.

Alpha channel: if image has transparency (PNG, WebP), picked pixels can have A < 255. The tool reports alpha alongside RGB. For solid backgrounds assume A=255.

JPEG compression: JPEG introduces slight color artifacts near edges and in saturated regions. A pixel picked from a JPEG may not match the original exactly (especially in compressed regions). Source PNG or WebP images give more accurate picks.

Gamma: the RGB values are in sRGB space (gamma-encoded). Conversion to HSL/HSV uses sRGB directly (standard). For print-accurate color or perceptually uniform work, convert to LAB or OKLCH first (not done in basic picker).

Palette mode: click multiple pixels to build a palette. Export as CSS variables, JSON array, image strip, or direct list of values.

Auto-extract: some tools automatically find the dominant colors in an image using quantization algorithms. Basic picker requires clicks; dominant color extraction is a separate feature.

Performance: instant. Single-pixel reads are negligible computation.

Compared to Photoshop eyedropper, this tool is browser-based and free. Photoshop integrates with design workflow; this tool is for quick standalone picks.

Compared to browser DevTools color picker, this tool works on any uploaded image (not just rendered webpage elements). DevTools is better for live web pages; this tool is better for images, screenshots, and design files.

Compared to system-level color pickers (macOS Digital Color Meter), this tool stores picks in a palette and exports in multiple formats. System tools pick one color at a time.