WEBサイトの色を調べる方法は？
WEBサイトを見ていて、「このサイトで使われている色が気になる」といったケースはありませんか？デザイナーやデザインの勉強をしている人だとよく気になるのではないでしょうか。
サイトの色を調べるには、スポイトツールを使ってカラーコードを抽出したりGoogle ChromeのデベロッパーツールでCSSを見ることで調べることができますが、これらの方法だと手間がかかりますよね。
そこで、Google Chromeですぐにサイトの色を調べることのできるアドオン「ColorPick Eyedropper」で手軽に確認してみませんか？この記事では、ColorPick Eyedropperのインストール方法・使い方をご紹介していきます。
ColorPick Eyedropperのインストール
それでは、ColorPick Eyedropperを導入してみましょう。下記リンク先のChromeウェブストアにアクセスしたら、画面右上にある青い「Chromeに追加」ボタンをクリックします。
アドレスバーの下に「ColorPick Eyedropper」を追加しますか？とウィンドウが表示されるので、「拡張機能を追加」をクリックしましょう。すぐにインストールが行われます。
インストールが完了すると、アドレスバーの右側に拡張機能アイコンが表示されます。
ColorPick Eyedropperの使い方
ColorPick Eyedropperの使い方を説明します。まずは色を調べたいホームページを開きましょう。
ホームページを開いた状態で、ColorPick Eyedropperの拡張機能アイコンをクリックします。これで準備OKです。
マウスカーソルにカラーコードを調べるルーペが表示されるようになるので、調べたい色が表示されている箇所までマウスカーソルを持っていきましょう。ルーペの下にカラーコードが表示されます。
そのままサイト上でクリックすることで、カラーコードをコピーすることができますよ。
ColorPick Eyedropperを終了するには、拡張機能アイコンをクリックしてカラーコードの左側にある×ボタンをクリックしましょう。
まとめ
【簡単】WEBサイトの色を調べる拡張機能「ColorPick Eyedropper」の使い方を紹介！いかがでしたでしょうか。
人によっては、WEBサイトで使われている色が気になる・調べたいという方もいるかと思います。そこで、Google Chromeの拡張機能「ColorPick Eyedropper」を使うことで、手軽にカラーコードを知ることができますよ。ぜひお試しください。