Pick a color from an image

Sample a pixel or small image patch and report its averaged colour in common formats.

freeworks offlinenothing uploaded
ToolColor Picker from Image
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

The coordinate is clamped inside the image, a square sample is clipped at the edges, and mean RGBA channels become hex, RGB, HSL, and alpha output. The selected sample size controls whether one pixel or a local average is used.

  • Coordinate zero and one-pixel sampling are initial values.
  • Edge clipping prevents reads outside the canvas.

Worked example

Sample the centre colour
Input
											Input: data:image/png;base64,iVBORw0KGgo=
X: 0
Y: 0
Sample size: 1
Output
												HEX: #7f7f7f
RGB: rgb(127, 127, 127)
HSL: hsl(0, 0%, 50%)

When to use this

Design tools sample brand colours, inspectors read pixels under a cursor, and palette workflows average noisy patches.

Edge cases

  • Outside coordinates clamp to the nearest edge.
  • A sample larger than the image becomes the available clipped region.
  • Semi-transparent pixels are averaged by channel rather than composited onto a background.

References