人生は宇宙だ!

カンボジア大好き!自炊大好き!そんな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

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

  •   関連記事

    書くことで不安がちょっとだけ減る。
    心が不安な時こそ書きまくれ!

    ぼくは心が不安な時ほど書く ぼくはなかなか精神的に不安定になることが多いんです。 …

    文字が光って暗い中でも入力しやすい
    Macのキーボードカバーを買う時には絶対にクリアタイプを買うべし

    光っている文字が読めない みなさんキーボードカバーは使ってますか?ゴミなんかがキ …

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

    詐欺なのがバレバレな偽・三菱東京UFJ銀行からのメール 三菱東京UFJ銀行からメ …

    セブンスイーツアンバサダー限定イベントでスマホ写真の撮り方を学んできたよ

    こんにちは、セブンスイーツアンバサダーのmoriです。 セブンイレブンのスイーツ …

    絶対に開いてはいけないメール
    【コンピュータウイルス対策】絶対に開かず破棄すべきメールまとめ

    こんにちは、moriです。 最近は友達との連絡にLINEなどを使うことが多いので …

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

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

    Wi-Fiのパスワードを調べる方法
    Wi-Fiのパスワードを忘れた時にMacで調べる方法

    スマホやタブレットを買い換えた時なんかに、これまで使っていたWi-Fiのパスワー …

    SIMカード
    メアドに固執&手薄い補償が不安なら格安SIMにしなくてもいいんじゃない

    無理して格安SIMを使う必要はない ぼくは今、格安SIMを格安スマホに差して使っ …

    カンボジアでKindleストアから本が購入できずに泣きかけた

    海外でも日本の本が手軽に読めるKindle最高 カンボジアでは日本の本を購入する …

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

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