「このサイトの色、おしゃれすぎる……」
「同じような配色をブログに使いたいけど、カラーコードがわからない」
そんなときに便利なのが、Chromeの拡張機能『ColorPick Eyedropper』です。
このツールを使えば、気になるWebサイト上の文字色・背景色・ボタンの色などを一瞬で取得できます。
この記事では、ColorPick Eyedropperのインストール方法から、カラーコードの調べ方、実際の活用方法まで初心者向けに丁寧に解説します。
目次
ColorPick Eyedropperってどんなツール？
ColorPick Eyedropperは、Google Chromeに追加できる無料の拡張機能で、Webページ上に表示されている色のカラーコードを簡単に調べることができるツールです。
- 拡張機能を起動すると、マウスカーソルがピッカーに変わり
- 任意の場所にカーソルを合わせると、カラーコードが表示
- ワンクリックでコードをコピー可能
Webデザインの勉強や、既存サイトの配色を参考にしたいときに重宝します。
Chromeへのインストール手順
chromeウェブストア内＞「ColorPick Eyedropper」で検索です。
chromeに追加をクリック
chromeのブックマークバー（右上部分）にアイコンが追加されます。これで完了です。
サイト上の色を調べる方法【実例付き】
- 調べたいWebページを開く
- ブラウザ右上のColorPick Eyedropperアイコンをクリック
- 画面に照準（クロスヘア）が表示される
- マウスを動かして調べたい色に合わせると、カラーコードが表示
- クリックすると、そのコードが自動コピーされます
ためしに、使ってみましょう。
別の場所からカラーコードをコピーして、ブログの右サイドのbackground-color（背景色）を変更してみましょう。
変更できました。いかかですか。
こんなのはどうですか。
まとめ
ColorPick Eyedropperは、Webデザイン初心者でも簡単に配色のヒントを得られる強力なツールです。
「このサイトの配色、真似したい！」と思ったら、まずはこの拡張機能でカラーコードを調べてみましょう。
使えば使うほど、色選びの目が養われ、デザインの幅が広がりますよ。