Why use this over a Chrome eyedropper extension?

It runs in any browser, requires no install, and shows the exact pixel coordinates of the sampled value — useful when reporting bugs ('the color at 240, 380 should be #3b82f6').

Why does the picked color look slightly off from my screen?

Browsers apply ICC color profiles to displayed images. The HEX value is the raw byte value in the file, before display transform. For print-accurate reference, sample from the original file in a color-managed editor.

Is my image uploaded anywhere?

No — sampled via canvas in your browser. Internal brand assets, customer photos, and unreleased mockups stay private.

image · eyedropper · canvas · local

Pick a color from any image

Q: Does it work with very large images?

Yes — up to ~50 MP comfortably. The display is scaled to fit the viewport but the sampling reads from the original-resolution canvas, so picked colors are pixel-accurate even on downscaled previews.

Upload an image and click any pixel to read its HEX/RGB. All processing happens locally in your browser — no upload.

Color From Image

Upload

Image

—

local

HEX

—

picked

RGB

—

0-255

X / Y

—

pixel

input · color

Upload an image to start picking pixels.

Click any pixel on the image to read its color. Position is shown in original-image coordinates.

output · preview

Pick a pixel to see its color details.

Quick Start

How to pick a color from an image

Upload, click any pixel, copy the HEX. All local — no upload.

01
Upload an image
Any common format — PNG, JPG, WebP, GIF.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
uploadOKLCHCSS Color 4perceptuallive
image · colorlocal · sRGB
```
logo.png
```
loaded · normalisedOKLCH · ready
02
Click a pixel
Crosshair cursor on the canvas; clicking samples one pixel.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
clickhex · rgb · hslP3gamut-mappedlive
click · optionspixel · live
```
(x, y)
```
options applied · livelive
03
Read HEX & RGB
The right panel shows the exact color and its coordinates.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
readWCAG 2.2APCAAA · AAAcontrast
out · convertedcolor · ready
```
#3b82f6
```
converted · liveWCAG-aware
04
Copy & use
One click to clipboard.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
copyclipboardCSS varspalette JSONblob
ok · copiedready · done
```
✓ Copied HEX
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to pick from an image

Brand extraction, design comps, identification.

Brand color match

Sample a logo's exact pixel for brand documentation. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Comp matching

Replicate a design mock's color in production CSS. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Photography

Identify a key tone for color grading reference. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Pixel inspection

Verify rendered output matches expected color. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick reference

Faster than opening a full image editor. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

No uploads

Image stays in your browser — safe for confidential brand assets. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

Where does my image go?

Stays in your browser. We use a hidden canvas for pixel sampling — nothing is uploaded.

Does it work with very large images?

Yes, but browser memory limits apply. Compress huge raw photos first.

Why does the picked color sometimes look different from screen?

Browsers apply color profiles. The HEX is the raw byte value in the file.

Can I pick from a paste-buffer image?

Not yet — please upload from file.

Is anything sent to a server?

No — everything runs entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!