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

Chrome拡張機能
助手くん
助手くん
ColorPick Eyedropper って、どうやって使うの?
カラーコードがすぐにわかる「ColorPick Eyedropper」、便利ですよね。
使い方は、とても簡単ですよ!
この記事でわかること
  • ColorPick Eyedropper とは?
  • ColorPick Eyedropper 公式サイトリンク
  • ColorPick Eyedropper の使い方について

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

ColorPick Eyedropper とは?

ColorPick Eyedropper とは?

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

ざっくりレビュー!

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

開発サイト

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

Chrome extension howto

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

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

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

Step1 howto

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

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

配信サイトからダウンロード

Opera

Chrome

iPhone

Android

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

Step2 howto

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

操作のポイント

ColorPick Eyedropper icon quote

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

コメント
ColorPick Eyedropper をつかうために、ツールバーのアイコンをクリックする必要があります。初回のインストール時に、拡張機能はONになっているのですが...もしアイコンにでてこない場合は、各種ブラウザの拡張機能設定をご確認ください。

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

Step3 howto

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

操作のポイント

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

ColorPick Eyedropper01

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

ColorPick Eyedropper02

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

ColorPick Eyedropper03

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

コメント
基本的には、マウスをうごかしたポイントの色がわかります。使い方はかんたんなので、むずかしく考えなくていいですよ。

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

拡張機能でわかるコード例
  • 16進数:#FFFFFF
  • RGB:rgb(255,255,255)
  • hsl:hsl(0,0%,100%)

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

まとめ

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

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

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

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

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

サウンドオルビス

3,757,207 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事