Nominally Patriotic Meathead


    1.0.6 • Public • Published


    A standalone JavaScript library for all kinds of color manipulations. Tiny but powerful.

    Target environments

    • IE 6+
    • Latest Stable: Firefox, Chrome, Safari, Opera
    • Node.js

    There is no doubt that you can also use this library in browser extensions and other non-browser environments, such as Rhino or SpiderMonkey.


    • Seamless conversion between dozens of color space(rgb, ryb, hsl, hsv, hwb, cmy, cmyk, yiq, yuv, xyz, xyy, luv, lab, lch, etc..) and CSS keywords. It caches conversions.
    • Color Instances have getters/setters for all channels(red, green, blue, hue, saturation, lightness, opacity, blackness, whiteness, etc..) in all supported colorspaces.
    • Many useful classes and methods: Gradient, Palette, tint, shade, tone, color blending and color scale, luminance and color difference calculator, scheme generator, etc.
    • So powerful but ridiculously tiny. It has no dependencies. The entire set of modules clocks in at 8kb minified and gzipped.
    • Lots more. Take a look at the documentation immediately.

    Quick start

    Four quick start options are available:

    • Download the latest release
    • Clone the repo: git clone
    • Install with Bower: bower install sumi-color
    • Install with npm: npm install sumi-color

    Example use

    Including in a browser:

    <script type='text/javascript' src='/path/to/sumi-color-1.0.6.min.js'></script>
    <script type='text/javascript'>
    var Color = sumiColor.Color;
    var tiffanyblue = new Color('#60DFE5');
    window.alert(tiffanyblue.css(2, true));   // hsla(183, 72%, 64%, 1)

    As a module that works with AMD(e.g., RequireJS):

    define(['/path/to/sumi-color'], function(sumiColor) {
        var Gradient = sumiColor.Gradient;
        var rad = new Gradient([ 'black', '#60DFE5', 'white' ], [ -0.2, 0.1, 0.2 ]);
        // linear-gradient(0deg, rgb(0, 0, 0), rgb(96, 223, 229) 75%, rgb(255, 255, 255))

    Including in a CommonJS environment(e.g., Node.js):

    var Color = require('/path/to/sumi-color').Color;
    var pat = new Palette([ '#FFF', '#000', '#60DFE5' ], [ 1, 2, 3 ], 22);
    console.log(pat.css());   // rgba(91, 154, 157, 0.22)

    Build from source

    First, you need to have Node.js and Grunt installed.

    $ git clone
    $ npm install -g grunt-cli
    $ cd color
    $ npm install
    $ grunt

    It provides compiled JS (sumi-color.*), as well as compiled and minified JS (sumi-color.min.*). JS source maps (sumi-color.*.map) are available for use with certain browsers' developer tools.

    Running demos for testing

    $ grunt test

    Build & running documentation locally

    $ grunt help

    Sorry, the documentation is currently offered only in the Chinese language. Do you have time to help me with some Chinese - English translations?

    How to contact me

    Copyright and license

    Copyright 2015 Rainer Su (苏昱).

    Code and documentation is free to use under the BSD license.


    npm i sumi-color

    DownloadsWeekly Downloads






    Last publish


    • rainersu