Webサイト上の色のカラーコードを表示するChromeアドオン「Eye Dropper」


2012-0804-102027.jpg

引き続き、Webデザイン上で役立ちそうなChromeアドオンをご紹介します。
表示される色を表すカラーコードというものがHTMLやCCSにはありますが、
Web上の閲覧中のサイトから、そのカラーコードを抽出することが出来る
Chromeアドオン、「Eye Dropper」を紹介します。

スポンサードリンク

関連記事


Eye Dropper
https://chrome.google.com/webstore/detail/hmdcmlfkchdmnmnmheododdhjedfccka

先ずはアドオンをインストールします。
すると、このようなアイコンが追加されます。
2012-0804-133927.jpg

「Pick from web」タブから、「Pick color from webpage」を選択すると、
マウスのすぐ近くに「小さい□」マークが表示されます。
2012-0804-134032.jpg

2012-0804-134152.jpg

マウスを任意の部分にあわせると、
このように□の部分に色が表示されるので、
抽出したい色が表示されている場所でクリックを押します。
2012-0804-134200.jpg

すると、アドオン側の画面にその選択の色が表示され、
表示されている色の□にマウスをおくとカラーコードが表示されます。
この画像だと「#f6be21」の部分がカラーコードにあたります。
2012-0804-134640.jpg

操作方法としては以上です。
「Color Picker」タブを押すと、ページ側からでなく色のグラフからでもカラーコードの抽出が可能です。
2012-0804-134329.jpg

 

この記事が参考になったら、TipstourのFacebookページに『いいね!』をお願いします!

 

よろしければFeedlyもご登録ください!
follow us in feedly