ウェブサイトの配色を解析!Chrome拡張「ColorZilla」

同業のサイトを見ていて、サイト内の配色やサイトに設置された画像の配色が気に入ったこと、ないでしょうか?

パクることはもちろんNGですがデザインの配色であれば参考にしたとしても問題ないです。

そんな気になったサイトの配色を、一瞬で解析できる方法があります。

今回は、Chrome拡張「ColorZilla」をご紹介します。

ColorZillaで出来ること

ColorZillaでは、配色のカラーコードを解析できます。

カラーコードとは、「#ff0011」といったシャープから始まり、アルファベットと数字の羅列で出来た色を示すコードです。

このカラーコードを使い、画像編集ツールでダイレクトに色の指定が出来るので、大変便利なんですね。

ColorZillaの使い方

導入方法は、通常のChrome拡張と同様でとても簡単です。

Chromeウェブストアから、拡張機能を導入するだけです。「Chromeに追加」ボタンをクリックし、後は画面に従っていくのみです。

導入が正常に完了すると、メニューバー(画面右上)にスポイトのアイコンが表示されます。

スポイトアイコンをクリックすると、一番上に「Pick Color From Page」があるので、そちらをクリックしましょう。

すると、画面の上にRGBとカラーコードが表示されると思います。

カーソルを動かしてみると、位置によって色が変化するのが確認できますよね。

あとは、解析したい配色の箇所をクリックするだけ。

これで、カラーコードを抜き取ることができます。

カラーコードは、すでにコピーされているので、あとは画像編集ツールのカラーコードを設定できる箇所に、コピペするだけ。

改めて手順を並べると、

  • スポイトアイコンをクリック
  • 一番上の「Pick Color From Page」をクリック
  • サイト内の解析したい配色の箇所をクリック
  • 画像編集ツールのカラーコードを設定できる箇所にコピペ

といった作業手順です。

編集後記

今回は、Chrome拡張「ColorZilla」についてご紹介しました。

これで参考にしたいサイトの配色も参考にすることができますね。

ぜひ、活用してみてください。

スモールビジネスの
現場からは以上です.

このは屋の最新情報をツイッターで