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

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

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

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

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

表示されたカラーコード

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

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

執筆者:

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

Image Shrink Lite

スマホで撮った写真をガラケにそのまま送ってませんか?画像縮小アプリImage Shrink Liteの使い方

スマホの写真は大きすぎる スマホユーザーのみなさん。写真をメールで送る時に何も考えずに写真を添付して送ってませんか?相手がスマホやパソコンの場合は全然OKですが、相手がガラケ(昔ながらの携帯電話)の場 …

インフォメーションカウンター

上海浦東国際空港でフリーWi-Fiを使う方法

こんにちは、ひんぱんに上海浦東国際空港でトランジットをするmoriです。 今回は上海浦東国際空港でフリーWi-Fiを使う方法について紹介します。 最初におことわりしておきますが、今回紹介するのはラウン …

no image

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

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

10kgまでの重さに耐えられるのでパソコンを使って仕事もできますよね。

パソコンを使う人の常識。パソコンを使う時には飲み物はうしろに置け

こぼれて困る物は前に置かない パソコンを使いながら飲み物を飲むっていう人って多いですよね。ぼくもパソコンを使う時にはいつも何か飲み物を机の上に置いてます。こんな時に注意しないといけないのは飲み物の位置 …

メニューバーが表示されなくなった050plus

Zenfone5の050plusでメニュー画面を出すには四角ボタンを長押しすべし

半年近く悩んでいた問題がやっと解決 以前使っていたNexus5を洗濯してしまって今はZenfone5を使っているんですけど、050plusっていうアプリのメニュー画面が表示できなくなるという問題をずっ …

moriはこんな人

カンボジアが自炊が大好き。不安定で次に何が起こるか分からない状態を楽しんでいます。好きな言葉は「安定なんてクソくらい」
詳しいプロフィールはこちらから

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