You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

css-color-extractor

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

css-color-extractor

Extract from colors from CSS.


Version published
Maintainers
1
Created

Readme

Source

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.

Keywords

FAQs

Package last updated on 22 Jul 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc