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

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

スポンサードリンク

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

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

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

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

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