Colour Picker From Image: HEX, RGB, HSL and a 5-Colour Palette

The colour comes from the original picture, not from the scaled copy on screen. The picture is drawn smaller to fit the page, so the tool turns your pointer position into a pixel of the original: the pointer's distance across the canvas's on-screen box, as a fraction, times the picture's width and height. A fraction is the same whatever the screen's pixel density or the CSS scaling, so on a high-DPI display it still picks the pixel under the pointer. That one pixel is copied alone into a 1 by 1 canvas with smoothing off and read back with getImageData. The arrow keys move the crosshair a pixel at a time (10 with Shift), and Enter keeps the colour.

HEX is the three channels in base 16. HSL comes from the conversion code in CSS Color Level 4: hue in degrees from 0 to 360, saturation and lightness in percent. The values are shown rounded to whole numbers, so rgb(51, 102, 153) reads hsl(210, 50%, 40%). A test converts a grid of 140,608 colours and 20,000 random ones from RGB to HSL and back without rounding and gets every one back unchanged; typing the rounded HSL numbers back in can land a few units away on a channel. A swatch's label is black or white, whichever has the higher WCAG 2.2 contrast ratio against it.

The palette uses median cut, a classic colour-reduction method. The picture is first shrunk to at most 128 pixels on its long side. All its exact colours are counted and placed in one box. The tool then repeatedly takes the box with the most pixels times the widest colour range, sorts its colours along the channel with the widest range and cuts where the running pixel count reaches half. The cut never separates identical colours. When there are as many boxes as colours you asked for (3, 5 or 8), each box becomes the average of its pixels. There is no randomness, and where pixels sit does not matter, so the same picture always gives the same palette.

The eyedropper button uses the browser's EyeDropper API, which can read any pixel on your screen, even outside the page. MDN marks it as experimental with limited availability and secure-context only, and its compatibility data lists it in Chrome 95 and Chromium-based browsers such as Edge on a computer, but not in Firefox, Safari or Chrome for Android (checked on 2026-10-15). Where it is missing the button is replaced by a note, and picking from the image works everywhere. Colours are the sRGB values the browser shows, and MDN notes that fingerprinting protection can add tiny noise to pixels read from a canvas.