表示しているページのカラーコードがわかるChromeの拡張機能「Eye Dropper」

Webサイトを閲覧している時に、閲覧しているページのコンテンツの色の情報を調べたい時とても役に立つGoogle Chrome拡張機能をご紹介します。

Chrome拡張機能のEye Dropperを使用すれば、いちいち画像を保存して編集ソフトで色の情報を調べたりすることなく、Web上ですばやく、コンテンツのカラーコードを取得することができます。今回は、そんなEye Dropperについてご紹介します。

Eye Dropper

まずは、EyedropperをGoogleウェブストアからダウンロードして拡張機能に追加しましょう。Eyedropperにアクセスして、+CHROMEに追加をクリックします。

274

確認画面が出るので、内容を確認して大丈夫だったら、拡張機能を追加をクリックしてください。

275

アドレスバーの右側にアイコンが追加され、拡張機能へEyedropperの追加が完了しました。あとは、カラー情報を取得したいページでアイコンをクリックするだけで、機能を利用することができます。

試しに使用してみたいと思います。UX MILKのページでアイコンをクリックしました。色情報を取得したいコンテンツにカーソルを合わせるとカラーコドが表示されます。

正確に色情報を取得したいピクセルを選択するために、ポインタの周辺が拡大されるため見やすくなっています。

276

終了するときは、もう一度アイコンを押して、×マークをクリックします。

277

入れておくと意外と重宝する機能なので、ぜひ活用してみてください。


購読

平日・毎朝更新中