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:
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 git@github.com: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
- rainersu@foxmail.com
- 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.