Palette Extraction

2 min read

Palette Extraction

Get palettes from strings and images.

Usage

# getPaletteFromImage(url: string, count: number=6, quality: number = 10) => Promise<Palette | undefined>

Get palettes from images. Because the image is loaded asynchronously, a promise is returned. When the image is successfully loaded, the obtained palette is returned. When the image fails to load, return undefined.

count is the number of colors expected to be included in the palette, the default is 6. It needs to be an integer and cannot be larger than 50.
quality must be an integer with a value of 1 or greater, the default is 10. This number determines how many pixels will be skipped before the next pixel is sampled. The larger the number, the faster the extraction.

import { getPaletteFromImage } from '@antv/smart-color';
const url = 'sea.jpeg';
getPaletteFromImage(url);
// {
//   name: "image",
//   semantic: null,
//   type: "categorical",
//   colors: [
//     { model: "rgb", value: { r: 58, g: 169, b: 179 }, },
//     { model: "rgb", value: { r: 203, g: 220, b: 227 }, },
//     { model: "rgb", value: { r: 143, g: 197, b: 206 }, },
//     { model: "rgb", value: { r: 7, g: 64, b: 120 }, },
//     { model: "rgb", value: { r: 13, g: 100, b: 143 }, },
//     { model: "rgb", value: { r: 52, g: 143, b: 118 }, }
//   ]
// }

# getPaletteFromString(string: string) => Palette

Get palettes from string. The string needs to be composed of hexadecimal string, split by commas.

import { getPaletteFromString } from '@antv/smart-color';

getPaletteFromString("#FB9747,#DE5844,#52BFC1,#22A34C");
// {
//   name: "code",
//   semantic: null,
//   type: "categorical",
//   colors: [
//     { model: "rgb", value: { r: 251, g: 151, b: 71 } },
//     { model: "rgb", value: { r: 222, g: 88, b: 68 } },
//     { model: "rgb", value: { r: 82, g: 191, b: 193 } },
//     { model: "rgb", value: { r: 34, g: 163, b: 76 } }
//   ]
// }