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

Page: https://hirantha.me/tools/color-picker-from-image
Part of: Hirantha Sandaruwan Lakshan free tools (https://hirantha.me/tools)
Updated: 2026-10-15

Click any pixel of a photo to get its HEX, RGB and HSL value, magnify it, and pull a five-colour palette out of the picture. Runs in your browser.

This is a free tool that runs in the browser: open the page to use it. File tools process files on the visitor's own device; files are never uploaded or stored. No account, sign-up, payment or watermark.

Open a picture, move over it and read the colour under the pointer as HEX, RGB and HSL, with a magnifier that shows the pixels around it. Click or tap to keep a colour in your list, and copy any value with one button. One more button builds a five-colour palette from the whole picture. It all runs in your browser and the image is never uploaded.

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.

The same colours in the three formats the tool shows:
| Colour | HEX | RGB | HSL |
| --- | --- | --- | --- |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Orange | #FF8000 | rgb(255, 128, 0) | hsl(30, 100%, 50%) |
| Steel blue | #336699 | rgb(51, 102, 153) | hsl(210, 50%, 40%) |
| Mid grey | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |

Q: How do I get the HEX code of a colour in a photo?
A: Drop the photo on the page, hover over the spot you want and click it. The HEX code appears beside the picture and is added to your list, and the Copy button puts it on your clipboard. On a touch screen, tap the spot, then use the fine-tune buttons to move one pixel at a time.

Q: Why is the colour slightly different from what I expected?
A: Three common reasons. JPEG compression blurs colour around edges, so pick from the middle of a flat area. A picture with an embedded colour profile can differ a little from what a photo editor reports, because the browser shows sRGB. And with fingerprinting protection on, browsers may add tiny noise to pixels read from a canvas, so a value can be off by one.

Q: Does the screen eyedropper work in every browser?
A: No. The EyeDropper API is in Chrome and other Chromium browsers such as Edge on a computer. It is not in Firefox, Safari or Chrome for Android, and it only works on secure (https) pages. The button appears only where it is available. Picking colours from the image itself works everywhere.

Q: How does the five-colour palette work?
A: It uses median cut on a small copy of the picture: all the exact colours go in one box, which is split in two at the median along its widest colour channel, again and again until there are five boxes, and each box is averaged. The shares show how much of the picture each colour stands for. You can ask for 3 or 8 colours instead.

Q: Will I get the same palette every time?
A: Yes. There is no random step, and the result depends only on how many pixels of each colour there are. The same picture always gives the same palette, in the same order.

Q: Does it work on a phone or with a keyboard?
A: Yes. Tap the picture to pick a colour, and use the Left, Up, Down and Right buttons to fine-tune by one pixel. With a keyboard, focus the picture, move with the arrow keys (Shift for 10 pixels), and press Enter to keep the colour. The magnifier shows an 11 by 11 block of pixels around the current one.

Q: Can I pick from a transparent PNG?
A: Yes. If the pixel is partly see-through the page says how opaque it is. The HEX, RGB and HSL values show the colour itself and ignore the transparency. A fully transparent pixel has no meaningful colour and usually reads as black.

Q: Is my image uploaded anywhere?
A: No. The picture is decoded and read inside your browser tab and never sent over the network.

Sources: EyeDropper API - MDN (https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API); CSS Color Module Level 4: converting between HSL and sRGB - W3C (https://www.w3.org/TR/css-color-4/); WCAG 2.2: relative luminance and contrast ratio - W3C (https://www.w3.org/TR/WCAG22/); Median cut - Wikipedia (https://en.wikipedia.org/wiki/Median_cut); CanvasRenderingContext2D.getImageData() - MDN (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData)

Related tools:

- [Colour converter](https://hirantha.me/tools/color-converter.md): Convert a colour between HEX, RGB, and HSL.
- [Colour contrast checker](https://hirantha.me/tools/color-contrast-checker.md): Check the WCAG contrast ratio of a text and background colour, see AA and AAA pass or fail for normal and large text, and get the nearest colour that passes.
- [Image filters and adjustments](https://hirantha.me/tools/image-filters.md): Adjust brightness, contrast, saturation, hue, grayscale, sepia, invert and blur with a live before and after view. Same result in every browser.
- [Crop an image](https://hirantha.me/tools/image-crop.md): Crop a photo to any rectangle, with optional aspect ratio presets.
- [CSS gradient generator](https://hirantha.me/tools/css-gradient-generator.md): Build linear, radial and conic CSS gradients with any number of colour stops, a live preview and copy-ready code. Repeating gradients and oklch blending included.