【簡単】WEBサイトの色を調べる拡張機能「ColorPick Eyedropper」の使い方を紹介!

【簡単】WEBサイトの色を調べる拡張機能「ColorPick Eyedropper」の使い方を紹介!

WEBサイトで使われている色が気になることってありますよね。そこで、Chromeの拡張機能「ColorPick Eyedropper」を使うことですぐに色が分かりますよ。この記事では、ColorPick Eyedropperの使い方をご紹介しています。


目次[非表示]

  1. WEBサイトの色を調べる方法は?
  2. ColorPick Eyedropperのインストール
  3. ColorPick Eyedropperの使い方
  4. まとめ

WEBサイトの色を調べる方法は?

パレット

WEBサイトを見ていて、「このサイトで使われている色が気になる」といったケースはありませんか?デザイナーやデザインの勉強をしている人だとよく気になるのではないでしょうか。

サイトの色を調べるには、スポイトツールを使ってカラーコードを抽出したりGoogle ChromeのデベロッパーツールでCSSを見ることで調べることができますが、これらの方法だと手間がかかりますよね。

そこで、Google Chromeですぐにサイトの色を調べることのできるアドオン「ColorPick Eyedropper」で手軽に確認してみませんか?この記事では、ColorPick Eyedropperのインストール方法・使い方をご紹介していきます。

ColorPick Eyedropperのインストール

画面右上にある青い「Chromeに追加」ボタンをクリック
それでは、ColorPick Eyedropperを導入してみましょう。下記リンク先のChromeウェブストアにアクセスしたら、画面右上にある青い「Chromeに追加」ボタンをクリックします。
ColorPick Eyedropper - Chrome ウェブストア
アドレスバーの下に「ColorPick Eyedropper」を追加しますか?とウィンドウが表示
アドレスバーの下に「ColorPick Eyedropper」を追加しますか?とウィンドウが表示されるので、「拡張機能を追加」をクリックしましょう。すぐにインストールが行われます。
アドレスバーの右側に拡張機能アイコンが表示
インストールが完了すると、アドレスバーの右側に拡張機能アイコンが表示されます。

ColorPick Eyedropperの使い方

ColorPick Eyedropperの使い方を説明します。まずは色を調べたいホームページを開きましょう。

ColorPick Eyedropperの拡張機能アイコンをクリック
ホームページを開いた状態で、ColorPick Eyedropperの拡張機能アイコンをクリックします。これで準備OKです。
マウスカーソルにカラーコードを調べるルーペが表示
マウスカーソルにカラーコードを調べるルーペが表示されるようになるので、調べたい色が表示されている箇所までマウスカーソルを持っていきましょう。ルーペの下にカラーコードが表示されます。
カラーコード
そのままサイト上でクリックすることで、カラーコードをコピーすることができますよ。
拡張機能アイコンをクリックしてカラーコードの左側にある×ボタンをクリック
ColorPick Eyedropperを終了するには、拡張機能アイコンをクリックしてカラーコードの左側にある×ボタンをクリックしましょう。

まとめ

【簡単】WEBサイトの色を調べる拡張機能「ColorPick Eyedropper」の使い方を紹介!いかがでしたでしょうか。

人によっては、WEBサイトで使われている色が気になる・調べたいという方もいるかと思います。そこで、Google Chromeの拡張機能「ColorPick Eyedropper」を使うことで、手軽にカラーコードを知ることができますよ。ぜひお試しください。


関連記事