画像やページ内のカラーコードが一発で分かる【ColorPick Eyedropper】

ColorPick Eyedropper

よくwebサイトを見ていて、この色のカラーコードって何だろう?って思う時ってありますよね。 そういう時ってデベロッパーツール開いて、CSSを見てみるとすぐわかるんですが、画像の色まではわかりません。

でもchromeの拡張機能の「ColorPick Eyedropper」を使うと、サイト内の色はもちろん、画像の色のカラーコードまで簡単に調べられるようになります。

この色いいな!って思った時などに、簡単に、閲覧中のページの好きな場所のカラーコードを取得できるのでとってもオススメですよ! あ、もちろん無料です!!

それでは、「ColorPick Eyedropper」の入手方法や使い方を紹介していきますね(^^♪

ColorPick Eyedropperの使い方

まずは下記のページにアクセスします。

※chromeの拡張機能なので、ブラウザをグーグルクロームにしてアクセスして下さい。

ColorPick Eyedropper – Chrome ウェブストア chromeに追加の場所

アクセスしたら、chromeに追加をクリック。

拡張機能を追加の場所

chromeに追加をクリックすると上記画像のようにColorPick Eyedropperを追加するかどうか聞かれるので、「拡張機能を追加」をクリック。

ColorPick Eyedropperを追加完了画面

そうすると上記画像のような画面になり、ColorPick Eyedropperが追加されます。 これでインストール完了です!

操作方法

ColorPick Eyedropperを起動するアイコンの場所

ColorPick Eyedropperを使う時は画面の右上にあるアイコンをクリックすると起動できます。

そして起動したら、色を調べたい場所にマウスカーソルを合わせてみましょう!

そうすると、その部分のカラーコードが右上に表示されます。 そしてさらに、その色の上でクリックすると、コピペできるようにカラーコードが選択状態で表示されます。

ColorPick Eyedropperを操作している様子

上のgif動画を参考にしてもらうとわかると思いますが、こんな感じですごい簡単で気軽にカラーコードが調べられます。 そして調べたカラーコードは、そのままコピーして使用できるので超楽ちん(^^♪

で、さらにいうと見れるカラーコードは16進数だけじゃなくて、RGBも入っているので、RGBaにして透過したい時などにも便利です!

こんな感じでwebページ内のカラーコードがとっても簡単に取得できるのでよければ使って見て下さいね(^^♪