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:
colorbackgroundbackground-colorbackground-imageborderborder-topborder-rightborder-bottomborder-leftborder-colorborder-top-colorborder-right-colorborder-bottom-colorborder-left-coloroutlineoutline-colortext-decorationtext-decoration-colortext-shadowbox-shadowfillstrokestop-colorflood-colorlighting-color
npm install css-color-extractor 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']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>Copyright (c) 2015 Rob Sanchez
Licensed under the MIT License.