Try it
Drop an image here
or click to select
Select or drop an image to see extracted colors
Extract dominant colors from any image.
Perceptual color merging and composition-aware scoring —
tuned for illustrations, artwork, and SNS thumbnails.
npm install colorlip Drop an image here
or click to select
Select or drop an image to see extracted colors
import { getColors } from "colorlip/sharp";
const colors = await getColors("photo.jpg");
colors[0].hex; // "#2A62A8"
colors[0].css.oklch; // "oklch(0.49 0.12 256.7)"Requires sharp as a peer dependency.
import { getColors } from "colorlip/canvas";
const colors = await getColors(imgElement);
// Also: Blob, ImageBitmap, URL stringStructured palette analysis with role-based selection: a representative dominant color, a perceptually distant accent, and compact swatches.
import { getPalette } from "colorlip/sharp";
const palette = await getPalette("photo.jpg");
palette.dominant // Most prominent color
palette.accent // Complementary accent
palette.swatches // All extracted ColorlipColor[]Each extracted color includes RGB, hex, HSL, perceptual color spaces, CSS strings, and hue classification.
{
r: 42, g: 98, b: 168,
hex: "#2A62A8",
percentage: 0.34,
hue: 213, saturation: 75, lightness: 41,
hueCategory: "blue",
lab: { L: 41.2, a: -2.3, b: -40.1 },
lch: { L: 41.2, C: 40.2, H: 266.7 },
oklab: { L: 0.49, a: -0.03, b: -0.12 },
oklch: { L: 0.49, C: 0.12, H: 256.7 },
css: {
rgb: "rgb(42 98 168)",
hsl: "hsl(213 60% 41%)",
lab: "lab(41.2 -2.3 -40.1)",
lch: "lch(41.2 40.2 266.7)",
oklab: "oklab(0.49 -0.03 -0.12)",
oklch: "oklch(0.49 0.12 256.7)"
}
}| Option | Default | Description |
|---|---|---|
numColors | 3 | Number of colors to extract |
saturationThreshold | 0.15 | Minimum saturation (0–1) |
brightnessMin | 20 | Minimum brightness (0–255) |
brightnessMax | 235 | Maximum brightness (0–255) |
quantizationStep | 12 | Color quantization step size |