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

Pocket

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

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

使い方

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

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

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

CSS Colorguard