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

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

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

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

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

表示されたカラーコード

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

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

執筆者:

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

no image

ネットにいろいろ晒すのに理由はありません

ネットに病気のことを書いてるのに理由はありません ここ1、2ヶ月間に数名の方からこういう事を言われたんですよ。 “ネット上に病気のことを書くなんて勇気がいることだね” こういう …

SIMカード

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

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

三菱東京UFJ銀行を語る者から詐欺メールが届いたので注意点をまとめました

詐欺なのがバレバレな偽・三菱東京UFJ銀行からのメール 三菱東京UFJ銀行からメールが来ました。いや正しくは三菱東京UFJ銀行を名乗る人からのメールっていった方が正しいですね。最近流行のフィッシング詐 …

ポジティブの連鎖反応

ポジティブなことを書くとテンション上がるわ!その理由はポジティブ連鎖反応が起きてハイテンションになるから

ポジティブな感情は楽しいアイデアを次々と湧き出させる こんにちは。昔は超ネガティブ人間だったmoriです。 今はずいぶんとポジティブな人間になったと自負しています。少し前、3年振りに友人と会う機会があ …

アダプタの重さでしっかりとささらない

Mac使いが延長コードを携帯した方がいい理由

ACアダプタが重くて充電できないことがある Macを使っている人にちょっとした情報を。 Macを外出先で充電する時には延長コードを携帯すべし ぼくは外出先でMacを充電することが結構あるんですが、イラ …

moriはこんな人

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

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