人生は宇宙だ!

カンボジアと食べることが大好きなmoriの生き様を見せます。宇宙のような無限の人生を泥臭く生きろ!

*

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

      2017/02/11

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

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

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

    表示されたカラーコード

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

    • 0
    • 0
    • 0

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

  •   関連記事

    インターネットに繋がると空港のサイトが表示されます。
    プノンペン空港でフリーWi-Fiに繋げる方法

    プノンペン空港でフリーWi-Fiを使う方法 こんにちは、カンボジア好きのmori …

    琵琶湖岸の公園。
    ブログが書けない時には屋外で書いてみるのをおすすめします

    ブログが書けないなら場所を変えよう こんにちは、moriです。 ぼくはこのブログ …

    カンボジアでも人気のLINE
    相手に場所を伝えたい!LINEで場所を知らせる方法

    友人達と外で待ち合わせする時など自分の場所や待ち合わせしたい場所を伝えたい。でも …

    MacでWindowsのDeleteキーと同じことをする方法

    shift + delete Windowsを使っている人はカーソルより前の文字 …

    削除したいものを選択
    Chromeで入力候補を簡単に削除する方法

    fn + shift + deleteで候補を削除できます フォームの入力などで …

    docomoにメールが送れない
    ガラケーの人との連絡先交換。メールアドレスだけじゃなくて電話番号も絶対に確認すべし

    フリーメールアドレスからのメールがdocomoに拒否された 先日連絡先を交換した …

    ブログで誰かを元気にしたい
    世界のどこかにいる誰かを元気にできたらいいな。これがぼくがブログを続ける理由

    ブログは誰かを元気にできるツールなんだ こんにちは、滋賀のブロガー・moriです …

    使ってみようをタップ
    自分のスマホをもっと便利に使わない?Google Nowの始め方

    Google Nowを使うとなにが良いのか? Googleの提供しているGoog …

    ブログに反応がなくても落ち込むな
    「ブログを頑張って書いたのにコメントがない」と落ち込むあなたに贈る言葉

    反応がなくても誰かの心には響いているんだよ ブログを長く書いていると、他のブロガ …

    Wi-Fiが使えないのは電子レンジが原因
    Wi-Fiが切れる原因は電子レンジが原因かも。5GHz対応のルーターを使うと大丈夫!

    Wi-Fiが切れてしまう原因は電子レンジだった 自宅で利用しているWi-Fiが時 …