CSS Color Extractor

Extract colors (named, hex, rgb, rgba, hsl, and hsla) from CSS.

This tool is useful if you are re-skinning a site with a new color scheme and need a starting point for a new stylesheet.

Powers http://www.css-color-extractor.com.

``css
.foo {
color: red;
border: 1px solid #ab560f;
font-size: 16px;
background-image: linear-gradient(to-bottom, red, blue);
}

.bar {
color: rgba(0, 128, 255, 0.5);
}

.baz {
display: block;
}
`

`
red
#ab560f
blue
rgba(0, 128, 255, 0.5)
`

This module looks at the following CSS properties for colors:

* color
* background
* background-color
* background-image
* border
* border-top
* border-right
* border-bottom
* border-left
* border-color
* border-top-color
* border-right-color
* border-bottom-color
* border-left-color
* outline
* outline-color
* text-decoration
* text-decoration-color
* text-shadow
* box-shadow
* fill
* stroke
* stop-color
* flood-color
* lighting-color

Installation

![NPM version](https://www.npmjs.org/package/css-color-extractor)

Use npm.

`
npm install css-color-extractor
`

Usage

`javascript
var extractor = require('css-color-extractor');

var options = {
withoutGrey: false, // set to true to remove rules that only have grey colors
withoutMonochrome: false, // set to true to remove rules that only have grey, black, or white colors
colorFormat: null, // transform colors to one of the following formats: hexString, hexaString, rgbString, percentString, hslString, hwbString, or keyword
allColors: false, // set to true to get all colors instead of unique colors
sort: null, // set to "hue" to sort colors in order of hue, or to "frequency" to sort colors by how many times they appear in the css
};

// extract from a full stylesheet
extractor.fromCss('a { color: red; } p { color: blue; }');
// => ['red', 'blue']

// extract from a string
extractor.fromString('1px solid blue');
// => ['blue']

// extract from a declaration
extractor.fromDecl({ prop: 'color', value: '1px solid blue' });
// => ['blue']
`

CLI

Install the CLI tool:

`
npm install -g css-color-extractor-cli
`

Extract colors as a list to stdout:

`
css-color-extractor input.css
`

Extract colors from stdin:

`
cat input.css | css-color-extractor
`

Use the --without-grey or --without-monochrome flag(s):

`
css-color-extractor input.css --without-grey
`

Use the --color-format option to transform color output format (hexString, hexaString, rgbString, percentString, hslString, hwbString, or keyword):

`
css-color-extractor input.css --color-format=hslString
`

Use the --sort option to sort the list of colors (hue or frequency):

`
css-color-extractor input.css --sort=hue
`

Use the --inverse option to remove colors from rules:

`
css-color-extractor input.css output.css --inverse
`

Extract colors to file:

`
css-color-extractor input.css output.txt
`

Extract colors to CSS format (includes original CSS selectors):

`
css-color-extractor input.css output.css

or to stdout


css-color-extractor input.css --format=css
`

`css
.foo {
color: red;
border: 1px solid #ab560f;
font-size: 16px;
background-image: linear-gradient(to-bottom, red, blue);
}

.bar {
color: rgba(0, 128, 255, 0.5);
}

.baz {
display: block;
}
`

Yields:
`css
.foo {
color: red;
border-color: #ab560f;
background-image: linear-gradient(to-bottom, red, blue);
}

.bar {
color: rgba(0, 128, 255, 0.5);
}
`

Extract colors to JSON format:

`
css-color-extractor input.css output.json

or to stdout


css-color-extractor input.css --format=json
`

`css
.foo {
color: red;
border: 1px solid #ab560f;
font-size: 16px;
background-image: linear-gradient(to-bottom, red, blue);
}

.bar {
color: rgba(0, 128, 255, 0.5);
}

.baz {
display: block;
}
`

Yields:
`js
["red","#ab560f","blue","rgba(0, 128, 255, 0.5)"]
`

Extract colors to HTML format (page of color swatches):

`
css-color-extractor input.css output.html

or to stdout


css-color-extractor input.css --format=html
`

`css
.foo {
color: yellow;
border: 1px solid #ab560f;
font-size: 16px;
background-image: linear-gradient(to-bottom, red, blue);
}

.bar {
color: rgba(0, 128, 255, 0.5);
}

.baz {
display: block;
}
`

Yields:

`html











``

License

Copyright (c) 2015 Rob Sanchez

Licensed under the MIT License.