他のサイトや画像のカラーコードを調べる方法８選

普段他の方のブログやサイトを拝見しているときに、

「この色いいな～」

って思うことありますよね。

カラーコードは1,600万通り以上もあるので原色大辞典などでそれっぽい色を見つけても、全く同じ色である可能性は極めて低いです。

今回はそんなカラーコードを簡単に取得できる方法をご紹介したいと思います。

Webサイトからカラーコードを取得する方法

まず初めにwebサイト上のカラーコードを取得する方法をいくつかご紹介します。

フリーソフトを利用する場合

カラーピッカー（Color Picker)　ー動作環境：Windows

カラーピッカー起動時には画面の枠が赤くなります。

非常にシンプルで操作が分かりやすいソフトです。

カラーピッカーを利用する

パワースポイト　ー動作環境：Windows

こちらは、ソフトを起動した状態で左クリックが使えるので、使い勝手の良さを感じました。

ページ遷移しながらも色の確認が出来る点がありがたいです。

パワースポイトを利用する

ブラウザのアドオンを利用する場合

ColorZillaー動作環境：Google Chrome, Firefox

※Firefoxでも同様の手順で利用できます

一度コピーするとColorZillaが自動的に終了します。

Firefoxでも利用できるので、多くの方が利用できると思います。

設定項目もあり他のツールよりも利用できる機能が多い点が特徴です。

Chromeで利用する

Firefoxで利用する

ColorPick Eyedropper　ー動作環境：Google Chrome

こちらもChromeの拡張機能の一つであり、一番シンプルで、一番手っ取り早く利用できるツールです。

「細かい設定等いらないから、早く使いたい」という方におススメです。

ColorPick Eyedropperを利用する

インストール・追加等一切せずにカラーコードを取得したい場合

ソフトのインストールや、アドオンの追加等をせずにブラウザの標準機能で色を取得する方法もあります。

今回はGoogle Chromeでの取得方法をご紹介いたします。

Google Chromeのデベロッパーツールでカラーコードを取得する方法

Google Chromeのデベロッパーツールでカラーコードを取得する流れは以下の通りです。

以上です。

カラーコードを取得する手段としてはあまり使い勝手が良いものではないので、よっぽどソフトや拡張機能を利用したくないという方以外にはおススメしません。

Webサイトのカラーの配色を知る方法

サイトの一部の色を取得するのではなく、サイト全体でどのような配色になっているか知る方法があります。

webcolourdata

知りたいサイトのURLを入力し、GET COLOURSをクリックするだけです。

Googleで試した場合は以下のようになります。

少し用途は限られそうですが、サイト全体の配色を決める際などに参考になりそうです。

webcolourdataを利用する

予め保存している画像からカラーコードを取得する方法

Webサイトから取得するのではなく、予め保存している画像からカラーコードを取得する方法をご紹介します。

Syncer | イメージカラーピッカー

「ファイルを選択」から画像を選択するだけで簡単にカラーコードを取得できます。

iPhoneでも利用できたので、スマホの画像から取得したい場合にも利用できます。

イメージカラーピッカーを利用する

peko-step | 画像から色を取得するツール

こちらも「ファイルを選択」からファイルを選ぶだけで利用できます。

RGB値も取得できるので、RGB値で指定したい場合には便利です。

※iPhoneでは画像を選べませんでした。

画像から色を取得するツールを利用する

以上、Webサイトや画像からカラーコードを取得８つの方法をご紹介しました。

個人的におススメなのは、

です。

利用用途や、使い勝手に合わせてお好みの方法をお選びください。