ColorPick EyedropperでWeb上のカラーコードを5秒で調べる方法

「このサイトのヘッダー綺麗だな。カラーコードを調べたい!」

「このブログ背景色を調べたい!」

「スタバのロゴのカラーコードを調べたい!」

Web上のページやロゴ、ヘッダー画像などの色コードを調べたい時ってありますよね。そんな時におすすめなChrome拡張機能「ColorPick Eyedropper」を紹介します。

これを使えば5秒で知りたいデザインのカラーコードを調べるることができます。

「本当にそんなに簡単なの?」と思うかもしれませんが、下の画像のようにカラーコードを知りたいところにカーソルを持ってくるだけで抽出できちゃいます。

スタバのロゴの緑は「#007042」ということがすぐにわかりますね。

ということで、この記事では「ColorPick Eyedropper」の導入方法から使い方までを詳しく解説します。

ColorPick Eyedropperの導入方法

ColorPick Eyedropperの導入方法を画像付きで解説します。

1. Chromeウェブストアにアクセス

Chromeウェブストアの「ColorPick Eyedropper」のページにアクセスします!
必ずChromeからアクセスしましょう。

2. 「Chromeに追加」をクリック

「Chromeに追加」をクリックしましょう。

3. 「拡張機能を追加」をクリックする

メッセージボックスが現れるので「拡張機能を追加」をクリックする

スポンサーリンク

4. ヘッダーメニューにColorPick Eyedropperが登場

Chromeのヘッダーメニューに「ColorPick Eyedropper」のアイコンが登場します。
これで準備完了です!

ColorPick Eyedropperの使い方

ColorPick Eyedropperの使い方を画像付きで紹介します。

1.ColorPick Eyedroppeのアイコンをクリック

まずはColorPick Eyedropperのアイコンをクリックしましょう。

2. 調べたい色のところにカーソルを選択

アイコンをクリックすると十字のカーソルに変わるので、調べたい色のところまで持っていきましょう。
上の画像は当ブログの背景色のカラーコードを調べている様子です。

カーソルを選択するだけで、背景色は「#F5F5F5」だと調べることができました。

すごい(・ω・)ノ

3. クリックすれば全選択できる

カーソルで選択した場所のカラーコードを取得したかったら、そのままクリックすると全選択になります。
バツ印を押せば、ColorPick Eyedropperを閉じることできます。

 

いかがでしたでしょうか!
冗談抜きで5秒で(いや、5秒もかからないかも)Web上のカラーコード調べることができます。
ぜひお役立てください。

>>ColorPick Eyedropperを追加する