By U Zensen.

欲しいものはプログラミングで自分で作る。

PhotoshopかFirefoxを使ってディスプレイに映っている色を取得する方法!!

2015 / 7 / 12
ツール
1437921769203642-compressor

はじめに!!

webサイトを作成していたり、ブラウザを閲覧しているときに「あ、この色を使いたい!」てなるときはありませんか?そういう色を見つけたときにカラーコード(#FFFFFみたいなやつ)をいじって似ている色を探すのは大変だし、なかなか思った通りの色を再現するのは難しいと思います。そんな時にはディスプレイ上の色をスポイトで取得してしまいましょう。その方法を二つ紹介したいと思います。

*1

ディスプレイをスポイトする二つの方法!!

今回紹介するディスプレイから色を取得する方法は以下の二通りです。

Photoshopを持っているのであれば、Photoshopを使った方法の方が簡単だと思います。

Photoshopでスポイトする!

まずはPhotoshopでディスプレイ上の色を取得する方法です。Photoshopとは名前の通り写真編集をする為の画像編集ソフトです。とても高価なソフトですが、写真編集だけではなく絵を書いたりデザインなどに使用できる汎用性の高いソフトなので、webサイトを作っている方なら持っている方も多いのではないでしょうか?

方法はとても簡単です。まずはPhotoshopを立ち上げます。

20150712_1-compressor

以上の画像のように色を取りたいので、まずはスポイトを選択します。そしてPhotoshop側で適当に新規作成した画像のところ(スポイトが上記画像のように使用できるところ)で左クリックをしてマウスのポインタをスポイトモードにします。

20150712_2-compressor

そしたら上記画像の順番通り、①左クリックを押したままPhotoshopからマウスポイントを外して②ほしい色のところまでマウスを持っていって右クリックを解除します。そうすると③Photoshop上のパレットの色が変わります。あとはその色をパレットで見ればその色のカラーコードが分かるので、webサイトに使う際は便利です。

※ このときPhotoshopからマウスが出るとマウスカーソルはスポイトモードから普通の矢印に戻ってしまうと思いますが、それで問題ありません。それでできます。

20150712_4-compressor

ちなみにこんな感じです。このサイトの軸となっている色は「#6e93f」ですね。

20150712_3-compressor

上記画像でも言っているように、これはブラウザ上でなくとも色を取得することができます。とにかくモニターに表示されている色をそのまま取って来れるようですね。

しかし、私はデュアルディスプレイで作業をしているのですが、二つ目のモニターの方(本体に接続しているサブモニター)の色は取得できませんでした。取得したい色を本体のモニターに映せば取得できたので問題はありませんが、作業環境によっては少しできないところもあるかもしれません。

Firefoxでスポイトする!

これはPhotoshopを持っていない方向けです。無料でできますが、Photoshopの方よりは少し使い勝手は悪いかもしれません。

まずはFirefoxというブラウザを使いたいので持っていない方はダウンロードしてきてください。こちらからダウンロードできると思います。ダウンロードは公式サイトの指示通りやればできると思うので割愛します。

なぜFirefoxというブラウザを使うのかといいますと、Firefoxには「アドオン」というものがあり、Firefoxブラウザにどんどん機能を追加することができます。そのアドオンの一つに「ColorZilla」というスポイト機能があるのでこれを使いたいのです。ChromeにもFirefoxの「アドオン」のような「拡張機能」というものがありますが、スポイト的な機能があるのかは把握していません。申し訳ありません。

ということで、Firefoxがダウンロードできたら開きます。そして、

Firefox ColorZilla

で検索して出てきた一番上の検索結果をクリックします。というかこちらです。

20150712_5

上記のURLにアクセスし①「+ Add to Firefox」をクリックし、②「今すぐインストール」をクリックしてインストールを開始します。そうすると、「今すぐ再起動する」というダイアログが表示されると思うので、今すぐ再起動を行います。今すぐでなくてもFirefoxを一回閉じて次に開いたときにはアドオンの追加が完了しているはずです。

アドオンが追加されているかを確認する為には「ツール > アドオン」で以下の画面が表示されるので、枠内の「ColorZilla」が表示されていれば大丈夫です。追加されたアドオンの機能を使う為には右側の欄が「無効化」になっていることを確認します。「無効化」になっているということは今は「有効」ということです。

20150712_6

使用できる用になっていることを確認したら早速使ってみます。「ツール > ColorZilla > スポイト」をクリックすると、下記画面の上部のようにブラウザの上にマウスポインタがある箇所の色が表示されます。そして取得したい色のところで左クリックをすると下記画面の下部のようにチェックマークとカラーコードが表示されます。

20150712_7

このチェックマークが出たところのカラーコードがコピーされているので、好きなところに貼り付けができます。

20150712_8

しかし、Firefoxの「ColorZilla」はPhotoshopとは違い、ブラウザ上に表示されている色しか取得できないので、取得したい色があればブラウザで表示する必要があります。もしローカルにある画像かなにかの色が欲しい場合はその画像をブラウザで表示させれば良いので、一応どんな色であっても取得することはできますが少し面倒ですよね。

まとめ!!

Photoshopがあればモニター上に表示されている色を簡単に取得できます!PhotoshopがなくてもFirefoxを使えば無料でブラウザ上にある色を取得できます!

Pocket

コメント

コメントを残す