Question 1

How does the image color picker work?

Accepted Answer

When you upload an image, it is drawn to an HTML Canvas element entirely inside your browser — no server upload happens. When you hover or click on the canvas, we read the single pixel under your cursor using the Canvas getImageData API, returning its red, green, and blue channel values. Those raw RGB values are then converted to HEX and HSL formats. The whole pipeline is local JavaScript; you can verify by running this tool with your network disconnected.

Question 2

What is the EyeDropper API and which browsers support it?

Accepted Answer

The EyeDropper API is a web standard (W3C draft, implemented in Chromium 95+) that lets a webpage trigger the operating-system color-picker tool — the same one used in native design apps like Figma's eyedropper. It can pick colors from anywhere on your screen, including outside the browser. Supported in Chrome, Edge, Opera, Brave, and Chromium-based browsers. Not yet supported in Safari or Firefox (as of early 2026). When unsupported, the button is hidden and only the image-picker mode is available.

Question 3

Why does HSL show different values than my design tool?

Accepted Answer

HSL has multiple conventions. We use the CSS-standard HSL (matching what you would write in CSS as hsl(120, 100%, 50%)), where H is 0-360°, S and L are 0-100%. Photoshop uses HSB (Hue/Saturation/Brightness) which is different — HSB lightness goes to 100% at saturated colors while HSL lightness goes to 50% at saturated colors and 100% only at white. If your design tool shows HSB, expect the L value to look very different even though the underlying color is the same.

Question 4

What does the WCAG contrast ratio number mean?

Accepted Answer

WCAG 2.1 measures color contrast as a ratio from 1:1 (no contrast — same color) to 21:1 (maximum — pure black on pure white). For body text, you need ≥4.5:1 against the background to meet WCAG AA, or ≥7:1 for AAA. For large text (18pt+ or 14pt bold), 3:1 suffices for AA. The two numbers we show — vs. white and vs. black — tell you whether you can use this picked color as a text color on a white or black background, or whether you need to darken/lighten it.

Question 5

Can I pick a color from a PDF or video?

Accepted Answer

Not directly through the image upload (we accept image MIME types only). But: (1) if you can take a screenshot of the PDF page or paused video frame and paste it in, that works; (2) on Chromium browsers, the EyeDropper API can pick from any pixel on your screen — including PDF viewers and video players — without needing to upload anything. The EyeDropper button is the right tool for video/PDF colors.

Question 6

Are the colors my picker returns 100% accurate?

Accepted Answer

For sRGB images, yes. The Canvas API returns the exact stored pixel value. Caveats: (1) JPEG compression can shift colors near sharp edges — what looks like one color to your eye may be a transition pixel; zoom in mentally to make sure you are sampling a flat region; (2) for images with embedded color profiles (e.g. ProPhoto RGB or Display P3), the browser converts to sRGB on display, so what we report is what your CSS would produce, not the original wide-gamut value; (3) screen-side EyeDropper picks include any monitor color calibration — what is "blue 30%" on a calibrated monitor may differ from another display.

Question 7

Why are some pixels not the color I expected?

Accepted Answer

Three common reasons: (1) anti-aliasing creates intermediate pixels at edges between two colors — clicking right on a logo border often returns a blended value; (2) JPEG compression introduces 8×8-block artefacts especially in red/blue channels; (3) PNG screenshots of overlapped UI elements may include partial transparency. Zoom the image in your OS viewer first to find a flat region of the target color, then sample.

Question 8

Is my image uploaded to your servers?

Accepted Answer

No. The image is decoded with FileReader and drawn to a canvas in your browser tab. No fetch, no XHR, no analytics ping containing image data. You can confirm by opening DevTools → Network, picking colors, and observing that no requests are made. Your design assets, screenshots, and references stay on your machine.

Question 9

What about transparency and alpha channels?

Accepted Answer

For RGBA images, we return the RGB values of the visible color but ignore the alpha channel in the HEX/RGB/HSL outputs. If you need to preserve alpha for CSS rgba() output, append the alpha manually (e.g. rgb(255, 0, 0) → rgba(255, 0, 0, 0.5)). For fully transparent pixels, the underlying canvas returns RGB(0,0,0) — which is why clicking on a transparent area sometimes returns black.

Format	Best Used For	Precision
HEX (#RRGGBB)	CSS, design tools (Figma, Sketch), web development	24-bit (16.7M colors)
RGB (r,g,b)	Programmatic manipulation, image processing, opacity via RGBA	24-bit (16.7M colors)
HSL (h,s,l)	Designer-friendly editing, programmatic theming, lighter/darker variants	~16.7M (rounded to integer h/s/l)
OKLCH	Modern CSS Color Module 4, perceptually uniform palettes	32-bit float per channel
Pantone PMS	Print, branding, physical product matching	Spot-color library (limited gamut)

Free Online Color Picker: Pick Colors From Images & Screen

Image Pixel Picker

Native Screen EyeDropper

HEX, RGB, HSL + Contrast

100% Client-Side

Pixel-Accurate Color Pick From Any Image Or Screen

Which Color Format Should You Use?

Typical Color-Pick Workflows

Accessibility & Contrast at a Glance

Related Color & Design Utilities