Extract color palettes from images.
Simple use, < 5ko minified, fast process and no dependencies for browser.
Dependency to canvas for node.js
Try the demo
- Firefox: 29+
- Chrome: 33+
- Edge: 12+
- Opera: 19+
- Safari: 8+
- Webview Android: 4.4.3+
- Samsung Internet: 2.0+
Internet Explorer
- Node.js: 0.12+
npm install --save extract-colors
Need to install dependency canvas
npm install --save extract-colors canvas
import extractColors from 'extract-colors'
const src = 'my-image.jpg'
extractColors(src)
.then(console.log)
.catch(console.error)
You can use different types for
src
param (String
for a path of image,Image
orImageData
).
If you useImageData
type, be carrefull because the extractor will not optimize the process (it will not reduce the count of pixels).
const path = require('path')
const { extractColors } = require('extract-colors')
const src = path.join(__dirname, './my-image.jpg')
extractColors(src)
.then(console.log)
.catch(console.log)
You can use different types for
src
param (String
for a path of image orImageData
).
If you useImageData
type, be carrefull because the extractor will not optimize the process (it will not reduce the count of pixels).
const src = 'my-image.jpg'
const options = {
pixels: 10000,
distance: 0.2,
saturationImportance: 0.2,
splitPower: 10,
colorValidator: (red, green, blue, alpha = 255) => alpha > 250
}
extractColors(src, options)
.then(console.log)
.catch(console.error)
pixels
Total pixel number of the resized picture for calculation
Type: Integer
Default: 10000
distance
From 0 to 1 is the color distance to not have near colors (1 distance is between white and black)
Type: Number
Default: 0.2
saturationImportance
Power of the saturation weight during the process (0 is not used, 1 is only saturation and not area size)
Type: Number
Default: 0.2
splitPower
Approximation power in the first color splitting during process (from 2 to 16)
Type: Integer
Default: 10
colorValidator
Test function to enable only some colors
Type: Function
Default: (red, green, blue, alpha = 255) => alpha > 250
crossOrigin
Only for browser, can be 'Anonymous' to avoid client side CORS
(the server side images need authorizations too)
Type: String
Default: null
Array of colors with the followed properties:
[
{
hex: '#62342b',
red: 98,
green: 52,
blue: 43,
area: 0.5915,
saturation: 0.2156862
},
...
]
Field | Example | Type | Description |
---|---|---|---|
hex | #62342b | String | color in hexadecimal string |
red | 98 | Integer | red canal from 0 to 255 |
green | 52 | Integer | green canal from 0 to 255 |
blue | 43 | Integer | blue canal from 0 to 255 |
area | 0.5915 | Number | area of the color and his neighbouring colors from 0 to 1 |
saturation | 0.2156862 | Number | color saturation from 0 to 1 |
Read the API doc here
Copyright (C) 2019 Damien Doussaud
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program. If not, see https://www.gnu.org/licenses/.