Image color code extraction/dropper tool (HEX/RGB/HSL) | ZeroTools

The color extraction workflow begins when you choose an image file using either the file selection dialog or drag-and-drop. The chosen file is read into memory using FileReader, converted into a Data URL, and assigned to an Image object.

Once decoded successfully as an image, it is drawn onto an HTML5 2D Canvas so its color values can be inspected. The operations of reading, image decoding, Canvas rendering, and pixel sampling all occur locally within the browser page.

When the decoded image exceeds 800 pixels in width or 500 pixels in height, it is scaled down proportionally to fit within both maximum limits.

For instance, an image measuring 1600x1200 is downscaled to approximately 667x500, while a wide 2000x500 image becomes 800x200 on the Canvas.

Images already within these limits are drawn at their natural dimensions. This upper boundary keeps the image manageable on screen and restricts the Canvas dimensions evaluated by downstream routines.

Crucially, this tool does not inspect the raw pixel data or uncompressed source data of the original image file directly. The browser decodes the file into an image and scales it via drawImage() if needed to construct the Canvas bitmap.

A single pixel on the downscaled Canvas may represent a resampled blend of multiple original pixels. Because image decoding, color profile handling, downscaling routines, color space conversions, and numeric precision vary across browser implementations, the extracted values may not match the original file numbers identically across all environments.

The accept="image/*" attribute on the file input provides a filtering hint to streamline file selection. It does not validate file integrity or ensure that a chosen file can be decoded.

The interface does not perform MIME type checks or show dedicated decoding error alerts, so unsupported or corrupt files may leave the Canvas empty or show previous state.

If an image fails to load, try re-selecting the file or using a standard format. Decoding large images also requires substantial browser memory before resizing to the 800x500 working Canvas.

An HTML Canvas element has both a CSS display size rendered on screen and an internal bitmap size defined by its canvas.width and canvas.height properties.

When responsive CSS shrinks the display element to fit smaller screens, these dimensions diverge. The tool listens for mouse hover events, determines the cursor offset relative to the Canvas bounding box, and multiplies by the ratio of internal dimensions to CSS dimensions.

The converted coordinate is truncated to an integer using Math.floor(), though mouse movements along the outer boundaries lack explicit edge clamping.

The tool samples RGBA values from the resulting coordinates, and clicking the image selects the color recorded during the most recent mouse hover event.

In this implementation, color selection relies on mouse hover tracking rather than direct touch tap coordinate recalculation.

Moving the mouse over the image updates the hover color preview and renders an 11x11 pixel magnifier. This magnifying glass samples from the active downscaled Canvas rather than the source image file.

The 11x11 region is enlarged onto a secondary 120x120 Canvas with imageSmoothingEnabled set to false, preserving sharp pixel boundaries.

A white target square marks the center pixel of the 11x11 patch to help visually compare it against surrounding colors.

This magnifier serves as a visual positioning aid for the active cursor area rather than an arbitrary-zoom inspection tool. It cannot recover sub-pixel information or native resolution detail lost during downscaling.

Touch interaction does not provide continuous hover coordinates like a mouse, meaning magnifier tracking is tailored to mouse cursor movement.

The standard pixel array returned by getImageData() provides Red, Green, Blue, and Alpha components ranging from 0 to 255. The tool utilizes the R, G, and B values to generate three distinct output formats: a 6-digit HEX code, rgb(), and hsl().

While the alpha channel exists in the internal pixel buffer, it is omitted from the displayed and copied color strings.

HEX notation converts R, G, and B integers into two-digit hexadecimal strings prefixed with #. Values below 16 receive a leading zero, converting R=79, G=70, B=229 into #4f46e5.

The RGB string formats the same integers into rgb(79, 70, 229), ensuring each value falls between 0 and 255 before generating the string.

HSL normalizes RGB channels to the 0–1 range by dividing by 255, then derives Hue, Saturation, and Lightness from the channel extremes and their differences.

Hue is formatted in degrees while Saturation and Lightness appear as percentages rounded to whole integers for display. This HSL string represents a mathematical transformation of the sRGB values delivered by Canvas rather than a distinct color space profile or print-calibrated color model.

Translucent areas require careful consideration because RGB values alone cannot reflect their composite visual appearance. Identical RGB values look significantly different depending on their alpha level and the underlying background color.

The tool does not output 8-digit HEX with alpha, rgba(), or composite blended values. Sampling a translucent pixel displays only the raw RGB components recorded in the Canvas buffer, which may diverge from source file expectations due to browser decoding and alpha storage conventions.

Alongside manual coordinate picking, the tool generates a heuristic palette of up to six prominent candidate colors. Rather than scanning every pixel in the source file, it resamples the main Canvas (already capped at 800x500) down to an off-screen 80x60 Canvas containing 4,800 pixels.

This two-tier reduction means fine lines, tiny motifs, or accent details may be diluted or absent from the candidate pool.

The 80x60 pixel array is scanned sequentially, skipping any pixel with an alpha value below 128. For pixels meeting this alpha threshold, only the RGB channels are evaluated without background blending.

Each color channel is quantized into buckets by dividing by 32, rounding to the nearest integer, and multiplying back by 32. Pixels sharing quantized values are grouped together, and occurrences in each bucket are counted.

Candidate buckets are evaluated in descending order of frequency. Instead of displaying a cluster mean or bucket center, the palette adopts the literal RGB values of the first sample pixel that was placed into that bucket.

Candidates are checked against already selected colors using standard Euclidean distance across RGB channels; if the Euclidean distance is under 60, the candidate is discarded as too similar.

This loop continues until up to six colors are chosen, though images with limited variety or high transparency may yield fewer.

This heuristic groups prominent quantized RGB clusters into distinct visual samples. It does not employ perceptual Delta E formulas, Lab or OKLab color models, hierarchical clustering, or machine learning scene analysis.

It cannot judge semantic visual importance, brand compliance, or accessible contrast ratios. Always verify required colors manually using the eyedropper on the active Canvas.

Selecting a color from the image or clicking one of the six candidate swatches updates the Selected Color section on the right. A swatch preview and 6-digit HEX label appear above individual read-only fields for HEX, RGB, and HSL values.

Each field contains an independent copy button that invokes navigator.clipboard.writeText() for that format alone. It does not perform a simultaneous multi-format copy or export the entire palette in one click.

Because clipboard operations are asynchronous, the tool awaits completion of the writing Promise before showing a temporary confirmation icon and status message.

If browser permissions, security policies, or execution contexts prevent clipboard access, copy operations may fail silently or require manual selection from the read-only text field.

Unconditional copy completion cannot be guaranteed across all browser configurations.

Clicking "Add to My Palette" places the current selected color into a temporary in-page palette, skipping duplicate HEX values. You can re-select saved colors, delete individual swatches, or clear the entire list.

This palette resides solely in React component state without saving to localStorage or external storage. Refreshing the browser or uploading a new image clears the palette, and there is no built-in file export, shared URL, or bulk copy option.

Copy needed values individually before leaving or reloading the page.

This utility allows you to inspect color values from image files that your browser can decode and draw to a standard Canvas. It does not read or modify embedded ICC profiles, nor does it allow configuring custom Canvas working color spaces.

It is not designed for rigorous raw pixel inspection, uncompressed RAW processing, or professional prepress color proofing. Results reflect downscaling, browser image decoding, and Canvas alpha handling.

The tool does not interface with the system-level EyeDropper API; sampling is restricted strictly to the image rendered inside the active Canvas element and cannot pick colors from the wider browser interface or desktop applications.

Supported output formats are 6-digit HEX, RGB, and HSL. The tool does not support CMYK, Lab, LCH, OKLab, OKLCH, Delta E comparisons, or alpha-inclusive color strings, nor does it provide image editing, cropping, or CSS stylesheet generation.

Image parsing, Canvas rendering, coordinate sampling, and candidate palette calculations run client-side using FileReader, Image, and Canvas APIs.

However, local component processing does not mean the entire website operates without network communication; analytics, advertising, and peripheral web assets may communicate over the network independently.

Verify organizational data policies before processing sensitive materials.

Candidate colors are derived from an 80x60 thumbnail using 32-step RGB quantization and Euclidean distance filtering. They do not evaluate perceptual aesthetics, text-to-background contrast compliance, or brand guidelines.

When designing user interfaces, evaluate contrast ratios and color harmonies using dedicated accessibility and palette tools.