開発を続けていると目で見るとほとんど同じなんだけど、カラーコードが違う色が使われていたりすることがあります。しかしそういった色が同じ画面内に混在していると、無意識下に秩序のないデザインという印象を与えたりするようなので、なんとかしたいですよね。そういうとき、色の整理に使えるツールが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のタスク内に入れ込む、といった使い方が現実的かと思われます。