こんにちは、ひぐまです。
今回は私が日頃お世話になっているChromeウェブストアからインストールできる拡張機能、「ColorPick Eyedropper」のご紹介です。

ColorPick Eyedropperとは

ColorPick Eyedropperは、ウェブサイト上の色をスポイトして、どんな色が使用されているかを確認できるカラーピッカー機能です。サイト上でみたデザインや素材で使われている色のコードが知りたい場合などに使用しています。

ColorPick Eyedropperを使う利点としては、スポイトする際に拡大鏡で表示されるため細かい部分を選択しやすいという点、また、16進数であらわされるカラーコード(例：#000000 = 黒色)のほか、HTML・CSS上で指定する際のカラーコード(例：rgb(255,255,255) = 白色)も、スポイト後にコピペで挿入できる状態で表示されるところでしょうか。(画像参照)

インストール方法は？

①下記のリンクからChromeウェブストアの「ColorPick Eyedropper」のページへアクセスします。

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=jp

②「Chromeに追加」のボタンをクリック

③「ColorPick Eyedropper」を追加しますか？と聞いてくるので、「拡張機能を追加」を選択します。

追加完了です。

使用法

「この拡張機能を使用するにはこのアイコンをクリックします。」と書いてありますが、今後使用する際はアドレスバーの横のグレーのパズルのピースのようなアイコン(画像の「ColorPick Eyedropper」のアイコンのとなり)の中に収容されているので、 そちらから「ColorPick Eyedropper」のアイコンをクリックして使用します。

画像のOpen in FirefoxやOpen in MS Edgeの拡張機能のように、拡張機能アイコン横に表示してすぐ使用できるようにしたい場合は、横のピンマークをクリックすると、ピンの色が青色になり、アイコンがメニュー外でも表示されるようになりますよ。

色をスポイトする時は色を知りたいところにカーソルを持っていき、四角の枠線がキャッチした色にかわるのでこの色だ！と思ったらそのままクリックでOK。

取得した結果が出るので、好きなほうのカラーコードをコピーして使うことができます。 クリックした場所にそのままボックスを表示してくれるのもマウス移動しなくてよいので私は気に入ってます。

履歴も見れます

①まずColorPick Eyedropperのアイコンをクリックして、メニュー内の歯車マークをクリックします。

②オプションの設定ができるページへ飛びます。
メニューが隠れているので開くために「歴史」をクリック

③開きます、詳細を知りたい色をクリック

横のpalletteに表示されます。16進数以外のコードが見たい場合は印刷/保存を押します

でました！複数の色を取得して後からまとめて確認することもできますね。

使えそうだな～と思ったら是非インストールしてみてください。