Image Colour Picker — Click to Pick, Extract | LazyTools

Image Tool

Image Colour Picker — Click to Pick & Extract 10-Colour Palette

Click any pixel in an uploaded image to pick its exact colour in HEX, RGB and HSL format simultaneously. Furthermore, the Extract Palette button identifies the ten most dominant colours in the image — using colour quantisation to group similar shades. Every colour in both the picker and the palette has individual copy buttons for each format.

Click any pixel to pick colourExtract 10-colour dominant paletteHEX / RGB / HSL all shownCopy per format and per colourNo server upload

How to use the Image Colour Picker

Upload your image

Drop any image onto the drop zone or click to upload. Furthermore, the image loads onto a canvas that supports pixel-level colour reading. A crosshair cursor appears when you hover over the image, showing the active click target.

Click any pixel to pick its colour

Click anywhere on the image to read the exact colour of the clicked pixel. Furthermore, the colour appears as a swatch with HEX, RGB. HSL values — all three formats display simultaneously with individual Copy buttons. Click anywhere else on the image to pick a new colour, updating the display instantly.

Extract the 10-colour palette

Click Extract 10-colour palette to identify the ten most dominant colours in the image. Furthermore, the palette uses colour quantisation to group similar shades and find the representative colours. Click any palette swatch to see its full HEX, RGB and HSL values.

HEX, RGB and HSL formats explained

Each colour format serves different contexts. Furthermore, knowing when to use each format prevents manual conversions between colour values.

Format	Example	Used in
HEX	#1D9E75	HTML/CSS, design tools, brand style guides
RGB	rgb(29, 158, 117)	CSS, JavaScript, Figma, canvas API
HSL	hsl(159, 69%, 37%)	CSS, dynamic colour adjustments, lightness manipulation

How colour extraction works

Pixel colour reading uses Canvas ImageData. Furthermore, palette extraction uses colour quantisation — grouping nearby colours into buckets. Selecting the most populated bucket as the dominant colour.

HEX = '#' + [R, G, B].map(v => v.toString(16).padStart(2, '0')).join('')

ImageData: ctx.getImageData(x, y, 1, 1).data → [R, G, B, A]
Quantisation bucket: round each channel to nearest 32 → reduces 16M colours to ~512 buckets
Dominant colours: sort buckets by pixel count, take top 10

Worked example: extracting brand colours from a logo

A designer receives a brand logo as a JPG and needs the exact HEX colour values for a CSS stylesheet. Using Image Colour Picker:

Clicking the primary brand colour produces the exact HEX value — #2D6A4F. Furthermore, the Extract Palette button shows all 10 dominant colours in the logo including secondary and background shades. Moreover, clicking each palette swatch copies the HEX value directly into the clipboard for pasting into the CSS file — no colour dropper tool in Photoshop required.

What is an image colour picker?

An image colour picker reads the exact colour value of a specific pixel or area in a digital image and converts it to colour code formats like HEX, RGB and HSL. Furthermore, designers and developers use colour pickers to extract exact brand colours from logos, match colours from reference images and sample colours from photographs for use in interface and graphic design. Without a picker, identifying the exact colour value of a pixel requires opening the image in design software, using the eyedropper tool and noting the colour code. Moreover, a browser-based picker with instant palette extraction removes multiple steps from this workflow.

Colour quantisation for palette extraction

Dominant colour extraction uses quantisation to reduce the thousands of colours in a photograph to a representative set. Furthermore, the MedianCut and K-means algorithms are the standard methods for palette extraction in professional tools. This tool uses a simpler bucket quantisation approach — grouping each colour channel into 32-value buckets — which runs instantly in the browser without a server. Moreover, the result produces the most visually prominent colour groups rather than averaging all colours, so the palette reflects the actual dominant tones of the image.

Why simultaneous HEX, RGB and HSL display saves time

Different design tools and programming contexts use different colour formats. Furthermore, CSS accepts all three — HEX for most declarations, RGB for alpha transparency and HSL for programmatic lightness adjustments. Figma and Sketch primarily show HEX and RGB. Providing all three formats simultaneously for every picked colour eliminates the repeated conversion that designers otherwise perform when moving colours between tools. Moreover, the individual Copy button for each format copies the exact notation used by the target tool — no manual reformatting needed.

Frequently asked questions

Can I pick colours from PNG images with transparency?+

Yes — the canvas reads fully transparent pixels as rgba(0, 0, 0, 0). Furthermore, clicking a transparent area of a PNG shows the background colour rather than any image colour. The picker reports the actual pixel value from the canvas, which fills transparent areas with the canvas default of black at zero alpha. Moreover, for transparent images, the colour swatch displays the transparent pixel as black — clicking opaque areas of the image gives accurate results.

How accurate is the pixel colour reading?+

The Canvas API reports the exact pixel colour stored in the image data. Furthermore, JPEG images use lossy compression that changes individual pixel values slightly from the original — the reported colour may differ slightly from the source image's intended colour. PNG images store pixel values losslessly and produce exact readings. Moreover, for extracting a precise brand colour from a JPG logo, the HEX value represents the actual pixel rather than the original intended brand colour — using the original vector file or PNG for brand colour extraction produces more accurate results.

What is the difference between HEX, RGB and HSL?+

HEX encodes colour as a six-digit hexadecimal number — #1D9E75 represents R=29, G=158, B=117. Furthermore, RGB expresses the same values as integers in the range 0–255 — rgb(29, 158, 117). HSL describes colour in three perceptually intuitive dimensions: hue (0–360 degrees), saturation (0–100%) and lightness (0–100%). Moreover, HSL is most useful when you need to create colour variants — adjusting only the lightness parameter in HSL produces a range of shades from the same hue while RGB requires calculating new R, G, B values for each shade.

Why does the palette not show pure black or pure white?+

The quantisation buckets group similar colours. Furthermore, pure white (#ffffff) and pure black (#000000) often appear as near-white (#e0e0e0) or near-black (#202020) in the extracted palette because photographs contain few truly pure pixels — lighting and compression create slight variations. Moreover, the dominant colours reflect the actual visual palette of the image rather than mathematical extremes. Click specific pixels in very bright or very dark areas to check whether they contain pure black or white.

Can I save the extracted palette?+

The palette displays as swatches in the browser. Furthermore, click each swatch to open the detailed HEX, RGB and HSL view with Copy buttons. The palette does not currently export to a file format like ASE or JSON. Moreover, for team use, copy each HEX value individually and record them in a brand colour guide document. A palette export feature is planned for a future version of this tool.

Related tools

→

Rate this tool

4.2

out of 5

★★★★★

345 ratings

5 ★

63%

4 ★

18%

3 ★

2 ★

1 ★

How useful was this tool?

★ ★ ★ ★ ★