人生は宇宙だ!

くらげのように漂い、いろんなものが混ざり合う。人生はまさに宇宙なのだ。

*

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

      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

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

  •   関連記事

    歩くまち京都
    これでもう迷わない!京都のバスが網羅する”歩くまち京都”が便利

    京都のバスはカオス 京都のバスに乗ったことがある人は分かると思うんですけど京都の …

    Googleマップ
    Googleマップのナビで高速や有料道路を使わないルートを表示する方法

    こんにちは、車のナビを遠い昔に使うのをやめたmoriです。 Googleマップっ …

    Googleマップ
    Googleマップのナビで地図が回らない場合の対処法

    原因は地図の固定 Googleマップは本当に便利で車で知らない場所に行くときには …

    Zenfone5
    Zenfone5で充電できない場合の対処方法

    Zenfone5が充電できない場合には再起動 ぼくは今年になってからZenfon …

    Google Nowの画面
    Google Nowからの興味ない通知をさせないようにする方法

    興味のない通知はGoogle Nowで拒否しよう 最近ぼくのスマホによくこんな通 …

    no image
    ブログはじめました

    カンボジアに関する情報を不定期に載せていきます。個人的なことが多くなってしまうと …

    スターバックスフリーWi-Fi
    Starbucks(スターバックス)でフリーWi-Fiを使う方法

    事前登録が必要です 日本でも最近フリーでWi-Fiが使える場所が増えてきてますね …

    カンボジアで買ったノート。1500リエル。
    自分の思いはすぐに書かないといけない

    大事な事はすぐに書き起こす! ぼくはこのブログに日々思った事を綴っていっています …

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

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

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

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