Webページの色情報を調べるのに便利なツールColorZilla

ColorZillaは、Web制作時にページのある部分の色を調べたいときに大変便利な、Chromeの拡張機能です。Chromeを利用している方は、ぜひ拡張機能をインストールしてみてください。ちょっとした時短にもなるので私は愛用しています。

ColorZillaをインストール

「Chromeに追加」ボタンでインストールできます。

実は、ChromeだけではなくFirefox用もありますので、Firefoxを利用している方は、Firefox版をインストールしてください。

使い方

実際の使い方ですが、表示しているページからカラーコードを確認するには、ChromeのURLバーの右側から「ColorZilla」をクリックします。

すると下図のようなタブが開かれ「ページのカラーピッカーが有効になっています」
という表示になっていればＯＫです。

ページ内の色を調べたい部分に十字カーソルを合わせてクリックすると、ページ上部に下図のようなバーが表示されます。

クリックするだけで、クリップボードにカラーコードの情報がコピーされるので、そのまま貼り付けたい場所にペーストしてください。使い方は以上です！簡単ですね。

デザイナー

個人的に気になったのが１点あったので、その変更だけお伝えしておきます。

カラーコードの情報である「16進数」がデフォルトで「大文字英数字」だったので「小文字英数字」に変更しました。変更の仕方は以下の手順です。

＞オプション設定を開く

カラーフォーマットの「16進数の値を小文字で表示」にチェックを入れれば変更完了です。

まとめ

ColorZillaは、Webデザインやコーディング、開発者に役立つツールとして多くの人が利用しています。簡単にインストールして利用できますので、Chromeに入れて使ってみてください。