ブラウザ（Chrome、Firefox）上からサイトの色（カラーコード）を確認する方法

ブラウザ上からサイトの色（カラーコード）を確認する方法

今回は、ブラウザ上（「Google Chrome」や「Firefox」）でサイトの色（カラーコード）を確認したい場合に便なアドオンを紹介します。

頻度は多くないですが、
何かしらのサイトを参考にしているときに「この部分のカラーコードは何？」ってなることが時々あります。

そのような場合に便利なアドオンです。

因みに、今回紹介するのは、利用頻度の高い「Firefox」と「Google Chrome」のアドオンのみです。
もし他のブラウザを使用されている場合には、自分で調べてみて下さい。

Firefoxでカラーコードを取得するアドオン

Firefoxの場合、「ColorZilla」というアドオンが便利です。

【ブラウザへの追加方法】
まず、Firefoxから「https://addons.mozilla.org/ja/firefox/addon/colorzilla/」へアクセスして下さい。
※もしくは、アドオンの検索画面に移動して「ColorZilla」を検索してみて下さい。

このような画面が表示されます。

あとは、この画面上から「+ Firefox へ追加」というボタンをクリックするだけなので、簡単にインストールできます。

【アドオンの使い方】
アドオンを追加すると、ブラウザの右上にスポイトのようなマークが表示されます。

これをクリックしてみて下さい。

十字のマークが出てくるので、そのマークを特定の場所に移動させるだけで、使用されているカラーコードを確認できます。
こんな感じです。

Google Chromeでカラーコードを取得するアドオン

Google Chromeの場合、「ColorPick Eyedropper」か「ColorZilla」というアドオンが便利です。

私のおすすめは「ColorPick Eyedropper」なので、今回はこちらのアドオンの使い方を紹介します。

【ブラウザへの追加方法】
まず、Google Chromeから「https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg」へアクセスして下さい。

このような画面が表示されます。

あとは、この画面上から「Chrome に追加」というボタンをクリックするだけなので、簡単にインストールできます。

【アドオンの使い方】
アドオンを追加すると、ブラウザの右上にカラーピッカーのようなマークが表示されます。

これをクリックしてみて下さい。

十字のマークが出てくるので、そのマークを特定の場所に移動させるだけで、使用されているカラーコードを確認できます。
こんな感じです。