Image Color Picker for HEX, RGB and HSL
Select a color from an image and inspect its HEX, RGB, or HSL value. Use the available screen-picking control where your browser supports it.
Color Picker workspace
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
Select a color from an image and inspect its HEX, RGB, or HSL value. Use the available screen-picking control where your browser supports it. The sampled value describes a pixel in the displayed image, not necessarily an original brand color. Compression, transparency, scaling, and color management can affect what you see. Check the selected color in the context where it will be used, including text contrast.
How to use the color picker
- 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.
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: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
Frequently asked questions
Do the images I pick from get uploaded anywhere?
No. Images are decoded with FileReader and drawn to an in-page canvas, then read pixel-by-pixel with getImageData — all processed locally in your browser. Toolk's page analytics do not receive your images or picked colors, and you can confirm by picking with the network disconnected.
Why is the screen eyedropper button missing in Safari or Firefox?
The screen sampler uses the WICG EyeDropper API, which Chromium browsers have shipped since version 95; Safari and Firefox have not adopted it as of mid-2026. The button hides itself there, so use image picking instead — or open the page in Chrome or Edge for full-screen sampling.
Why does the HSL value differ from Photoshop's?
Photoshop displays HSB, where brightness hits 100% for any fully saturated color, while CSS uses HSL lightness, where that same color reads 50%. It is the same pixel reported in two different cylinders — not a rounding error.
What happens when I click a transparent pixel?
The alpha channel is dropped during reading, so a fully transparent area returns RGB(0,0,0) — that is what the canvas stores underneath the transparency, not evidence the pixel is black. Pick from an opaque region of the image for meaningful values.
How do I know if a picked color passes accessibility?
Read the live contrast ratios shown against white and black, then take the HEX into the Color Contrast Checker at /tools/color-contrast-checker for full AA/AAA verdicts — one hex digit can flip compliance, as #777777 fails at 4.48:1 while #767676 passes at 4.54:1.