colorguard

When a small web project gains traction and more people join and begin editing the CSS files, it becomes progressively more difficult to keep everything consistent. Creative people hand off a new element style to a developer who just joined the team. Our protagonist has been around the block and promptly opens up a favorite color picker and grabs the colors from the JPEG. It looks good. Next day same things happens, and then again and again.

In a short amount of time there are now 20 color values in the CSS that are all factually different from each other yet represent the same color visually. colorguard (GitHub: SlexAxton/css-colorguard, License: Apache 2) by Alex Sexton helps you maintain the color set that you want, and warns you when colors you’ve added are too similar to ones that already exist.

 

1
npm install colorguard

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Just regular
colorguard --file style.css
# pipe a file
cat file.css | colorguard
# Threshold is available via command line
colorguard --file style.css --threshold 3
# The other options are too hard to type, so just pass it a json object
# with `ignore` or `whitelist` properties (overrides `--threshold option`)
colorguard --file style.css --options colorguard.json
# Change the output type to full json (includes stats)
colorguard --file style.css --format json

Example output

1
2
3
4
5
6
7
8
9
10
$ colorguard --file test/fixtures/simple.css
Collision: #020202, #000000
  - #020202 [line: 2] is too close (0.3146196209793196) to #000000 [line: 2, 3, 7, 12, 13, 16, 17]
Collision: #020202, #010101
  - #020202 [line: 2] is too close (0.1574963682909058) to #010101 [line: 20]
Collision: #000000, #010101
  - #000000 [line: 2, 3, 7, 12, 13, 16, 17] is too close (0.15712369811016996) to #010101 [line: 20]
$ cat test/fixtures/simple.css | colorguard --format json
{"collisions":[{"colors":[{"rgb":"#020202","lines":[2]},{"rgb":"#000000","lines":[2,3,7,

API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var colorguard = require('colorguard');
var fs = require('fs');
var css = fs.readFileSync('./file.css', 'utf8');
var output = colorguard.inspect(css, {
  // 0 through 100. Lower is more similar. Anything below 3 warns you.
  // 3 is the default threshold, but that's mostly personal opinion
  threshold: 3,
  // This color is just ignored entirely (use with caution)
  ignore: ["#030303"],
  // These color combinations are ignored (usually use this)
  whitelist: [["#000000", "#010101"]]
});

Build Tools

colorguard can also be used in conjunction with gulp (GitHub: gulpjs/gulp, License: MIT)grunt (GitHub: gruntjs/grunt, License: MIT) and broccoli (GitHub: broccolijs/broccoli, License: MIT) build systems:

What Else?

Checkout the runnable example and github example repository.

Post navigation

mag

Leave a comment

Leave a Reply

Your email address will not be published.