普段他の方のブログやサイトを拝見しているときに、
「この色いいな～」
って思うことありますよね。
カラーコードは1,600万通り以上もあるので原色大辞典などでそれっぽい色を見つけても、全く同じ色である可能性は極めて低いです。
今回はそんなカラーコードを簡単に取得できる方法をご紹介したいと思います。
Webサイトからカラーコードを取得する方法
まず初めにwebサイト上のカラーコードを取得する方法をいくつかご紹介します。
フリーソフトを利用する場合
カラーピッカー（Color Picker) ー動作環境：Windows
- こちらからソフトをダウンロードする
- ダウンロードしたソフトを解凍し、ColorPicker.exeを起動する
- 取得したい色の上にカーソルを乗せ、Enterもしくは左クリックを押すとカラーコードがコピーされる
- 終了する場合はEscキーを押す
カラーピッカー起動時には画面の枠が赤くなります。
非常にシンプルで操作が分かりやすいソフトです。
パワースポイト ー動作環境：Windows
- こちらからソフトをダウンロードする
- lzhファイルを解凍し、CSpoit.exeを起動する
- 取得したい色の上にカーソルを乗せ、スペースキーを押すとカラーコードがコピーされる
- 終了時は、画面右上の×ボタンを押す
こちらは、ソフトを起動した状態で左クリックが使えるので、使い勝手の良さを感じました。
ページ遷移しながらも色の確認が出来る点がありがたいです。
ブラウザのアドオンを利用する場合
ColorZillaー動作環境：Google Chrome, Firefox
- こちらからChromeウェブストアのページに遷移し、Chromeに追加をクリック
- ブラウザ右上のアイコンを選択する
- 取得したい色の上にカーソルを乗せ、クリックをするとカラーコードがコピーされる
※Firefoxでも同様の手順で利用できます
一度コピーするとColorZillaが自動的に終了します。
Firefoxでも利用できるので、多くの方が利用できると思います。
設定項目もあり他のツールよりも利用できる機能が多い点が特徴です。
ColorPick Eyedropper ー動作環境：Google Chrome
こちらもChromeの拡張機能の一つであり、一番シンプルで、一番手っ取り早く利用できるツールです。
「細かい設定等いらないから、早く使いたい」という方におススメです。
インストール・追加等一切せずにカラーコードを取得したい場合
ソフトのインストールや、アドオンの追加等をせずにブラウザの標準機能で色を取得する方法もあります。
今回はGoogle Chromeでの取得方法をご紹介いたします。
Google Chromeのデベロッパーツールでカラーコードを取得する方法
Google Chromeのデベロッパーツールでカラーコードを取得する流れは以下の通りです。
- STEP.1
カラーコードを取得したいページでキーボードのF12を押す
下記のような画面になります↓
- STEP.2
デベロッパー画面（画面右側）上部メニューにある一番左のアイコンを選択する
- STEP.3
Webページ（左画面）の色がある部分をクリックする
※色を取得したい部分でなくても可 - STEP.4
デベロッパー画面（画面右側）のStylesから「color□」とある部分を探し、□をクリックする
- STEP.5
カラー取得モードになるので、取得したい色の上にカーソルを乗せ、クリックする
以上です。
カラーコードを取得する手段としてはあまり使い勝手が良いものではないので、よっぽどソフトや拡張機能を利用したくないという方以外にはおススメしません。
Webサイトのカラーの配色を知る方法
サイトの一部の色を取得するのではなく、サイト全体でどのような配色になっているか知る方法があります。
知りたいサイトのURLを入力し、GET COLOURSをクリックするだけです。
Googleで試した場合は以下のようになります。
少し用途は限られそうですが、サイト全体の配色を決める際などに参考になりそうです。
予め保存している画像からカラーコードを取得する方法
Webサイトから取得するのではなく、予め保存している画像からカラーコードを取得する方法をご紹介します。
「ファイルを選択」から画像を選択するだけで簡単にカラーコードを取得できます。
iPhoneでも利用できたので、スマホの画像から取得したい場合にも利用できます。
こちらも「ファイルを選択」からファイルを選ぶだけで利用できます。
RGB値も取得できるので、RGB値で指定したい場合には便利です。
※iPhoneでは画像を選べませんでした。
以上、Webサイトや画像からカラーコードを取得８つの方法をご紹介しました。
個人的におススメなのは、
・画像から色取得 ⇒ イメージカラーピッカー(Syncer)
です。
利用用途や、使い勝手に合わせてお好みの方法をお選びください。
コメント