CSS内で似ている色を使っていたら更新してくれるツール「CSS Colorguard」

開発を続けていると目で見るとほとんど同じなんだけど、カラーコードが違う色が使われていたりすることがあります。しかしそういった色が同じ画面内に混在していると、無意識下に秩序のないデザインという印象を与えたりするようなので、なんとかしたいですよね。そういうとき、色の整理に使えるツールがCSS Colorguardです。

（ちゃんと色をSassの変数なんかで管理できていれば、そんなに困らないんですけどね・・・）

使い方

npm install -g colorguardでツールをインストール後、以下のようなコマンドでCSSの中身をチェックします。

# 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

こんな感じで結果が出力されます。

$ 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]

どんな風に近似色を判定しているのかというと、結構難しい数式を使っているみたい。詳しくはCSS ColorguardのREADMEをご覧ください。Sassファイルをそのまま判定することはできないようなので、実際はGruntやGulpのタスク内に入れ込む、といった使い方が現実的かと思われます。

CSS Colorguard