Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

README.md

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;

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

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

About

Manipulate colors like you write Sass. Mix some colors like you paint.

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.