Eyedropper & Palette Extractor from Image

Upload any image and pick exact pixel colors or automatically extract dominant 5-color palettes with hex codes. Runs entirely in your browser with zero server data upload.

Sample Image

100%

No Image Loaded

Drag and drop an image file, click to upload, or load one of our presets.

Hover or slide finger on image for optical loupe magnifier; click/tap to pick.Supports Ctrl+V / Cmd+V for image or SVG clipboard paste!

Dominant Color Palette

Auto Extracted

Colors:

Upload an image to extract dominant colors

Selected Color

Luminance: 0.235Light Tone

#3B82F6

Direct PickWCAG: Pass Black

Color Input / Adjust

Color Formats

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

HSVhsv(217, 76%, 96%)

CMYKcmyk(76%, 47%, 0%, 4%)

WCAG Accessibility Contrast

White Text

3.68:1FAIL

Black Text

5.71:1AA PASS

Color Harmonies

Calculated HSL

Complementary (180°)#F6AF3C

Analogous (±30°)

Tints & Shades

Recent Swatches

Click pixels on the image to build your custom palette history.

About Image Color Picker & Dominant Palette Extractor

Eyedropper & Palette Extractor from Image is a high-performance, 100% browser-based utility crafted for designers, UI developers, photographers, and digital artists. Extract true pixel-perfect color hex codes, calculate comprehensive color spaces (RGB, HSL, HSV, CMYK), test WCAG accessibility contrast ratios, and auto-generate 5-color dominant harmonies—all computed locally with zero server transmissions.

Precision Pixel Loupe

Our optical magnifier renders a live 9×9 pixel matrix around your cursor and finger. Pick the exact coordinate on any photo with zero interpolation distortion on desktop and mobile.

Median Cut Quantization

Rather than primitive frequency clustering, our Modified Median Cut (MMC) algorithm partitions color bounding boxes across 3D RGB space to extract distinct, balanced palettes.

100% Privacy & Offline

Your photos, proprietary UI mockups, and confidential artwork never leave your computer. Everything runs inside HTML5 Canvas sandboxes in your local memory.

Understanding Web Color Spaces

Format	Syntax Example	Primary Use Case	Range / Depth
HEX	#3B82F6	CSS styling, HTML tags, web design standards	16.7 Million Colors (24-bit)
RGB	rgb(59, 130, 246)	Screen displays, Canvas API, WebGL shaders	0 - 255 per channel
HSL	hsl(217, 91%, 60%)	Human color harmonies, hover states, design systems	Hue 0-360°, Sat/Lum 0-100%
CMYK	cmyk(76%, 47%, 0%, 4%)	Commercial print, magazines, physical packaging	Cyan, Magenta, Yellow, Key (0-100%)

Frequently Asked Questions (FAQ)

Are my uploaded images sent to any server?

No. All parsing, canvas rendering, pixel interrogation, and palette math happen 100% on the client side in your browser. No files or telemetry are transmitted to any backend.

How does the 5-color palette extraction work?

We use the Modified Median Cut algorithm. It iteratively divides pixel clusters along the color channel with greatest variance, generating representative colors that reflect the image's overall mood.

Can I paste an image or color directly from my clipboard?

Yes! Press Ctrl+V or Cmd+V anywhere on this page to paste screenshots, raw SVG markup, data URLs, or hex color codes instantly.

What is the Screen Eyedropper button?

In Chromium-based browsers (Chrome, Edge, Opera), the native EyeDropper API allows you to sample colors from anywhere on your monitor outside the browser tab.