|
1 | 1 | # color-palette
|
2 | 2 |
|
3 |
| -Extract colors from GIF, PNG, JPG, and SVG images |
4 |
| - |
5 |
| -This package is intended for use in node environments. It won't work in a browser because it has node-specific dependencies. |
6 |
| - |
7 |
| -It uses [get-pixels](https://npm.im/get-pixels) to create a pixel array from the given file, then uses [get-rgba-palette](https://npm.im/get-rgba-palette) (which uses [quantize](https://www.npmjs.com/package/quantize) under the hood) to extract a color palette. Colors are converted from `get-rgba-palette`'s [flat array format](https://github.com/mattdesl/get-rgba-palette#palettepixels-count-quality-filter) into [chroma.js](http://gka.github.io/chroma.js/) color instances. |
8 |
| - |
9 |
| -For SVG files, a PNG copy is created on the fly using [svg2png](https://npm.im/svg2png), which depends on PhantomJS. PhantomJS can be installed as a node module, which makes it preferable to something like `canvg`/ [canvas](https://npm.im/canvas), which has [external dependencies](https://github.com/Automattic/node-canvas#installation). |
| 3 | +Extract colors from images. Supports GIF, JPG, PNG, and even SVG! |
10 | 4 |
|
11 | 5 | ## Installation
|
12 | 6 |
|
13 | 7 | ```sh
|
14 | 8 | npm install color-palette --save
|
15 | 9 | ```
|
16 | 10 |
|
| 11 | +This package is intended for use in node environments. It won't work in a browser because it has node-specific dependencies. |
| 12 | + |
17 | 13 | ## Usage
|
18 | 14 |
|
19 | 15 | ```js
|
20 | 16 | const colorPalette = require("color-palette")
|
21 | 17 |
|
22 | 18 | colorPalette(__dirname + 'double-rainbow.png', function(err, palette){
|
23 |
| - // palette is an array of chroma.js colors |
| 19 | + // palette is an array of colors |
24 | 20 | })
|
25 | 21 | ```
|
26 | 22 |
|
27 |
| -The palette yielded by the callback is an array of [chroma.js](http://gka.github.io/chroma.js) color objects. This is convenient because it lets you pick the color format you want, and gives you access to powerful color manipulation features. |
| 23 | +The `palette` is an array of [chroma.js](http://gka.github.io/chroma.js) color objects. This is convenient because it lets you pick the color format you want (RGB hex, HSL, etc), and gives you access to powerful color manipulation features: |
28 | 24 |
|
29 | 25 | ```js
|
30 | 26 | palette.map(color => color.hex())
|
31 | 27 | // => ['#FFFFFF', '#123123', '#F0F0F0']
|
32 | 28 |
|
33 | 29 | palette[0].alpha(0.5).css();
|
34 |
| -// => 'rgb(0,128,128)'' |
| 30 | +// => 'rgb(0,128,128)'' |
35 | 31 | ```
|
36 | 32 |
|
| 33 | +## How it Works |
| 34 | + |
| 35 | +`color-palette` uses [get-pixels](https://npm.im/get-pixels) to create a pixel array, then extracts a color palette with [get-rgba-palette](https://npm.im/get-rgba-palette), which uses [quantize](https://www.npmjs.com/package/quantize) under the hood. |
| 36 | + |
| 37 | +Colors are converted from [get-rgba-palette's flat array format](https://github.com/mattdesl/get-rgba-palette#palettepixels-count-quality-filter) into [chroma.js color instances](http://gka.github.io/chroma.js/). |
| 38 | + |
| 39 | +To extract palettes from SVG files, a PNG copy is created on the fly using [svg2png](https://npm.im/svg2png), which depends on PhantomJS. PhantomJS can be installed as a local node module, unlike [canvas](https://npm.im/canvas) which has [external dependencies](https://github.com/Automattic/node-canvas#installation). |
| 40 | + |
37 | 41 | ## Tests
|
38 | 42 |
|
39 | 43 | ```sh
|
|
0 commit comments