Image Color Picker and Screen Eyedropper

Upload one JPG, PNG, or WebP image, wait for the preview to load, then click or tap the pixel you want to sample. The image is displayed at up to 300 pixels high while the canvas retains its natural pixel dimensions, and the click handler scales the preview coordinates to the original raster, so sampling is not limited to the preview's CSS display size. When the image loads, the implementation creates an off-screen canvas using the image's natural width and height and draws the decoded image into it. A click position is converted proportionally:

sourceX = displayedClickX / displayedWidth × naturalWidth
sourceY = displayedClickY / displayedHeight × naturalHeight

The coordinates are rounded down to one source pixel, and getImageData() returns its red, green, blue, and alpha channels. The tool displays the RGB channels and computes uppercase HEX. This is more precise than taking the CSS-scaled preview color because interpolation can blend neighboring pixels on screen — though it still represents the browser-decoded raster, not necessarily untouched raw file channel values before color management.

A six-digit HEX color uses two hexadecimal digits for each RGB channel in the form #RRGGBB, and RGB expresses red, green, and blue intensity from 0 to 255. Both describe the same opaque sRGB-style triplet in ordinary web usage:

Hex digits are case-insensitive in CSS; the tool outputs uppercase letters for consistency. It does not output HSL, HSV/HSB, LAB, LCH, CMYK, named colors, or eight-digit HEX alpha values.

When window.EyeDropper is available, the interface shows Open Screen Eyedropper. Selecting it opens the browser's native magnifying picker; choose a pixel visible anywhere on the screen, and the tool converts the returned sRGB HEX value into both HEX and RGB. The browser API generally requires a supporting browser, a secure context such as HTTPS, a direct user action, and interaction with the native picker. If you cancel the picker, no new color is selected, and because support varies, the button is hidden when the API is unavailable.

On unsupported or mobile environments, the interface instructs you to tap the uploaded preview instead. There is no active manual <input type="color"> fallback exposed by the current UI.

The intended inputs are JPEG/JPG for photographs, PNG for graphics and transparency, and WebP for modern web images. Only one image is active at a time; the tool does not accept SVG through its declared interface, process a batch, or download a palette file. Animated formats are outside the intended scope — the canvas represents the decoded frame available when drawn.

Canvas returns an alpha channel, but the interface ignores it and reports only RGB/HEX, so a fully transparent pixel may read as #000000 without communicating that it is transparent, and a semi-transparent pixel's stored RGB is not always the color seen when composited over a page background. Edges, text, and curves often use anti-aliasing, so a click one pixel away can produce a different value; JPEG artifacts, gradients, shadows, resizing interpolation, and color profiles have similar effects. Sample several nearby pixels and choose a representative interior point for brand colors.

Images can embed ICC color profiles or use wide-gamut spaces, and browsers may convert them for display and canvas access according to browser and device rules. The returned RGB value is therefore the canvas/browser interpretation, commonly suitable for sRGB web use, not a full preservation of original color-space metadata.

For print production, product color approval, medical imaging, or other color-critical work, use a color-managed application that identifies the source profile and target color space. HEX and RGB alone do not capture CMYK inks, spot colors, viewing conditions, or device calibration.

Although the route name contains "color-palette," the live interface retains only the currently picked color. Build a small palette manually by sampling a background color and copying its HEX into a document, then sampling primary, accent, and neutral colors, copying each before the next selection. The tool does not automatically identify dominant colors, cluster similar tones, rank frequency, preserve a swatch history, or export CSS variables/JSON. After copying selected values, create role-based design tokens:

:root {
  --color-brand: #1A73E8;
  --color-accent: #F9AB00;
  --color-surface: #F8FAFC;
  --color-text: #172554;
}

Name tokens by role rather than appearance — --color-brand is easier to update than --blue-500 when branding changes. Picking a color does not prove that text using it will be readable: contrast depends on both foreground and background, text size and weight, and accessibility criteria, and the current tool does not calculate contrast ratios or WCAG pass/fail results. Compare foreground and background with a separate contrast checker, and never communicate status by color alone.

The uploaded image is decoded and sampled in the browser with canvas. No dedicated color-analysis API is required, and the screen eyedropper is controlled by the browser and begins only after a user action.

Images can contain private faces, documents, screenshots, or locations. Client-side processing reduces one exposure route but does not protect against a compromised device, browser extension, clipboard history, or screen recording. Use representative or redacted assets when appropriate.