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

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

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

スポンサー

画面をクリックするだけでカラーコードが取得できる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の右上にあるスポイトに先ほど選択した部分の色が表示されます。

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

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

表示されたカラーコード

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

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

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

SIMカード

まだ高額な通信費を払ってるの?OCNモバイルONEの通信容量が4月から大幅アップでも月額972円

月額972円で1日110MB高速通信できる 格安SIMのOCNモバイルONEなんですけど2015年4月から通信容量がまた増量になるそうです。これまでは最低のプランで1日70MBまで高速通信が可能なんで …

Zenfone3 Laserのおすすめポイント紹介

格安スマホ・Zenfone3 Laserは本当におすすめ!9つの理由を挙げてみるよ

3万円という価格だけど大満足できるスマホ・Zenfone3 Laser こんにちは、Zenfone5が壊れたので新しいスマホに買い換えたmoriです。 今回新しく購入したスマホがこちら。 Zenfon …

no image

ぼくがブログを書く理由は死んだ後に全部消えてしまうのが悲しいから

人なんていつ死ぬか分からない。だから今書く 最近思うです。人間なんていつ死ぬか分からないなって。昨日まで元気だった人が次の日にはいなくなっているなんていくらでもあることじゃないですか。こういうぼくだっ …

Chromeでは緑の鍵マークが付く

エックスサーバーでSSLを申し込む手順

このブログをhttpsで接続できるようにしました。 WordPressで運営しているブログをhttps化する方法 | 人生は宇宙だ! このブログはエックスサーバーというレンタルサーバーを使っているので …

はがきデザインキット

激安で超簡単!「はがきデザインキット」を使えば部屋から一歩も出ずに年賀状が出せますよ

費用も手間もほとんどなし!「はがきデザインキット」がめちゃくちゃ便利 こんちには、年末が近づいてくると気になるのが年賀状。 ぼくは年賀状はとても苦手で面倒くさいなぁって思ってしまいます。そして誰にも出 …

moriのプロフィール

自炊の楽しさ伝えます!

自炊デリバリー

検索

カテゴリー

今日もいろいろつぶやきます

moriのほしいもの

noteもやってるよ

Instagramもよろしくね