Firefox開発ツールのカラーピッカーがコピー簡単で便利だった

firefox-colorpick_key
 
Web制作をやっていると閲覧しているサイト画像のカラーが何色なのか気になることがあります。

スポンサーリンク

Chromeのカラーピッカー

そういう時、Chromeの拡張機能のEye Dropperを使っています。

使い方はいたって簡単。
右上のEye Dropperアイコンをクリックします。
01_firefox-colorpick
 

「Pick color from web page」ボタンをクリックします。
02_firefox-colorpick
 

カラーピックしたいところにカーソルを合わせると、右下にカラーナンバーが表示されます。
03_firefox-colorpick
 

クリックすると右上のEye Dropperアイコンの右下の色が取得した色に変わります。
04_firefox-colorpick
 

Eye Dropperアイコンをクリックすると、今回選択した色番号が表示されるので、ここでコピーできます。
05_firefox-colorpick
 

Firefoxのカラーピッカー

Chromeのこの拡張機能とても便利なので、仕事で使っているFirefoxにも入れようと思ったんですが、Eye Dropperがないんですね。

でも、Firefoxの場合、Eye Dropperを入れなくても開発ツールについているんですね!
これが便利だったのでメモしておきます。

サイトの適当なところを右クリックして「要素を調査」をクリックします。
06_firefox-colorpick
 

歯車マークの開発ツールオプションをクリックします。
07_firefox-colorpick
 

「ページから色を選択します」にチェックします。
08_firefox-colorpick
 

チェックするとカラーピッカーアイコンが表示されるのでクリックします。
09_firefox-colorpick
 

カラーピックしたいところにカーソルを合わせるとカラー番号が表示されるので、クリックするとカラー番号がコピーされます。
10_firefox-colorpick
 

ワンクリックでコピーされるのでかなり便利です!!
 

くるりん

新入社員の頃にシステムエンジニアの会社に入社。その後、WEB制作系の仕事に転職しました。

くるりんをフォローする
パソコンのこと
スポンサーリンク
くるりんをフォローする
Memorandums
タイトルとURLをコピーしました