Chrome:ブラウザ上のカラーコードを取得するカラーピッカー「ColorPick Eyedropper」

WEBサイトを構築している時にブラウザ上に表示されているコンテンツの色を調べたい場合があります。

Chrome拡張機能で「ColorPick Eyedropper」を使用すると指定した箇所のカラーコードを取得することが可能です。

今回はChromeのブラウザ上に表示されているコンテンツのを調べることができるカラーピッカーアドオンColorPick Eyedropper」をご紹介します。

ColorPick Eyedropper

ColorPick_1

ColorPick Eyedropper」のアイコンをクリックし、調べたい箇所をクリックするだけでカラーコードを取得することができます。
また、RGBの値も表示してくれます。

サイトを構築する際に結構便利なChrome拡張機能です。

下記にChrome拡張機能ColorPick Eyedropper」を追加し、使用した時の方法をメモします。


「ColorPick Eyedropper」の使用方法

1.下記URLにアクセスします。

ColorPick Eyedropper

2.「+ 無料」ボタンをクリックし、「ColorPick Eyedropper」をChromeに追加します。

ColorPick_2

3.メッセージボックスが表示されるので、「追加」をクリックします。

ColorPick_3

4.追加するとヘッダーメニューに「ColorPick Eyedropper」のアイコンが表示されます。

ColorPick_4

5.アイコンをクリックするとカーソルが「十字マーク」になり、選択できる状態になります。

ColorPick_5

6.調べたい箇所をクリックするとカラーコードが表示されます。

ColorPick_6


表示されたカラーコードはそのままコピーできます。
サイト内の色を取得したい時に便利な拡張機能なのでおすすめです。