Color Picker: Pick HEX, RGB & HSL From Any Image or Screen
Upload an image and click a pixel to capture its exact color as HEX, RGB, and HSL, with live WCAG 2.1 contrast ratios against black and white. On Chromium browsers, the native EyeDropper API samples any pixel on screen. Free and 100% in your browser.
Drop an image here, or click to choose
PNG, JPG, WebP, GIF, or AVIF · processed locally
Image Pixel Picker
Upload any PNG, JPG, WebP, or AVIF and click anywhere to capture that pixel’s exact color. The image renders to a canvas locally; no upload to a server.
Native Screen EyeDropper
On Chromium browsers, use the system EyeDropper API to pick colors from anywhere on your screen — outside the browser window too — with sub-pixel precision.
HEX, RGB, HSL + Contrast
Every pick returns HEX, RGB, and HSL formats with one-click copy. Also shows the WCAG 2.1 contrast ratio against pure black and pure white for accessibility decisions.
100% Client-Side
No uploads, no servers. Image processing happens entirely in your browser via the HTML Canvas API. Works offline once the page is loaded.
Color picker: capture HEX, RGB, and HSL from any pixel
A color picker reads the exact color of a pixel and returns it as code. Upload an image and click a pixel, or use the screen EyeDropper on Chromium browsers, and you get the HEX, RGB, and HSL values plus live WCAG 2.1 contrast ratios against white and black. Everything runs in your browser via the Canvas API — free, no upload.
How to pick a color from an image
- Drag an image onto the drop zone, or click Choose Image — PNG, JPG, WebP, GIF, and AVIF are supported.
- Hover over the canvas to preview the color under the cursor in real time.
- Click (or tap on mobile) the pixel you want to capture it as the active color.
- Copy the HEX, RGB, or HSL string with the one-click copy buttons, and read the contrast ratios against white and black.
- On Chromium, click Pick from screen to open the native EyeDropper and sample any pixel on your display, even outside the browser.
- Reuse earlier colors from the Recent picks strip, which keeps your last 16 picks.
How a pixel becomes a HEX code
Your image is drawn to an HTML <canvas>, and the pixel under your cursor is read with Canvas getImageData, which returns four integers per pixel: red, green, blue, and alpha, each 0–255. The RGB triplet is then formatted three ways. HEX is each channel written as a two-digit base-16 number (255 becomes FF), so screen colors span 24 bits — 16,777,216 values. HSL re-expresses the same color as hue (0–360°), saturation, and lightness for easier tweaking.
The screen sampler uses the WICG EyeDropper API (Chromium 95+). Its open() method resolves to a sRGBHex string like #3B82F6, which we parse back into RGB. Note that screen colors are additive — red, green, and blue light added together make white — while print uses subtractive CMYK inks that absorb light, so a vivid on-screen color can fall outside the smaller CMYK gamut and print duller.
"This API enables authors to use a browser-supplied eyedropper in the construction of custom color pickers."— WICG EyeDropper API specification
Worked examples: pixel → values
A blue button pixel
RGB(59, 130, 246) → #3B82F6 → hsl(217, 91%, 60%) · contrast vs white 3.68:1, vs black 5.71:1
Pure red
RGB(255, 0, 0) → #FF0000 → hsl(0, 100%, 50%) · contrast vs white only 4.00:1
Mid gray
RGB(128, 128, 128) → #808080 → hsl(0, 0%, 50%) · vs white 3.95:1, vs black 5.32:1
Edge case · one hex digit flips compliance
Gray #777777 scores 4.48:1 against white — it fails WCAG AA body text (needs 4.5:1) by 0.02. Darken it by one step to #767676 and it hits 4.54:1 and passes. A single hex digit is the difference between accessible and not, which is why the live ratio matters more than eyeballing.
Color format reference
Each format is the same color in a different notation. Pick HEX for static CSS, HSL when you compute lighter or darker variants, OKLCH for perceptually uniform palettes, and Pantone only for print.
| 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) |
WCAG 2.1 contrast thresholds
| Text size | AA minimum | AAA minimum |
|---|---|---|
| Normal body text | 4.5:1 | 7:1 |
| Large text (18pt+, or 14pt bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | — |
The exact contrast math, and why it is not a simple average
The contrast ratios are computed with the literal W3C relative-luminance formula, not a brightness shortcut. Each channel is gamma-decoded — values at or below 0.03928 divide by 12.92, higher values use ((c + 0.055) / 1.055)^2.4 — then weighted 0.2126·R + 0.7152·G + 0.0722·B. Green dominates because the eye is most sensitive to it; blue barely counts. The ratio is (L_lighter + 0.05) / (L_darker + 0.05), which is why even pure black on white tops out at exactly 21:1, never infinity.
Two gotchas this tool surfaces: HSL values are rounded to integers, so two visually distinct pixels can report the same hsl() string while their HEX differs. And the alpha channel is dropped — clicking a fully transparent area returns RGB(0,0,0) because that is what the canvas stores under the transparency, not because the pixel is black.
Runs 100% in your browser
Your image never leaves your device. It is decoded with FileReader, drawn to a canvas, and read locally — no uploads, nothing leaves your device. I tested picking from PNG logos, JPG screenshots, and transparent PNGs, plus the screen EyeDropper in Chrome and Edge. Large images are downscaled to a 900px display width for smooth hovering, but pixels are still read at full native resolution, so a picked color is exact. Confirm privacy by picking with your network disconnected.
Frequently asked questions
Is this color picker free?
Yes — 100% free, no signup, no usage cap. Pick unlimited colors and copy the HEX, RGB, or HSL into any personal or commercial project.
Does my image get uploaded?
No. The image is decoded and drawn to a canvas in your browser tab, then read pixel-by-pixel. No fetch, no XHR, no analytics ping containing image data. It works offline once the page loads.
Why does HSL differ from Photoshop?
Photoshop shows HSB (Brightness), not CSS HSL (Lightness). A saturated color reads 100% brightness in HSB but 50% lightness in HSL — same color, different number.
Which browsers support the screen EyeDropper?
Chromium 95+ (Chrome, Edge, Opera, Brave). Safari and Firefox do not support it as of mid-2026, so the button is hidden there and you use image-picking instead.
Related color & design tools
Convert a pick between HEX, RGB, HSL & CMYK
Color MixerBlend two picked colors into a midpoint
Palette GeneratorBuild a 5-shade palette from a base color
Contrast CheckerVerify WCAG AA/AAA on a picked color
CSS GradientTurn two picks into a CSS gradient
CSS FilterShift hue, brightness & saturation in CSS
GlassmorphismFrosted-glass cards from a tint color
Border RadiusRound corners with live CSS output
Guide: HEX, RGB, HSL & OKLCHHow the color formats relate
All ToolsBrowse the full free toolk collection
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.