palette-extraction

Palette Extractor

_{image credit: The Met}

See the demo

The javascript palette extractor returns the palette calculated for an ImageData.

The implementation is largely based on Palette-Based Photo Recoloring (Chang and al. 2015), section 3.2.

Using the library

Draw your image in a canvas and get the ImageData.data Uint8ClampedArray that represents a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 (included), using getImageData. Use that data to get the hexadecimal colors palette by simply calling processImageData with the expected palette colors count:

const data = canvasContext.getImageData(0, 0, canvas.width, canvas.height).data;
const hexPalette = paletteExtractor.processImageData(data, 5);