kolor
kolor is a useful color manipulation tool in JavaScript.
It provides color string parsing, format converting and basic color adjusting methods.
Supported color formats:
- RGB(A)
- HSL(A)
- HSV(A)
Usage
-
Just include
kolor.js
in your HTML document:Core functionalities are provided by the
kolor
object in global scope. -
Working with RequireJS (or other AMD compatible loaders)
Just require the named module
kolor
:; -
Working with npm
npm install kolor
Creating a color object
Colors may be created in the following ways:
-
By parsing a given string value
var red = //color namegreen = //valid CSS expressionsblue = //more valid CSS expressionscyan = //not supported by CSS but has a similar syntaxmagenta = //hex RGB valueyellow = //hex RGB value without '#'purple = ; // named huesColor names are defined by W3C SVG color names used in CSS3.
Names or hex values will generate RGB colors.
-
By specifying a color format
var red = kolor //can use either number or percent stringgreen = kolor //using arrayblue = kolor; //using object -
By cloning another color object
var red =newRed = ;
Created colors are in certain formats and can be converted to other formats.
Accessors
kolor provides jQuery-like accessors for color objects.
color; //altering 'red' channelcolor; //shorthand method is also available
console; //255
Setters return color object itself so we can do a bit of chaining:
color; //making it lighter
Value restriction
When setting a value of a channel, the specified value will be automatically restricted within a valid range according to the channel configuration.
console; //255console; //350console; //1
Format conversion
Once a color object is created, it can be easily converted to other formats. After each conversion, a new color object will be produced and returned.
var hsvColor = rgbColor; //converts and sets
String output
console; //'#ff0000'console; //'rgb(255, 0, 0)'
Color modification
A color can be modified into another in many ways. After each modification, a new color object is produced and returned.
color = red; //spins the color wheel for 180 degreescolor = red; //mixes two colors with a given proportion.color = red; //gets a lighter color
For full features and API documentation, please read this documentation generated by Docco.