Skip to content

rsanchez/css-color-extractor

Repository files navigation

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.

.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

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