ColorPick Eyedropperは、WEBサイトのロゴや見出しなどで使用されている色（カラーコード）を調べられるGoogle Chrome拡張機能です。
具体的には、以下のようなケースで素早く情報を調べたい方に、ぜひ導入をおすすめします。
- コーディング時に参考サイトで使用している見出しやリンク色のカラーコードが知りたい
- サイトデザイン時に他サイトで使用している色味が知りたい
この拡張機能を利用すれば、色を調べるだけでなく、カラーコードの抽出までを一気におこなえるため、あなたの作業時間をより短縮できるでしょう。
今回は、参考サイトの色が気になる制作サイド向けに、WEBサイトで使用されている色を調べられる拡張機能『ColorPick Eyedropper』を紹介します。
ColorPick Eyedropperとは
ColorPick Eyedropperとは、ロゴや見出し、バナー画像などの、WEBサイト上の要素の色を調べられるGoogle Chromeの拡張機能です。
あなたが参考にしているサイトのロゴの色をマネしたいと思ったことがあるなら、この拡張機能をつかえば、一瞬で色を確認することができます。
もしあなたがWEBデザイナーやコーダーなら、カラーコードを同時に取得することもできるので、作業にそのまま反映させることも可能です。
以下が今回、ColorPick Eyedropperについて紹介する機能です。
- サイト上の色を瞬時に確認する
- 確認した色のカラーコードを取得する
早速、ColorPick Eyedropperの使い方を見ていきましょう。
ColorPick Eyedropperの使い方
インストールの方法
ChromeウェブストアのColorPick Eyedropperのダウンロードページからインストールします。
※Firefoxのアドオンでも利用できます。Firefoxアドオンのダウンロードページからインストールしてください。
色（カラーコード）を調べる
拡張機能がインストールできていると、ブラウザの右上にカラフルなアイコンが表示されるようになります。
このアイコンをクリックすると、拡張機能が起動しマウスカーソルが十字型に変化します。
この状態で、色を調べたい箇所にカーソルをもっていくと、以下の画像のようにカラーコードを確認することができます。
一度クリックすると、カラーコードが選択された状態になるので、 Ctrl + C でコピーしましょう。
色（カラーコード）を調べる手順は以上になります。
拡張機能のレビュー
筆者はこの拡張機能を、コーディングでボタンや見出し色を他サイトと合わせたり、類似色を探すときのカラーコード調べに使っています。
（カラーコードを）調べる〜コピーするまで、一気に作業できるので、細かい調整などをおこなっているときに重宝します。
たまに想定と違う色を拾ってしまうこともありますが、なるべく色味の中心で調べるようにすれば回避できるようです。
まとめ
今回は、WEBサイト上のバナーやロゴなどで使用されている色（カラーコード）を調べるGoogle Chromeの拡張機能『ColorPick Eyedropper』を紹介しました。
サイトのデザインやコーディング時に、他のサイトで使われている色を知りたいというケースはかなり多いかと思います。
Windows標準搭載のペイントなどでも調べようと思えば調べられるカラーコードですが、拡張機能を追加することで、より素早く調べることが可能になります。
もしまだ、オフラインのソフトでカラーコードを調べている方は、この拡張機能を導入して、スピードを体感してみてください。
コメントを残す