Webデザイン初心者必見!ColorPick Eyedropperでサイトの配色を真似する方法

「このサイトの色、おしゃれすぎる……」

「同じような配色をブログに使いたいけど、カラーコードがわからない」

そんなときに便利なのが、Chromeの拡張機能『ColorPick Eyedropper』です。

このツールを使えば、気になるWebサイト上の文字色・背景色・ボタンの色などを一瞬で取得できます。

この記事では、ColorPick Eyedropperのインストール方法から、カラーコードの調べ方、実際の活用方法まで初心者向けに丁寧に解説します。

目次

ColorPick Eyedropperってどんなツール?

ColorPick Eyedropperは、Google Chromeに追加できる無料の拡張機能で、Webページ上に表示されている色のカラーコードを簡単に調べることができるツールです。

  • 拡張機能を起動すると、マウスカーソルがピッカーに変わり
  • 任意の場所にカーソルを合わせると、カラーコードが表示
  • ワンクリックでコードをコピー可能

Webデザインの勉強や、既存サイトの配色を参考にしたいときに重宝します。

Chromeへのインストール手順

chromeウェブストア内>「ColorPick Eyedropper」で検索です。

chromeに追加をクリック

chromeのブックマークバー(右上部分)にアイコンが追加されます。これで完了です。

サイト上の色を調べる方法【実例付き】

  1. 調べたいWebページを開く
  2. ブラウザ右上のColorPick Eyedropperアイコンをクリック
  3. 画面に照準(クロスヘア)が表示される
  4. マウスを動かして調べたい色に合わせると、カラーコードが表示
  5. クリックすると、そのコードが自動コピーされます

ためしに、使ってみましょう。

別の場所からカラーコードをコピーして、ブログの右サイドのbackground-color(背景色)を変更してみましょう。

変更できました。いかかですか。

こんなのはどうですか。

まとめ

ColorPick Eyedropperは、Webデザイン初心者でも簡単に配色のヒントを得られる強力なツールです。

「このサイトの配色、真似したい!」と思ったら、まずはこの拡張機能でカラーコードを調べてみましょう。

使えば使うほど、色選びの目が養われ、デザインの幅が広がりますよ。

もしよろしければシェアお願いいたします。
目次