Anatomy
import { ChromaPanel } from "chroma-panel/panel";
import "chroma-panel/image";
<ChromaPanel modes={["image"]} imageOptions={{ maxColors: 12 }} />;Large images are downscaled before they are read, so a 4000x3000 photo never loads in full. A loaded image stays put when you close and reopen the picker, and is released when you replace it, remove it, or leave the page.
imageOptions is shorthand. These two are the same:
<ChromaPanel imageOptions={{ maxColors: 12 }} />
<ChromaPanel modeProps={{ image: { extractOptions: { maxColors: 12 } } }} />Sampling takes a few milliseconds, so it runs on the main thread. If you raise
size a lot, move it to a worker. Build the URL in your own source so your
bundler resolves it:
const url = new URL("chroma-panel/image-worker", import.meta.url);
const worker = new Worker(url, { type: "module" });
await extractPalette(file, { size: 400, worker });API reference
function extractPalette(source: Blob | File | string, options?: ExtractOptions): Promise<ExtractResult>Samples the dominant colours out of an image. Large images are downscaled before they are read, so a 4000x3000 photo never loads in full.
function quantize(data: Uint8ClampedArray, maxColors: number, alphaThreshold?: number): QuantizedSwatch[]The colour quantiser behind extractPalette, for when you already have pixel data.
Mode id
'image'. List it in modes to show the tab, and in the order you want the tabs.