Skip to content
client-side color graph library
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A color graph is a color palette arranged in an undirected, weighted graph. see more info on this concept here:

Mondrian painting to ->>> Mondrian color graph

colorgraph.js takes an <img> and extracts its color graph. The result is a color palette and an adjacency matrix

this library is meant for use on browsers, and requires the color quantization library RgbQuant (can work on node.js as well, but will require the node-canvas library)


1: quantize an image

// img: html <img> element
// num: number of colors to quantize into
// use_mode: Boolean, smooth the image using the mode of a 3x3 bucket (removes spurious 1px adjacency noise caused by down-scale sharpening)

quantized = colorgraph.quantize(img,num,use_mode)

    palette: [...], // quantized RGB palette
    out: {...}, // quantized datastructure from RgbQuant
    canvas: {...}, // quantized canvas for display
    sizes: [...] // normalized area of each color in palette

2: get color adjacency matrix (this is the node connectivity matrix that defines the graph)

// palette: input RGB palette
// canvas: canvas containing the image
// normalize: Boolean, normalize the adjacency matrix with respect to image perimeter size (for comparing the adjacency matrix of different sized images)

adjacency = colorgraph.get_connectivity_matrix(quantized.palette, quantized.canvas, normalize)

// row-major adjacency matrix (ith row = ith palette color)

3: ColorWheel API (optional) feel free to use my colorization API, free for non-commercial projects

// model: 'dribbble', 'nes', 'soviet', 'anime', 'animation', 'pixelart', 'poster', 'painting'
// invert: if false, returned palette will be sorted by luminance
// num: number of palettes to return

var data = {
    model: 'dribbble',
    quantized: { sizes: quantized.sizes, palette: quantized.palette, adjacency: adjacency },
    invert: true,
    num: 1

// 0 <= hue <= 1
if(hue >= 0){
    data.hue = hue;

// 0 <= saturation <= 1
if(saturation >= 0){
    data.saturation = saturation;

  type: "POST",
  url: '',
  data: {input: JSON.stringify(data)},
  success: function(results){
        colorgraph.colorize(img, target_canvas, quantized, results[0]);
  dataType: 'json'

4: Colorize image

apply new colors to <canvas> for display purposes

// img: source <img>
// canvas: <canvas> to draw to
// quantized: quantized object from quantize()
// palette: new RGB palette to draw

colorgraph.colorize(img, canvas, quantized, palette);
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.