Warna
Warna is color utility library written in Javascript to help you parse, convert, or manipulate colors. It can works on browser or Node.js as npm modules.
Installation
You can install Warna via npm,
npm install warna
or download latest version from Github
Getting Started
Node.js
var warna = ; var hex = '#ffffff';var color = warna; console;// will print {red: 255, green: 255, blue: 255}
Browser
Quick Examples
Convert color to RGB or HEX.
// Convert HEX to RGBvar color = warna;console; // will print {red: 0, green: 0, blue: 0} // Convert RGB to HEXvar color = warna;console; // will print '#ffffff'
Get gradient color position or color slices.
// Get color in center of white-black gradientvar color = warnahex;console; // will print '#7f7f7f' // Get 3 color slices in red-blue gradientvar color = warna;console; // will print// [ '#ff0000', '#7f007f', '#0000ff']
Lighten or darken color.
// Lighten red by 20%var color = warnahex;console; // will print '#ff3333' // Darken red by 20%var color = warnahex;console; // will print '#cc0000'
API
parse(color)
Parse color value into Warna object which is a object that contain various format of color, like RGB, HSV, HSL, HEX and Alpha value.
Argument:
color
- (mixed) Color value that will be parsed. It can be a HEX color string, RGB, HSV and HSL object.
Example:
// Parse Red HEX color stringwarna;/** return { rgb: { red: 255, green: 0, blue: 0 }, hex: '#ff0000', hsv: { hue: 0, saturation: 100, value: 100 }, hsl: { hue: 0, saturation: 1, luminosity: 0.5 }, alpha: 1 }*/ // This also return same object like abovewarna; // RGB objectwarna; // HSV objectwarna; // HSL object
gradient(begin, end)
Set gradient color object which can be chained with other gradient utility function like getPosition()
or getSlices()
.
Arguments:
begin
- (mixed) Beginning color value. It can be a HEX color string, RGB object or RGB array.end
- (mixed) Ending color value. It can be a HEX color string, RGB object or RGB array.
getPosition(pos)
Get color value on gradient based on their position and return Warna object.
Argument:
pos
- (float) Float value (percent) of color position.
Example:
// Getting middle color of red-white gradientvar gradient = '#ff0000' '#ffffff';gradient; /* Return a Warna object { rgb: {red: 255, green: 127, blue: 127}, hex: '#ff7f7f', hsv: {hue: 0, saturation: 50, value: 100}, hsl: {hue: 0, aturation: 1, luminosity: 0.7490196078431373}, alpha: 1 }*/ // You can also pass alpha value to gradientvar firstColor = red: 255 green: 0 blue: 0 alpha: 025;var secondColor = red: 255 green: 255 blue: 255 alpha: 075; var gradient = firstColor secondColor;gradient; /* Return warna object { rgb: {red: 255, green: 127, blue: 127}, hex: '#ff7f7f', hsv: {hue: 0, saturation: 50, value: 100}, hsl: {hue: 0, saturation: 1, luminosity: 0.7490196078431373}, alpha: 0.5 }*/
getSlices(slice, type)
Get color slices of a gradient and return array of Warna object based on number slices you want to get. Slice should be more than 2
, if you want to get other color value other than start color and ending color.
Argument:
slice
- (integer) Integer value of number slices you want to get.type
- (string) Type of color you want to output (rgb
,hex
,hsv
, orhsl
).
Example:
// Getting 3 color slices of black-white gradientwarna; // Return// [ '#ffffff', '#7f7f7f', '#000000']
lighten(color, pos)
Lighten a color. Return warna object.
Arguments:
color
- (mixed) Color value that will be lighten. It can be a HEX color string, RGB object or RGB array.pos
- (float) Float value of lighten percentation.0
will returning base color and1
will return white#ffffff
.
Example:
// Lighten red by 20%warna; /* Return { rgb: {red: 255, green: 51, blue: 51}, hex: '#ff3333', hsv: {hue: 0, saturation: 80, value: 100}, hsl: {hue: 0, saturation: 1, luminosity: 0.6}, alpha: 1 }*/
darken(color, pos)
Darken a color.
Arguments:
color
- (mixed) Color value that will be lighten. It can be a HEX color string, RGB object or RGB array.pos
- (float) Float value of lighten percentation.0
will returning base color and1
will return black#000000
.
Example:
// Darken red by 20%warna; /* Return { rgb: {red: 204, green: 0, blue: 0}, hex: '#cc0000', hsv: {hue: 0, saturation: 100, value: 80}, hsl: {hue: 0, saturation: 1, luminosity: 0.4}, alpha: 1 }*/
Copyright and license
Copyright 2014 Alfiana E. Sibuea. Code released under the MIT license.