All examples By author By category About


HSL Decomposition

Decomposing an image's color information. Click an image to see it decomposed.

Pixels have been grouped by hue, saturation and lightness into discrete bins. Lightness is plotted on the x-axis, saturation on the y-axis and hue is displayed directly in the cells formed by the intersection of the other two. Each cell's size is determined by the frequency of pixels in that intersection. Treemaps are used to show the relative frequency of the various hues within each cell.

See this block for an alternative design using circle packing instead of treemaps.

Images source: National Gallery of Art's Highlights