Skip to content
JS lib to extract colors from CSS.
JavaScript
Branch: master
Clone or download
Latest commit 8b05700 Jun 24, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Remove trailing spaces from test.js Jun 24, 2016
.editorconfig First commit Aug 29, 2015
.eslintrc First commit Aug 29, 2015
.gitattributes First commit Aug 29, 2015
.gitignore First commit Aug 29, 2015
.npmignore First commit Aug 29, 2015
.travis.yml Add .travis.yml Aug 30, 2015
LICENSE First commit Aug 29, 2015
README.md Readme fixes Mar 17, 2016
gulpfile.js First commit Aug 29, 2015
index.js Add 'fill' property to the properties with colors list Jun 24, 2016
package.json Bump up to v0.0.5 Jun 24, 2016

README.md

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.

You can’t perform that action at this time.