Manipulate colors like you write Sass. Mix some colors like you paint.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

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.


color-mixer color_set

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"
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

method names are comptible with color related Sass functions.

var red = new c_c.Color({hex:'#ff0000'})

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'})

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'})


// 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.