EyeDropper

ウェブページに使われている画像の色(カラーコード)を調べる方法

画面をクリックするだけでカラーコードが取得できるEye Dropper

以前、このブログで導入しているカエレバのボタンをカスタマイズしようとしたことがありました。その時にボタンの色をAmazonだったらオレンジに、楽天だったら赤にしようと思ったんですよ。こんな感じにしようとしたわけです。

ボタンの色はAmazonだったらAmazonで使われているのと同じ色にしたいじゃないですか。オレンジだからって言って色味の違うオレンジになるのも嫌だし、しっかりと調べたいって思ったんですね。

そのためには実際にAmazonのサイトを見て、実際に使われている画像などを元にカラーコードを調べないといけません。どうしたらいいのか?

ぱっと思い浮かんだ方法は、Amazonに使われているロゴをダウンロードして、その画像をPhotoshopで開く。そしてPhotoshopのスポイトツールでカラーコードを取得することだったんです。

でも面倒くさい。

何か良い方法がないかと思って調べたところとっても簡単な方法が見つかったので紹介します。この方法だとウェブサイトを画面に表示して、すぐにカラーコードを取得することができるのでめちゃくちゃ簡単です。

これを実現するために使用したのが、Chromeの拡張機能である”Eye Dropper”です。

それでは実際にChromeにEye Dropperを追加して、サイトに表示された画像のカラーコードを取得する方法を説明していきます。

Chromeの拡張機能としてEye Dropperを追加する

まずChromeウェブストアのEye Dropperのページを表示します。

“CHROMEに追加”をクリック。

CHROMEに追加をクリック

確認画面が表示されるので”拡張機能を追加”をクリック。

拡張機能を追加をクリック

追加に成功するとこのような画面が表示されます。

EyeDropperのインストール完了

そしてChromeの右上にはスポイトのアイコンが表示されるようになります。これで拡張機能の追加は完了。

スポイトのアイコンをクリック

サイトに使われているカラーコードを取得してみる

それでは実際にサイトに使われている画像のカラーコードを取得してみます。これはこのブログのトップに表示している画像なんですが、この茶色い部分のカラーコードを取得してみます。

ウェブページ上のカラーコードを知りたい

Chromeの右上にあるスポイトのアイコンをクリックするとこのような画面が表示されます。ここで”Pick color from web page”をクリックします。

Pick color from web pageをクリック

画面上に四角いものが現れます。この四角はマウスの動きに合わせて動くので、マウスを動かして色を調べたい場所までマウスを持っていってクリックします。

取得したい色の部分にマウスを持っていってクリックする

Chromeの右上にあるスポイトに先ほど選択した部分の色が表示されます。

スポイトのアイコンに色が表示される

スポイトのアイコンをクリックするとこのような画面が表示されます。ここに選択した場所のカラーコードが表示されます。

表示されたカラーコード

これで手軽にウェブサイトの色を調べることができますね。