ブラウザ上のカラーコードを抽出！ColorPick Eyedropper

ペイントソフトのスポイトツールの様に、ブラウザの画面上に表示されているカラーコードが抽出出来ればいいのに！ そんな方に「ColorPick Eyedropper」というブラウザツールのご紹介です。

Contents

機能の説明
導入方法
便利な設定
1. クリック後にRGB、HSLも表示する様に設定
2. 自動でクリップボードに保存する方法
コーダーの人におすすめ！「Perfect Pixel」との併用

機能の説明

まずはざっくり「こんなことが出来るよ～」というのをお伝えします。と言っても、以下の動画を見て頂くだけでイメージを掴んで頂けると思います。

ColorPick Eyedropperを立ち上げると、以下の赤枠の小窓がブラウザ上に出現します。（それと同時にマウスカーソルが十字マークに変わります。）

小窓の中に、十字カーソルの中央付近がプレビューされていることがわかるかと思います。そしてカラーコードが欲しいポイントにカーソルを合わせて左クリック！ たったこれだけでブラウザ上のカラーコードが抽出できる優れものです。

導入方法

10秒で終わります。 まず、対応ブラウザはChromeとFirefoxの2つ。それぞれ、以下のURLにアクセスして「Chromeに追加」または「Firefoxへ追加」のボタンを押せば導入完了です。 ColorPicker Eyedropper　Chrome版 ColorPicker Eyedropper　Firefox版インストールが成功すると、ブラウザの右上に以下のアイコンが追加されます。

ColorPick Eyedropperを立ち上げる時は、このアイコンをクリックします。

便利な設定

普通に使うだけでも便利ですが、もう少しだけ使い勝手を良くしましょう。

クリック後にRGB、HSLも表示する様に設定

抽出する際に、デフォルトだとHexの値しか表示されません。（プレビューだとRGB、HSLも表示されるのに！）

これをRGB、HSLも表示される様に設定しましょう。すぐ終わります。 ColorPick Eyedropperを起動したら、小窓の下にある設定ボタンをクリック

設定画面が開くので、以下の項目すべてにチェックマークを付けます。

Show hexadecimal
Show RGB
Show HSL
Show RGB and HSL on page

最後に【Save Options】ボタンを押して完了！これでHex、RGB、HSL全ての値が取得出来るようになりました。

自動でクリップボードに保存する方法

デフォルトだと抽出された値を手動でコピーする必要があります。めんどくさいので自動でクリップボードに保存してくれる様に設定しましょう。設定画面の「Attempt to auto copy value to clipboard」の後にあるドロップダウンリストを表示（デフォルトだとOFFに設定されている箇所です）