Precision Image Color Picker & Pixel Loupe
Upload or paste any screenshot (Ctrl+V) to inspect and sample exact pixel colors. Features a real-time 8x magnifying loupe with pixel grid alignment, coordinate tracking, and instant HEX, RGB, and HSL palette export.
Drop an image here, click to browse, or paste with Ctrl+V
Supports PNG, JPG, WebP, SVG, and clipboard screenshots up to 50MB. Processed 100% in your browser.
Sampled Point Colors
Click anywhere on the image above to pin point samples. Click swatches to copy.
Export Sampled Palette Tokens
Production code ready to paste into your codebase or stylesheets.
// Sample colors on the image above to generate tokens...How Precision Pixel Color Picking Works
1. Canvas Pixel Coordinate Mapping
When inspecting an image in the browser, modern screens use CSS pixel scaling. Pikka calculates the exact geometric ratio between the rendered canvas bounding box and the underlying bitmap buffer:
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const pixelX = Math.floor((clientX - rect.left) * scaleX);
const pixelY = Math.floor((clientY - rect.top) * scaleY);This guarantees that even on high-DPI Retina screens or downscaled preview displays, your cursor samples the exact single pixel you are aiming at.
2. 8x Loupe Pixel Matrix Alignment
Single pixel values on complex photos or subtle anti-aliased font edges can be difficult to target with a standard mouse pointer.
Pikka's magnifying loupe extracts an \(11 \times 11\) pixel neighborhood around the cursor and magnifies each pixel into a \(12 \times 12\) screen cell. The center reticle isolates the exact target pixel with high-contrast dual black/white borders, letting you inspect font anti-aliasing, compression artifacts, and color borders with forensic precision.
Client-Side Privacy & Zero Cloud Processing
Most online image color pickers send your uploaded pictures to a remote backend server for processing. This creates severe security and intellectual property risks when working with confidential Figma mockups, client brand assets, or proprietary app screenshots.
Pikka processes 100% of image rendering, zooming, and color extraction directly in your local browser thread using HTML5 Canvas APIs. Your images never leave your computer.
Frequently Asked Questions
How do I paste a screenshot directly into the picker?
Simply take a screenshot using your operating system's shortcut (Win + Shift + S on Windows or Cmd + Shift + 4 on Mac) and press Ctrl + V (or Cmd + V) anywhere on this page. Pikka intercepts the clipboard event and renders the image immediately without requiring file saving.
What is the difference between this tool and the Palette Extractor?
Our Palette Extractor uses automated color quantization algorithms (k-means clustering) to compute the top 6–8 dominant color themes of an image. This tool (Image Loupe Color Picker) allows you to manually inspect and pinpoint specific individual pixels with magnifying loupe precision.
Does the loupe support SVG and transparent PNGs?
Yes! Transparent PNGs and vector SVGs render against our subtle canvas checkerboard backdrop, allowing you to sample colors on transparent layers and semi-opaque pixels.