Webページから気になる色のカラーコードを取得する方法(ColorZilla:動画解説付き)

参考になるWebサイトを見ていると、この配色かっこいい!なんて感心することもありますよね。

そんなときはGoogle Chromeの拡張ツールであるColorZilla(カラージラ)を使うと、その色のカラーコードを簡単に取得できます

フォントの色や背景色だけでなく、画像の任意の場所からもカラーコードを取得できますので、ぜひあなたのサイト制作のツールに活用してみてください。

取得した色の履歴もデータとしてためておくこともできますよ。

ColorZillaのインストール

もちろんですが、Google Chromeを使用してことが前提となります。

次のサイトにアクセスしてインストールしていきます。

ColorZillaの取得ページにアクセス後、次の手順でインストールします。

①”Chromeに追加”をクリック

インストール手順1”Chromeに追加”をクリックする

②次の表示がでたら、”拡張機能を追加”をクリック

インストール手順2”拡張機能を追加”をクリックする

これでインストールはされていますが、Google Chromeで使いやすいように、引き続き、拡張機能の固定をします。

Google Cromeで拡張機能の固定をする

①Google Chromeの画面右上の”拡張機能”ボタンをクリック
②”拡張機能を固定する”をクリック

以上で、画面右上にColorZillaのアイコンボタンが固定表示されるようになります。

拡張機能の固定手順

このColorZillaのアイコンボタンをクリックすることで、ColorZillaを起動することができます。

ColorZillaの使い方

使い方はいたって簡単です。動画をご覧ください。動画の後でも、要点を解説します。

次のように、ColorZillaを起動させたあと、十字マークに変わったカーソルをWebページの上に置くだけです。

ColorZillaの使い方(カラーコードを表示させる))

上記ではカーソルを置いた場所のカラーコードが表示されるまでですが、そのままクリックすると、カラーコードをクリップボード(パソコンのメモリ)にコピーできます。当然メモ帳などにコピペできます。

カラーコードのクリップボードへのコピー

クリップボードにコピーしておけば、ワードプレスのテーマカスタマイザーの中で色を変更するときにも、そのままペーストできますよね。

取得したカラーコードの履歴も確認できる

動画の中では紹介していませんが、取得したカラーコード履歴は、以下のように確認することができます。

ColorZillaのアイコンをクリックして、メニューの中の”Picked Color History”をクリックする。

開いたカラーパレットに取得した色の履歴が並んでいるので、それぞれクリックするとカラーコードも確認できます。

カラーピックアップ履歴確認

まとめ

ColorZillaのインストール方法と使い方について紹介してきました。

ColorZillaを使用すれば、Webページから簡単にカラーコードを取得できるのがわかりますよね。

私も非常によく使います。参考になるWebサイトや、雑誌などもGoogle Chromeに表示させてカラーコードを取得したりします。

特定のジャンルのWebサイトを制作するのに、そのジャンルの雑誌の配色を確認することは、そのジャンルならではの雰囲気を演出するのに非常に参考になるんですよね。

ぜひ、あなたもWeb制作のツールとして使ってみましょう。

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!

amazonキンドルで出版中の本書籍が、2つのカテゴリーで新着第2位を獲得しました!!

amazonページはこちら