PC1台で自由に人生をデザインするリクのブログ

ブラウザ上のカラーコードを一瞬で取得できる!Chrome拡張機能「ColorPick Eyedropper」の使い方

 

WEBサイトを閲覧しているときや何かデザイン案をブラウザ上で探しているとき、たまに表示されている色のカラーコードを知りたくなるときがあります。「このサイトのこの色好きなんだよなー。」というような経験が誰にもあるはず。

 

そういった際にとても役に立つツールがGoogle Chromeの拡張機能である「ColorPick Eyedropper」

Chromeの拡張機能はブラウザをキャプチャしたり画像をPinterestに保存したりと、かなり便利なものが多いですが、このカラーピッカーは一瞬でブラウザ上のカラーコードを知ることができる優れもの。

 

とても幅広いケースで役に立つので、ぜひ解説をもとに機能を導入していきましょう。

 

Chrome拡張機能「ColorPick Eyedropper」のインストール方法

 

Chromeの拡張機能「ColorPick Eyedropper」をインスールするには、まずChromeのウェブストア内にあるカラーピッカーのページへと飛びます。

ColorPick Eyedropper – Chrome ウェブストア

 

すると次のような画面が表示されるので、右上にある「+CHROMEに追加」という青いボタンをクリックしましょう。

 

そして、『「ColorPick Eyedropper」を追加しますか?』という文言が表示されるので、右下にある「拡張機能を追加」をクリックし機能をインストールしましょう。

 

これでカンタンに拡張機能を追加することができました。相変わらずChromeの拡張機能は、無料ですぐにインストールできるところが優れている点ですね。

 

「ColorPick Eyedropper」を使ってブラウザ上のカラーコードを取得する方法

 

さて、無事に「ColorPick Eyedropper」のインストールを済ませることができたら、次のようにブラウザの右上にある項目にカラーピッカーが追加されていますね。

このカラフルなアイコンをクリックすることでブラウザのカラーコードを取得することができるので、取得したい色が表示されている画面を開いたままこちらのアイコンをクリックしましょう。

 

するとカーソルが表示されるので、次のように調べたい色がある場所に焦点を当ててみましょう。

 

色の上でクリックすると、次のようにカラーコードがコピーできるようになるので、表示されたコードをコピーすればOKです。

ColorPick Eyedropperを終了したい際には、右上に表示されている「×」ボタンをクリックすれば終了することができます。

 

これで、Chromeブラウザで表示している画面上の色なら、どんなものでもカラーコードを取得できるようになりました。あまりにもカンタンすぎて拍子抜けしてしまったかもしれませんが、とても便利な機能なので積極的に活用していきましょう。

 

最後に

 

以上、ブラウザ上のカラーコードを一瞬で取得できる便利なChromeの拡張機能、「ColorPick Eyedropper」の使い方について解説しました。いかがだったでしょうか?

他のWEBサイトを分析し研究することはサイト運営をしていく上でとても重要な役割を果たしますが、その中でもこのColorPick Eyedropperは大いに役立つことでしょう。

 

ぜひ積極的に活用していき、自分の好きな色を自由自在に扱っていきましょう。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です