「Firefox」「Google Chrome」で利用できるカラーピッカー拡張機能「ColorZilla」

「ColorZilla」Firefox版

「ColorZilla」Google Chrome版

　「ColorZilla」は、閲覧しているWebページで指定した箇所の色情報を取得できる拡張機能。「Firefox」用と「Google Chrome」用が用意されており、どちらも本拡張機能の公式サイトから無償でダウンロードできる。

　「ColorZilla」はカラーピッカー、スポイト、Webページの色分析といったさまざまな機能を搭載するWeb開発者・デザイナー向けの拡張機能。もともとは「Firefox」向けに開発されたものだが、現在は「Google Chrome」用の拡張機能も用意されている。「Firefox」版の方が若干こなれた印象を受けるが、基本的に両者ともにほぼ同等の機能を有する。

　基本となるのは“Page Color Picker”機能で、拡張機能のメニューから有効化できる。これが有効化されるとマウスカーソルが十字型に変化し、マウスカーソル位置のWebページの色情報がブラウザー画面上部に表示されるようになる。ここではRGB値（16進トリプレット、RGB()関数表記）のほか、当該要素のタグ名やクラス、サイズといった情報もチェック可能。そのままマウスをクリックすれば、RGB値がクリップボードにコピーされ、カラーピッカーモードが解除される。つまり、グラフィックソフトでいうところの“スポイト”として使うことができる。一度取得した色は［Picked Color History］メニューからすばやくアクセスすることが可能。

マウスカーソル位置のWebページの色情報をブラウザー画面上部に表示（Google Chrome版）

　もうひとつの便利な機能は、Webページの色分析機（Webpage Color Analyser）機能だろう。これはスタイルシートで使われている色を抽出して一覧表示する機能。色を選択すれば、それが使われている部分へジャンプすることもできる。Webデザインにおいては色数が多すぎたり、色遣いに統一性がないことがよくないとされている。こういったツールを積極的に活用して、クールな色遣いを身につけたいものだ。

Webページの色分析機機能（Google Chrome版）