画面の色(カラーコード)を取得するおすすめツール

Web制作をしているとブラウザやPCの画面から色(カラーコード)を取得したい場面があります。

そんな時に使えるツールは多々ありますが、おすすめは以下の3つです。

利用方法を解説していきます。

ColorZilla

「ColorZilla」はGoogle Chrome、Firefoxで利用できます。

Google Chromeで解説します。

chromeウェブストアで「ColorZilla」で検索して「Chrome に追加」ボタンをクリックします。

「ColorZilla」を追加しますか？と聞かれたら「拡張機能を追加」をクリックでインストール完了です。

拡張機能のスポイトのマークをクリックすると起動します。

十字のカーソルをマウスで移動すると、カーソル下の部分のカラーコードがリアルタイムで表示されます。

クリックするとその部分のカラーコードがクリップボードにコピーされます。

※コピーされるカラーコードのフォーマットは、スポイトマークをクリック→「Options」から変更できます。

終了したい場合はダブルクリック又はEscボタンで終了できます。

Google Chrome版ではマウス付近の拡大機能が利用できないので拡大機能を使いたい方は「ColorPick Eyedropper」を利用しましょう。

「ColorPick Eyedropper」はGoogle Chrome、Firefoxで利用できます。
特徴は、マウス付近の拡大機能が利用できるので細かな部分のカラーコード取得も可能です。

chromeウェブストアで「ColorPick Eyedropper」を検索して「Chrome に追加」ボタンをクリックします。

「ColorPick Eyedropper」を追加しますか？と聞かれたら「拡張機能を追加」をクリックでインストール完了です。

拡張機能のマークをクリックすると起動します。

十字のカーソルを移動してクリックするとその部分のカラーコードがコピー可能になるのでCtrl+Cでコピーします。

違うフォーマットのカラーコードを取得したい場合は、もう一度拡張機能のマークをクリックすると詳細画面が出るのでそこからコピーします。細かな移動も可能です。

終了したい場合はEscボタンで終了できます。

カラーピッカー(Color Picker)はインストール不要ですぐに利用できるフリーソフトです。

PC画面の色を取得する際に、「PrintScreenキーでキャプチャして画像にしてから画像編集ソフトにペーストしてスポイトツールでカラーコード取得」というわずらわしい作業をしなくても一瞬でカラーコードが取得できます。

動作も軽く、いつでもどこでも思い立ったらすぐに利用できるので便利です。

Vectorからダウンロードして任意のフォルダでzipファイル（ColorPicker_40.zip）を解凍します。

解凍してできたフォルダ内の「ColorPicker.exe」をダブルクリックで起動します。（※インストールは不要です。）

クリックまたはEnterボタンでカーソルの部分のカラーコードを取得してクリップボードに保存します。

終了する場合は、Escで常駐をしつつ終了、Alt+F4で常駐せずに終了です。

というふうに状況に応じて使い分けましょう。

以上で解決です。