Sample swatch
A visual preview of the clicked pixel color, shown beside its HEX value.
Manual image eyedropper
Sample HEX colors from a local image.
Choose an image from your device, click visible pixels on the preview, and collect exact HEX samples without sending the image to a server. Hue Codex keeps recent picks with canvas coordinates, contrast against white, one-click copy buttons, and a copy-ready sampled color list.
Free color utility
Image Eyedropper
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Local image
Click to sample
Instructions
- Upload an image file to load it into the browser-side sampler.
- Click the image preview to sample colors from specific pixels.
- Review sampled colors as they are added to the list.
- Copy the sampled color output for palettes, CSS values, or design handoff.
Images are processed locally in your browser.
How it fits
From color value to usable system.
Hue Codex treats each color as part of a larger workflow: conversion, accessibility, palette roles, CSS syntax, shareable URLs, and production exports.
Deterministic math
Color conversion follows CSS Color 4 conventions, including D50 Lab/LCH, D65 OKLab/OKLCH, and WCAG contrast thresholds.
Readable outputs
Every result is formatted for clear reading, project notes, documentation, and assistive technology.
Free sharing
Palette URLs can be bookmarked and sent without an account, making color decisions easy to revisit.
Quick overview
Hue Codex Image Eyedropper is a free browser-based tool for sampling HEX colors from a local image. It processes the image in the browser, lets you click pixels on the canvas preview, shows each sampled HEX value with canvas coordinates and contrast on white, and exports a copy-ready list of sampled colors.
- Use the image eyedropper to pick exact HEX colors from visible pixels in a local image preview.
- Images are processed in the browser rather than sent to a server by the tool.
- Each sample includes the HEX value, canvas x/y coordinates, and contrast ratio on white.
- The tool keeps the 10 most recent samples and gives each one a copy button.
- Coordinates refer to the preview canvas, so use them as sampling references rather than original-image pixel coordinates.
What the Hue Codex image eyedropper does
The Hue Codex image eyedropper lets you choose an image file from your device and sample colors by clicking the preview canvas. Each click reads the pixel under the pointer and converts that RGB value into a HEX color.
The sampled colors appear as a recent-picks list with a swatch, HEX value, canvas coordinates, contrast against white, and a copy button. The export panel lists sampled HEX values with their x/y positions for notes, palette building, or handoff.
Image eyedropper definition
An image eyedropper is a color sampling tool that reads a pixel from an image and returns its color value, commonly as a HEX code for design and web use.
How image color sampling works
When you choose an image, Hue Codex draws it onto a browser canvas. Clicking inside the displayed image reads one pixel from that canvas and converts the red, green, and blue channel values into a HEX color.
The sample is added to the top of the recent-picks list. The tool keeps the 10 newest samples so you can collect several colors from a logo, screenshot, product photo, or moodboard without losing the immediate context.
| Output | What it means | How to use it |
|---|---|---|
| HEX value | The sampled pixel converted to a web-friendly HEX color. | Copy it into CSS, color roles, palette notes, or another Hue Codex color tool. |
| Canvas coordinates | The x and y position of the click on the preview canvas. | Use it as a reference for where the color was sampled in the displayed preview. |
| Contrast on white | The contrast ratio between the sampled color and pure white. | Use it as a quick readability signal before checking final text/background pairs. |
| Recent samples | The latest sampled colors, capped at 10 picks. | Collect a small set of source colors before copying or refining them. |
Results shown by Hue Codex
The eyedropper displays sampled colors immediately as swatches and stores them in a copy-ready output. Each item can be copied individually, and the full export gives a simple list of HEX values with canvas positions.
Copy button
Copies the individual HEX color so it can be pasted into CSS, design tools, or palette documentation.
Coordinate note
Records the x/y position on the preview canvas, which helps trace where a color came from.
Clear control
Removes the current sample list when you want to start over with the same image or a different reference.
Best uses for an image eyedropper
Manual image sampling is useful when a specific pixel matters more than an automatically extracted palette. It gives you control over which part of an image becomes a color reference.
- Pick brand colors from a logo or screenshot when the original HEX values are not available.
- Sample UI colors from mockups, product screenshots, or website captures.
- Collect colors from photography, illustrations, packaging, or moodboards.
- Check how a sampled color contrasts against white before using it as text or an accent.
- Copy sampled HEX values into palette generators, contrast checkers, or color-role drafts.
Image sampling caveats
The color you sample depends on the image file, compression, scaling, color profile handling, and the exact pixel you click. Screenshots and photos often contain anti-aliased edges, shadows, reflections, and gradients, so nearby pixels can produce different HEX values.
Coordinates are based on the preview canvas after the image is fit into the tool, not necessarily the original image file dimensions. For final brand or accessibility work, confirm sampled colors against official source files and run contrast checks in the real UI context.
Quick answers
Image Eyedropper FAQ
What is the Hue Codex image eyedropper?
Hue Codex Image Eyedropper is a free browser-based tool that samples HEX colors from a local image by letting you click pixels on a preview canvas.
Are uploaded images sent to a server?
No. The tool processes the selected image locally in your browser and samples pixels from the canvas preview.
What color format does the eyedropper return?
The eyedropper returns sampled colors as HEX values, which are convenient for CSS, color roles, palette notes, and other color tools.
What do the x and y values mean?
The x and y values are the click coordinates on the preview canvas where the sample was taken. They are useful for reference, but they may not match the original image file coordinates.
Why does the tool show contrast on white?
Contrast on white gives a quick readability signal for the sampled color against a common light background. Final color pairs should still be checked in their real context.
How many colors can I sample?
The tool keeps the 10 most recent samples, with the newest sample shown first.
Can I copy individual sampled colors?
Yes. Each sampled color includes a copy button for the HEX value, and the export area lists sampled colors with their coordinates.
Why can nearby pixels produce different HEX colors?
Images often include gradients, shadows, compression artifacts, anti-aliasing, and texture. Moving even one pixel can change the sampled RGB value and resulting HEX color.