Image color picker

Need the exact colour of a logo, a product photo or a screenshot of a design? This colour picker lets you upload an image and click any pixel to read its HEX and RGB values. It also extracts the dominant colours, giving you a ready-made palette for a design or brand guide.

How to use it

1. Select or drop an image (PNG, JPEG, WebP and other browser-supported formats).
2. Click anywhere on the preview to read the colour under the cursor.
3. Copy the HEX or RGB value, or use the extracted palette.

How it works

The image is drawn onto an HTML canvas in your browser. Clicking reads the red, green and blue values of that pixel with getImageData. The dominant palette is computed by grouping similar pixel colours and ranking the groups by how many pixels they contain.

Example

Clicking the blue in a logo might return #1A73E8, or rgb(26 115 232). Use it directly in CSS, or convert it to HSL with a colour converter to build lighter and darker variants.

Getting accurate colours

• Avoid edges. Anti-aliased edges blend the colour with the background; click inside solid areas.
• JPEG artefacts vary neighbouring pixels slightly. Sample a few points, or use the original PNG or SVG logo if available.
• Shadows and lighting in photos change the measured colour; a photo of a red product contains many reds.
• Colour profiles: images with wide-gamut profiles such as Display P3 may be converted to sRGB when displayed, so values can differ slightly from design tools.

Images never leave your device.