Chromeで使えるカラーピッカーのアドオンを設置した手順を解説してるよ。
![うちやま](https://buildingblock.jp/blog/wp-content/uploads/2020/09/uchiyama-gundam-150x150.jpg)
ガンダムの色を確認するために設置しました。笑
【機能拡張】カラーピッカーのchromeのアドオンを導入する手順
Chromeで使えるカラーピッカーの代表的なアドオンが異常の2つ。
今回は「ColorPick Eyedropper」を導入したので、その手順を解説します。
![ColorPick Eyedropper](https://buildingblock.jp/blog/wp-content/uploads/2020/09/re.0.png)
これを入れるよ。
カラーピッカーをダウンロードする
![ColorPick EyedropperをChromeに追加](https://buildingblock.jp/blog/wp-content/uploads/2020/09/1-9.png)
Google ChromeでChromeウェブストアにアクセス。
「Chromeに追加」をクリックしてColor Pickerをインストールします。
![拡張機能を追加](https://buildingblock.jp/blog/wp-content/uploads/2020/09/2-10.png)
こちらの画面が出てくるので「拡張機能を追加」をクリック。
拡張機能がインストールされました。
![ColorPick Eyedropperがchromeにインストールされた画像](https://buildingblock.jp/blog/wp-content/uploads/2020/09/3-8-1024x28.png)
ブラウザにColorPick Eyedropperが表示されていればOK。
![Chrome拡張機能の編集画面](https://buildingblock.jp/blog/wp-content/uploads/2020/09/4-9.png)
アドオンが多すぎて埋もれたり、インストールしたけどブラウザに表示されない場合、「拡張機能(画面赤枠)」をクリックし、続けて「ColorPick Eyedropper(画面赤枠)」をクリック。
![ChromeにColorPick Eyedropperが追加](https://buildingblock.jp/blog/wp-content/uploads/2020/09/5-9.png)
ブラウザ上に表示されます。
![うちやま](https://buildingblock.jp/blog/wp-content/uploads/2020/09/uchiyama-gundam-150x150.jpg)
つづけてカラーピッカーの使い方を解説します。
カラーピッカーの使い方
![ColorPick Eyedropperのアイコンをクリック](https://buildingblock.jp/blog/wp-content/uploads/2020/09/6-9.png)
アイコンをクリックします。
![ColorPick Eyedropperの作業例](https://buildingblock.jp/blog/wp-content/uploads/2020/09/7-8-1024x630.png)
カーソルが「十字マーク」になり選択できる状態になりますので、色味を調べたい箇所にカーソルを動かしていただき、
![ColorPick Eyedropperを使って画面上にクリック](https://buildingblock.jp/blog/wp-content/uploads/2020/09/8-8.png)
調べたい箇所をクリックするとカラーコードが表示されます。(表示されたカラーコードはそのままコピーできます。)
閲覧しているサイト内の色を取得したい時に便利な拡張機能です。
注意!対象はブラウザのウィンドウ内のみ
アドオンや拡張機能のカラーピッカーは色を取得できるのはそのブラウザのウィンドウ内のみとなります。
よって、ブラウザ外で画面内のどこの色でも色味のデータを取得したい場合は「カラーピッカー(Color Picker)」というソフトをPCにインストールしてご活用ください。
カラーピッカー(Color Picker)なら、画面内のどこの色でもが可能です。
【補足】Color Pickerの使い方
- ダウンロードしたzipファイルを解凍
- 解凍したフォルダ内の「ColorPicker.exe」をダブルクリックで起動
- クリックまたはEnterボタンでカーソルの部分のカラーコードを取得してクリップボードに保存
- 【終了方法1】Escで常駐をしつつ終了
- 【終了方法2】Alt+F4で常駐せずに終了
まとめ
弊社のようなWeb系のお仕事をしていたり、普段からブログを作ったりしている人であればChromeでの作業が多いと思いますので、カラーピッカーのアドオンは重宝する拡張機能ですからぜひ活用してみてくださいね。
![うちやま](https://buildingblock.jp/blog/wp-content/uploads/2020/09/uchiyama-gundam-150x150.jpg)
ガンダムの「赤」は#40607だったのか。。。