sumi-color

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.

Features

• 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 https://github.com/rainersu/color.git
• 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)

</script>

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 ]);

	console.log(rad.css());
	
	// 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 [email protected]:rainersu/color.git
$ 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

• [email protected]
• http://cn.linkedin.com/in/rainersu
• http://site.douban.com/185696/
• http://rainersu.github.io
• QQ: 2627001536

Copyright and license

Copyright 2015 Rainer Su (苏昱).

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