Sampling an image's pixels and sorting the resulting colours by hue, saturation, or brightness extracts its palette

To extract a palette from an image, sample its pixels on a grid (loadPixels then read at intervals; coarser sampling gives fewer, more representative swatches) and collect the colours. Sorting those colours reveals structure: sorting by hue groups the image’s colour families, by saturation separates vivid from muted, by brightness orders light to dark, and by luminance approximates a greyscale ramp. The choice of sort key is a design decision that produces very different palette strips from the same image. This is the foundational move behind data-driven colour schemes, colour quantisation, and image-to-palette generative pieces.

Examples

P_1_2_2_01 samples an image at a mouse-controlled resolution and sorts the extracted colours by hue (key 6), saturation (7), brightness (8), or greyscale luminance (9), drawing the palette as a strip.

Assessment

Extract 16 colours from an image and produce two palette strips: one sorted by hue, one by brightness. Explain when a saturation sort would be more useful than a hue sort.