ColorPick Eyedropperとは？
ColorPick Eyedropperは、Google Chromeに追加して使う無料の拡張機能（ブラウザに小さな機能を追加できる後付けアプリのようなもの）です。
マウスを合わせるだけで、その部分の色を数値（カラーコード）で教えてくれます。90万人以上が使っている、定番の色調べツールです。
主な機能・特徴
| 機能 | できること |
|---|---|
| 拡大表示 | カーソル周辺が拡大されるので、小さなアイコンでもピタッと狙った色を選べます。 |
| 複数の形式で色を表示 | 「HEX（#から始まる6桁の色の暗号のようなもの。例：#66BB6A）」「RGB（赤・緑・青の光の量で色を表す方式）」に加え、設定で「HSL」も表示できます。 |
| カラー履歴 | 一度チェックした色はあとから見返せるので、色選びで迷ったときも安心です。 |
| クリップボードに自動コピー | 設定をオンにすれば、色をクリックした瞬間にコードをコピーしてくれます。 |
| 画像の色も取得 | 写真やロゴ画像に使われている色も同じ操作で取得できます。 |
| 多言語対応 | 日本語を含む48言語に対応しているので、表示が英語で戸惑うこともありません。 |
活用例
- 好きなサイトのボタンの色を調べて、自分のブログに取り入れる
- 参考サイトの配色をチェックして、CSS（サイトの見た目を整えるための記述）に反映する
- ロゴやバナー画像の色を抽出して、サイト全体の色に統一感を出す
- ブログのテーマカラーを決めるときの色見本集めに使う
- デザイン案と実際の表示に色のズレがないか確認する
インストール方法
Chromeの拡張機能なので、面倒なログインは不要です。次の手順だけで使えるようになります。
Google ChromeでColorPick EyedropperのChromeウェブストアページを開きます。
「Chromeに追加」ボタンをクリックします。
確認画面が出たら「拡張機能を追加」をクリックします。
これでインストール完了です。ツールバー（画面右上のアドレスバー付近）にアイコンが表示されます。
アイコンが見当たらないときは、パズルのマークをクリックすると拡張機能の一覧が出てくるので、ColorPick Eyedropperをピン留めしておくと次回から探しやすくなります。
使い方
手順1：色を調べたいページを開く
まずはチェックしたいWebサイトをChromeで表示させます。
手順2：アイコンをクリックする
ツールバーのColorPick Eyedropperのアイコンをクリックすると、マウスカーソルの形が変わり、色を選べる状態になります。
手順3：調べたい色にカーソルを合わせる
色を知りたい部分にマウスを乗せると、周辺が拡大表示され、リアルタイムでカラーコードが画面に出てきます。
手順4：クリックしてコードを取得する
「これだ」という場所でクリックすると、HEXコードとRGB値が出てくるので、それをコピーしてCSSなどに貼り付ければ完了です。
手順5：操作を終了する
キーボードの「Esc」キーを押すと、いつも通りのページ操作に戻ります。
ページをスクロールしたら「r」キーで更新
ColorPick Eyedropperは、起動した瞬間のページの状態をもとに色を読み取っています。そのため作業中にスクロールすると、正しい色が拾えなくなることがあります。そんなときは「r」キーを押すか、画面の「re-snap（再読み込み）」ボタンを押せば、最新の状態に更新されます。
設定を変えたいとき
アイコンをクリックした直後に出てくるウィンドウの歯車マークから設定画面を開けます。よく使われるのは次の2つです。
- 「Show HSL」にチェックを入れると、HSL形式でも色を表示できます。
- 「Attempt to auto copy value to clipboard」を「hexadecimal」などに変えると、色をクリックした瞬間にコードが自動でコピーされます。
個人で使う場合の料金について
ColorPick Eyedropperは、個人のブログ運営や学習目的なら、ずっと無料で使えます。有料プランへの加入やアカウント作成は一切必要なく、インストールするだけですべての機能をそのまま使えます。
| 利用者 | 料金 | 備考 |
|---|---|---|
| 個人（ブログ運営・学習など） | 無料 | Chrome拡張機能をインストールするだけで全機能が使えます。アカウント登録も不要です。 |
| 企業・法人（ビジネス利用） | 有料ライセンスが必要 | デスクトップアプリ版（Windows・Mac対応）を業務で使う場合に案内されています。 |
個人が自分のサイトのために使う分には料金は一切かかりませんので、気軽にインストールして大丈夫です。
利用規約
- ソースコード（プログラムの中身）はGitHubで公開されており、誰でも確認できます。
- すべてのサイトで動作させるための権限を必要としますが、この権限を悪用しないことを開発者が明言しています。
- 集めたデータは第三者への販売や、機能と関係のない目的での利用は行わないと、開発者のプライバシーポリシーに書かれています。
- 会社などがビジネス目的で使う場合は、適切なライセンスの購入が求められています。
- Chromeウェブストア共通の利用規約にも従う必要があります。
注意点
- Chromeウェブストアのページや、パソコン内のファイル（file://から始まるページ）では、初期設定のままだと動きません。使いたい場合は拡張機能の管理画面から「ファイルのURLへのアクセスを許可する」をオンにしてください。
- 色の読み取りは、起動した瞬間のページの状態をもとにしています。スクロール後は「r」キーでの更新を忘れずに。
- タブを切り替えた直後にエラーが出ることがありますが、これは安全のためのわざとの仕様です。再スナップするか、一度終了してからやり直せば直ります。
- パソコンの画面設定によっては、取得した色の数値が実際と少しずれることがあります。
- インストール直後やページを開いた直後は、まれに反応が鈍いことがあります。ページの再読み込みで直ることがほとんどです。
- 不具合を見つけたときは、レビュー欄ではなくフィードバック機能から伝えると開発者に気づいてもらいやすいです。
