Visualize the distribution of red, green, blue

Report 256-level RGB and luminance distributions, summary statistics, and 16 display bins for an image.

freeworks offlinenothing uploaded
ToolImage Histogram
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

Each decoded pixel increments red, green, blue, and weighted luminance histograms. Minima, maxima, means, modes, and 16 compressed bins turn those counts into a readable report.

  • Eight-bit bins match Canvas channel data.
  • Sixteen display bins compress exact 256-value counts.

Worked example

Summarize a test tile
Input
											data:image/png;base64,iVBORw0KGgo=
Output
												Red: min=0, max=255, mean=127.5, mode=0
Green: min=0, max=255, mean=127.5, mode=0
16-bin RGB distribution included

When to use this

Photographers check clipping, vision lessons inspect channels, and quality reports compare brightness across exports.

Edge cases

  • Transparent pixels still contribute RGB bytes because alpha is not used to weight counts.
  • A narrow bright peak can disappear inside a 16-value display bin.
  • Without Canvas support, the source data URL is returned instead of a report.

References