「このサイトの色、おしゃれすぎる……」
「同じような配色をブログに使いたいけど、カラーコードがわからない」
そんなときに便利なのが、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デザイン初心者でも簡単に配色のヒントを得られる強力なツールです。
「このサイトの配色、真似したい!」と思ったら、まずはこの拡張機能でカラーコードを調べてみましょう。
使えば使うほど、色選びの目が養われ、デザインの幅が広がりますよ。