Browser-native color extraction

Steal colors from any image

Extract average, dominant, and palette colors with property analysis — all in a 15KB package with zero dependencies.

npm i chromancy
Live demo
Loading artworks...
chromancy() result
Waiting for image...
Capabilities

Everything you need from an image

Six powerful features packed into a tiny, zero-dependency library that works in every modern browser.

01

Average, Dominant & Palette

Get the average color, the single most dominant color, or a full palette of distinct colors from any image.

02

Multiple Output Formats

Receive colors as RGB, HEX, HSL, or raw {r,g,b} objects. Pick the format that fits your pipeline.

03

Image Properties

Analyze brightness, warmth, saturation, and contrast to make smart, data-driven design decisions.

04

Web Worker Support

Offload heavy analysis to a worker thread so your UI stays buttery smooth, even on large images.

05

Batch Processing

Analyze multiple images in parallel with a single call. Perfect for galleries, grids, and bulk workflows.

06

Zero Dependencies

Only ~15KB minified. No heavy image-processing libraries. Just the browser Canvas API, done right.

Quick start

Two lines. That's it.

Pass an image element or a URL. Get colors back. No configuration required.

import { chromancy } from 'chromancy';

const result = await chromancy('https://example.com/photo.jpg');

// result.averageColor  -> "rgb(128, 64, 32)"
// result.dominantColor -> "rgb(200, 100, 50)"
// result.palette       -> ["rgb(...)", "rgb(...)", ...]
// result.properties    -> { brightness, warmth, saturation, contrast }

Ready to extract?

Play with the interactive demo or dive straight into the API documentation.