概要
「Color Picker Eyedroppe」はGoogle Chromeの拡張機能です。
ブラウザはChromeに限らずFirefoxやEdgeでも使えそうですね。
ブラウザを立ち上げた状態で「Color Picker Eyedroppe」を使うと画面上にマウスを乗せた箇所のカラーコードを特定することが出来ます。カラーコードを取得したら、そのカラーコードをクリップボードにコピーします。そして、そのコードをCSSやPhotoshopなどの必要箇所にペーストして利用します。
あらゆるデザイナーにとって便利なスポイドツールです。
ウェブサイトのデザイン、ロゴの作成、フォント色などで正確なカラーコードの取得は非常に重要です。
導入方法と利用方法
このプラグインのchrome ウェブストア公式ぺージはこちらです。
大まかな流れを書きますが、直感的に利用できると思います。
- Chromeのブラウザを使っている人なら導入は簡単です。
まずはChromeを立ち上げご自分のアカウントでログインします。 - 次に「拡張機能 ColorPick Eyedropper」で検索するとトップにchrome ウェブストアのColorPick Eyedropperのページがヒットされます。
こちらがこのページです。 - そこで「Chromeに追加」をクリックするとブラウザの右上に次のような小さなアイコンが追加されます。これがColorPick Eyedropperのアイコンです。
- そのアイコンをクリックするとColorPick Eyedropperの設定画面が開きます。
最初は、「デフォルトを表示」→「オプションを保存」の選択で良いと思います。
後で変更するにはアイコンを右クリックしてオプションを選択すると再設定出来ます。 - 再度、アイコンをクリックしColorPick Eyedropperを起ち上げます。そしてカラーコードを取得したい箇所に合わせると次のような画面になりカラーコードを表示させます。（例：#41F6D9）
- そのカラーコードをコピーしてはCSSやPhotoshopなどの色設定の箇所にペーストします。
- どうも説明が上手くありませんね。でも、直感的に利用できると思いますよ。
最後に
Chromeの拡張機能の中で最も便利なものだと思っています。
サイト作りでは色の選別は重要です。
同じ系統の色でも無数に種類があります。正確な色指定はサイトのデザインで必須事項です。
サイト作りだけでなく色んなシーンで使えると思います。
是非、使ってみて下さい。
2022/11/30
