Nutella Peanut-Butter Marshmallow
    Wondering what’s next for npm?Check out our public roadmap! »


    5.0.0 • Public • Published

    C O L O R − R A N G E R  renders a color range for a color in rectangular or polar coordinate system by manipulating ImageData’s buffer. It is primarily needed for building color pickers.

    Test & demo, color picker.

    alt alt alt unstable



    var colorRanger = require('color-ranger');
    //create a canvas
    var canvas = document.createElement('canvas');
    canvas.width = 50;
    canvas.height = 50;
    var context = canvas.getContext('2d');
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    //render = colorRanger.render([0, 255, 255],, {
        type: 'polar',
        space: 'hsl',
        channel: [0, 1]
    //put image data back to canvas
    context.putImageData(imageData, 0, 0); = 'url(' + canvas.toDataURL() + ') 0 0 / cover';


    ranger.render(color, buffer, options)

    Render rectangular or polar range into an imageData’s buffer. Size of the final image is taken such that it fills the whole imageData area.

    Parameter Type Description
    color Array An array of input values, defined in sourceSpace - rgb by default.
    buffer Uint8ClampedArray An object to which render the range. string A color space name for the range taken from the color-space module. E. g. 'hsl'. Array An array of x/y space channel indexes. E. g. [0,2] from 'hsv' are hue and value channels. One of the channels can be omitted, e. g. [null, 1] means render saturation by y-axis.
    options.min, options.max Array Arrays of left and right values for the range, corresponding to the channels in x/y axis.
    options.type String Render whether polar, rect or chess.
    options.sourceSpace String If you have color in a space different from rgb, pass the sourceSpace.

    ranger.chess(colorA, colorB, buffer)

    Render a chess grid, useful for transparency grid image rendering. Grid size is automatically figured out from the imageData size.

    Parameter Type Description
    colorA Array Black cell color.
    colorB Array White cell color.
    buffer Uint8ClampedArray An ImageData object into which to render grid.


    Return worker for workerify, able to render range in a background.

    var work = require('webworkify');
    var worker = work(require('color-ranger/worker'));
    worker.addEvenListener('message', function(evt){
        if ( !== 1) return;
        //image data buffer is returned as `` =;
        context.putImageData(imageData, 0, 0);
     = 'url(' + canvas.toDataURL() + ') 0 0 / cover';
        color: [255, 255, 255],
        type: 'polar',
        space: 'lab',
        sourceSpace: 'rgb'
        channel: [0,1],
        max: [360, 100],
        min: [0, 100],
        data: imageData,
        id: 1

    Worker gets all the parameters of .render, with additional option id, an id of request to identify in response.


    npm i color-ranger

    DownloadsWeekly Downloads






    Last publish


    • avatar