Webページから気になる色のカラーコードを取得する方法（ColorZilla：動画解説付き）
参考になるWebサイトを見ていると、この配色かっこいい！なんて感心することもありますよね。
そんなときはGoogle Chromeの拡張ツールであるColorZilla（カラージラ）を使うと、その色のカラーコードを簡単に取得できます。
フォントの色や背景色だけでなく、画像の任意の場所からもカラーコードを取得できますので、ぜひあなたのサイト制作のツールに活用してみてください。
取得した色の履歴もデータとしてためておくこともできますよ。
ColorZillaのインストール
もちろんですが、Google Chromeを使用してことが前提となります。
次のサイトにアクセスしてインストールしていきます。
https://chrome.google.com/webstore/detail/colorzilla/bhlhnic...ColorZillaの取得ページにアクセス後、次の手順でインストールします。
①”Chromeに追加”をクリック
②次の表示がでたら、”拡張機能を追加”をクリック
これでインストールはされていますが、Google Chromeで使いやすいように、引き続き、拡張機能の固定をします。
Google Cromeで拡張機能の固定をする
①Google Chromeの画面右上の”拡張機能”ボタンをクリック
②”拡張機能を固定する”をクリック
以上で、画面右上にColorZillaのアイコンボタンが固定表示されるようになります。
このColorZillaのアイコンボタンをクリックすることで、ColorZillaを起動することができます。
ColorZillaの使い方
使い方はいたって簡単です。動画をご覧ください。動画の後でも、要点を解説します。
次のように、ColorZillaを起動させたあと、十字マークに変わったカーソルをWebページの上に置くだけです。
上記ではカーソルを置いた場所のカラーコードが表示されるまでですが、そのままクリックすると、カラーコードをクリップボード（パソコンのメモリ）にコピーできます。当然メモ帳などにコピペできます。
クリップボードにコピーしておけば、ワードプレスのテーマカスタマイザーの中で色を変更するときにも、そのままペーストできますよね。
取得したカラーコードの履歴も確認できる
動画の中では紹介していませんが、取得したカラーコード履歴は、以下のように確認することができます。
ColorZillaのアイコンをクリックして、メニューの中の”Picked Color History”をクリックする。
開いたカラーパレットに取得した色の履歴が並んでいるので、それぞれクリックするとカラーコードも確認できます。
まとめ
ColorZillaのインストール方法と使い方について紹介してきました。
ColorZillaを使用すれば、Webページから簡単にカラーコードを取得できるのがわかりますよね。
私も非常によく使います。参考になるWebサイトや、雑誌などもGoogle Chromeに表示させてカラーコードを取得したりします。
特定のジャンルのWebサイトを制作するのに、そのジャンルの雑誌の配色を確認することは、そのジャンルならではの雰囲気を演出するのに非常に参考になるんですよね。
ぜひ、あなたもWeb制作のツールとして使ってみましょう。
