/css-color-extractor

JS lib to extract colors from CSS.

Primary LanguageJavaScriptMIT LicenseMIT

CSS Color Extractor Build Status

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.

.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-shadow
  • box-shadow

Installation

NPM version

Use npm.

npm install css-color-extractor

Usage

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, rgbString, percentString, hslString, hwbString, or keyword
};

// 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, rgbString, percentString, hslString, hwbString, or keyword):

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

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

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

.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

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

["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

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

<!DOCTYPE html>
<html>
<head>
    <title>Colors</title>
</head>
<body>
    <div class="container">
        <ul class="swatches">
            <li class="swatch swatch" style="background-color: yellow;">yellow</li>
            <li class="swatch swatch-dark" style="background-color: #ab560f;">#ab560f</li>
            <li class="swatch swatch-dark" style="background-color: rgba(0, 128, 255, 0.5);">rgba(0, 128, 255, 0.5)</li>
            <li class="swatch swatch-dark" style="background-color: blue;">blue</li>
        </ul>
    </div>
</body>
</html>

License

Copyright (c) 2015 Rob Sanchez

Licensed under the MIT License.