機能の説明
まずはざっくり「こんなことが出来るよ~」というのをお伝えします。 と言っても、以下の動画を見て頂くだけでイメージを掴んで頂けると思います。![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/09/ColorPicker-eyedropper-500x290.gif)
![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/09/2019-09-19_09h42_10-500x292.png)
導入方法
10秒で終わります。 まず、対応ブラウザはChromeとFirefoxの2つ。 それぞれ、以下のURLにアクセスして「Chromeに追加」または「Firefoxへ追加」のボタンを押せば導入完了です。 ColorPicker Eyedropper Chrome版 ColorPicker Eyedropper Firefox版 インストールが成功すると、ブラウザの右上に以下のアイコンが追加されます。![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/09/2019-09-19_09h40_04-500x292.png)
便利な設定
普通に使うだけでも便利ですが、もう少しだけ使い勝手を良くしましょう。クリック後にRGB、HSLも表示する様に設定
抽出する際に、デフォルトだとHexの値しか表示されません。 (プレビューだとRGB、HSLも表示されるのに!)![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/09/2019-09-19_10h17_37-500x292.png)
![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/09/2019-09-19_10h19_52.png)
- Show hexadecimal
- Show RGB
- Show HSL
- Show RGB and HSL on page
![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/09/2019-09-19_10h23_03-500x407.png)
![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/09/2019-09-19_10h34_02.png)
自動でクリップボードに保存する方法
デフォルトだと抽出された値を手動でコピーする必要があります。 めんどくさいので自動でクリップボードに保存してくれる様に設定しましょう。 設定画面の「Attempt to auto copy value to clipboard」の後にあるドロップダウンリストを表示(デフォルトだとOFFに設定されている箇所です)![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/09/2019-09-19_10h36_33-1-500x406.png)
![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/09/colorpicker-eyedropper-option-500x290.gif)
コーダーの人におすすめ!「Perfect Pixel」との併用
実はこのツール、以前ご紹介したPerfect Pixelとの併用も可能です。![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/09/perfect-pixel-6-320x198.png)
ブラウザ上に画像を透過して表示!PerfectPixelのご紹介
PerfectPixel(パーフェクトピクセル)はコーディング案件で活躍するブラウザツールです。HTMLやCSSのコーディング結果...
![](https://doggy-kbk12.com/wp/wp-content/uploads/2019/09/cp-and-pf-500x275.gif)