デジタルライフ ブログ運営

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

投稿日:2016年6月18日 更新日:

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の右上にあるスポイトに先ほど選択した部分の色が表示されます。

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

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

表示されたカラーコード

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

-デジタルライフ, ブログ運営
-,

執筆者:

「デジタルライフ」のオススメ

カンボジアでは電話2台持ちはもはや常識。

元日にスマホ水没

とほほな正月ですよ やってしまいました… スマホを気づかずに洗濯してしまいました。洗濯しているのに気づいたのは洗濯機を回し始めてから5分ほど経ったあとだったんですけど、もう洗濯槽には水がい …

no image

スマホが使えなくなって約1週間。なんだかんだで不便です

なんだかんだで不便です あの悪夢のような日からもうすぐ1週間が経とうとしています。まさか正月早々スマホを洗濯機に入れて壊してしまうなんて予想すらしていませんでした。 元日にスマホ水没 あれからずっとス …

Zenfone5

やっとスマホを買いました。Zenfone5良いですよ!

この価格でこの機能は十分ですね 正月にスマホを洗濯してからずっとスマホなし生活をしてきたわけですが、ようやくスマホを買うことができました。今回購入したのはASUSのZenfone5。いわゆる格安スマホ …

SIMカード

月額1,000円でスマホが使えるよ。格安SIMのメリットとデメリット

ぼくは現在、格安SIM(OCNモバイルONE)を使っています。 月の通信費は約1,000円です。 私のスマホ代・・・高すぎ!?月額972円(税込)からLTE高速通信が使える「OCN モバイル ONE」 …

Qi(チー)

これは便利!ケーブルなしでスマホを充電できるQi対応充電器

置くだけ簡単充電 最近スマホを新しくしたんですがそれに合わせてQi対応充電器というのも導入してみました。いやぁ〜これ便利ですよ。置くだけで充電できるんです。これまではケーブルを差して充電してたんですが …

moriはこんな人

カンボジアと食べることが大好き。安定した生活よりも何が起きるか分からない生活を楽しんでいます。
詳しいプロフィールはこちらから

自炊デリバリー
moriのほしいものリスト
moriのnote