color-mixer
v1.0.0
Published
Manipulate colors like you write Sass. Mix some colors like you paint.
Downloads
1,181
Readme
Color Mixer
Hi there, I'm (c_c).
Little Javascipt helpers to create color chips.
Manipulate colors like you would in Sass, or see pre-set color chips in your browser console.
This is made for quick prototyping to decide on color schemes.
TL;DR;
API Docs
(c_c) sorry, no documentation yet
How to
Create base color
var red = new c_c.Color({hex:'#ff0000'})
//check color values
red.hex() // "#ff0000"
red.hsl() // [0, 100, 50]
red.hsla() // [0, 100, 50, 1]
red.rgb() // [255, 0, 0]
red.rgba() // [255, 0, 0, 1]
red.name() // "red"
red.values() //{
// "hex":"#ff0000",,
// "hsl":[0,100,50],
// "hsla":[0,100,50,1],
// "rgb":[255,0,0],
// "rgba":[255,0,0,1],
// "name":"red"
//}
Mix 2 colors to create base color
var red = new c_c.Color({hex:'#ff0000'})
var blue = new c_c.Color({name:'blue'})
var mixed = new c_c.Color({mix:[red,blue]}) // same as mix($color1, $color2) in Sass
var mixed2 = new c_c.Color({mix:[red,blue,30]}) // same as mix($color1, $color2, 30%) in Sass
mixed.hex() // "#7f007f"
mixed2.hex() // "#4c00b2"
Create subcolors based on base color
var red = new c_c.Color({hex:'#ff0000'})
// method names are comptible with color related Sass functions.
red.invert() // same as inver($color) in Sass
red.darken(50) // same as darken($color, 50%) in Sass
// each color manipulation creates SubColor object refelenced by base color object
red.subcolors // => [SubColor, SubColor]
Create subcolors set
var red = new c_c.Color({hex:'#ff0000'})
// method names are comptible with color related Sass functions.
red.desaturate_set(5) // creates color chips including base color
// you can pass number of color chips to make
// lighten_set, darken_set, complement_set, invert_set, desaturate_set
Print colors
var red = new c_c.Color({hex:'#ff0000'})
c_c.print(red)
red.invert()
red.lighten(20)
c_c.print(red.subcolors)
// when you run this in browser console, you should see color chip output.
// if you are running this in node.js/io.js REPL, it will console.log hex value.