ColorPick Eyedropperの使い方。便利なカラーコード早わかり！

ColorPick Eyedropper って、どうやって使うの？

カラーコードがすぐにわかる「ColorPick Eyedropper」、便利ですよね。

使い方は、とても簡単ですよ！

この記事でわかること

• ColorPick Eyedropper とは？
• ColorPick Eyedropper 公式サイトリンク
• ColorPick Eyedropper の使い方について

というわけで今回は、ColorPick Eyedropper の使い方を、解説します。

ColorPick Eyedropper とは？

ColorPick Eyedropper は、Webページなどから色の値がわかツールです。

Web ページの色が気になったときに、すぐに調べることができるので重宝しています。無駄な機能もなく、シンプルなところも大好きです。

開発サイト

ColorPick Eyedropper の使い方【３ステップ】

ColorPick Eyedropper の使い方を、解説します。

３ステップで、できるだけわかりやすく解説させていただきます。

【ステップ１】ColorPick Eyedropper をダウンロード

ステップ１は、ColorPick Eyedropper をダウンロードします。

各種ご利用のブラウザにあわせて、ColorPick Eyedropper をダウンロードしてください。各配信ストアへのダウンロードリンクをご用意しました。ご活用ください。

Opera

Chrome

iPhone

Android

【ステップ２】ツールバーのアイコンをクリック

ステップ２は、ツールバーのアイコンをクリックします。

ColorPick Eyedropper アイコンを、クリック。

【ステップ３】カラーコードをチェック

ステップ３は、カラーコードをチェックします。

ステップ２で、ツールバーのアイコンをクリックすると、下記のような操作画面がでてきます↓

マウスにカーソルがついてくるので、調べたい色の上にマウスを移動しましょう。

画像のように、拡大して表示してくれます。カラーコードを表示させたいポイントで、マウスをクリックします。

クリックすると、ポップアップが固定されます。コードをコピーしたら、完了です。操作をおわるときは、 閉じるボタンをクリックすればOKです。

ColorPick Eyedropperでわかるカラーコード

• 16進数：#FFFFFF
• RGB：rgb(255,255,255)
• hsl：hsl(0,0%,100%)

たとえば、白色のカラーコードだと、こんな感じになります。

まとめ

「ColorPick Eyedropper」について、使い方を解説させていただきました。

Webサイトのカラーコードが調べたいときに、とても助かりますので、ぜひ使ってみてくださいね！

基本的に英語表示でわかりづらいと思いますので、解説させていただきました。

そのほか、便利な Chrome 拡張機能について、こちらの記事をどうぞ↓

【関連】【2020年】Google Chrome 拡張機能まとめ

2019.07.19

【2020年】Google Chrome 拡張機能【厳選まとめ】

って疑問を、解決していきましょう。 いつもつかっている Google Chrome（グーグルクローム）を、もっと便利に使いたい！ って考えたこと...みなさん、一度はありませんか？ なんと Google Chrome（グーグルクローム） には、あとから機能を追加できる「拡張機...