Color Picker from Image

Pick any colour from an image

Saw the perfect shade in a photo, a logo or a screenshot and want its exact code? The Color Picker from Image works like the eyedropper in a design app: upload a picture, click or tap a pixel, and get its HEX, RGB and HSL values ready to copy into CSS, Figma, Canva, PowerPoint or a paint shop’s colour matcher.

A magnifying loupe shows the pixels around your pointer, so you hit the colour you mean rather than an anti-aliased edge. Every pick is saved to a short history on your device, and the tool also extracts the image’s dominant colour palette — useful for building a brand scheme from a product photo or matching a website to a hero image. The image is analysed in your browser and is never uploaded.

How to use the Color Picker from Image

1. Drop an image on the upload area, click to choose one, or paste a screenshot with Ctrl+V.
2. Move the mouse over the image to see the magnified pixels, then click to pick. On a phone, touch and drag — the loupe appears above your finger — and lift to pick.
3. Copy the HEX, RGB or HSL value with the button next to it.
4. Click any swatch under “Recent picks” to bring that colour back.
5. Scroll to “Dominant colours” to see the main palette, change how many colours you want, and copy it as a list or as CSS variables.

Color Picker from Image features

HEX, RGB and HSL explained

RGB describes a colour as amounts of red, green and blue light from 0 to 255 each — rgb(255, 99, 71) is the tomato red of CSS. HEX is the same three numbers written in hexadecimal, two digits each: 255 → FF, 99 → 63, 71 → 47, giving #FF6347. HSL describes the same colour as hue (an angle on the colour wheel), saturation and lightness: hsl(9, 100%, 64%). HSL is the easiest to tweak by hand — lower the lightness for a darker shade, lower the saturation for a muted one.

To translate between these and other formats such as CMYK, use the colour converter; to find the nearest named colour, try the colour name finder.

How the palette is extracted

The image is sampled down to about 128 pixels on its longest side, transparent pixels are ignored, and the remaining colours are grouped with k-means clustering: starting points are chosen with the k-means++ method, then each pixel joins its nearest group and every group moves to the average of its members until nothing changes. Each swatch is the average colour of one group, and the percentage shows how much of the picture it covers. The seed is fixed, so the same image always gives the same palette.

Averages favour large areas, so a small but striking accent — a red logo on a grey wall — may not appear as its own swatch. Pick such accents directly with the eyedropper, or build a full scheme around one colour with the colour palette generator.

Tips for accurate colour picking

• Pick from flat areas. Edges of text and shapes are blended with the background (anti-aliasing), so the pixel right on an edge is a mix of both colours.
• Prefer PNG screenshots to JPG photos. JPG compression shifts colours slightly and adds noise, especially around sharp edges; neighbouring pixels can differ by several units.
• Photos vary pixel by pixel. Lighting, shadows and sensor noise mean a “blue” wall contains many blues. Pick a few spots and compare them in your history.
• Screens differ. The code is exact, but how it looks depends on the display’s calibration and colour profile — check printed or painted matches under real light.
• Check readability. If you use a picked colour for text, test it against its background with the contrast checker.