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

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

スポンサーリンク
ad
ad

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ad