# color-mixer

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

Latest version **1.0.0** (published 2015-04-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install color-mixer
pnpm add color-mixer
yarn add color-mixer
bun add color-mixer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2015-04-22 |
| First published | 2015-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 86 |
| Author | Mariko Kosaka |
| Maintainers | kosamari |
| Keywords | color, sass |

## Links

- npm: https://www.npmjs.com/package/color-mixer
- Repository: https://github.com/kosamari/color-mixer
- Issues: https://github.com/kosamari/color-mixer/issues
- npm.io page: https://npm.io/package/color-mixer

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2015-04-22

## 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;
![color-mixer](https://cloud.githubusercontent.com/assets/4581495/7272473/15a4020c-e8b9-11e4-851a-8546ff2c5536.png)

## API Docs
``` (c_c) sorry, no documentation yet ```

## How to
### Create base color
```JavaScript
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
```JavaScript
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
```JavaScript
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
```JavaScript
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
```JavaScript
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.
```

---
_Source: https://npm.io/package/color-mixer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._