Extract colors (named, hex, rgb, rgba, hsl, and hsla) from 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:
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-shadowbox-shadow
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=hslString
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.