web

カラーコードがズバリ知りたい時に重宝するColorPick Eyedropper

カラーコードがズバリ知りたい時に重宝するColorPick Eyedropper

WoredPressのサイト運営をしていてよく手間取るのが、見ているページの色使いが素晴らしいなと思って自分も使いたいと思った時、カラーコードがわからなくてよく困るものです。

カラーコードを調べる

Webページに使われている色ってそれぞれにカラーコードという番号が割り当てられています。「カラーコード」でどんなものって検索すれば、簡単にカラーコード表などを掲載し紹介しているページにたどり着きます。

WEB色見本 原色大辞典 – HTML Color Names

 

カラーコード自体はそもそも決まっているので、そのような情報はどこのページを見てもそんなに変わりはないのですが、自分が今見ている色はいったいなんていうカラーコードなのかを知りたい時があります。

はじめはそのいい方法を知らなくて、「大体こんな感じかなー」といった予測でカラーコードをコピーしては自分のサイトにあてはめていくという時間のかかる作業を繰り返してきたものです。

今回そんな苦労をしなくて済むためにとても便利な方法をお伝えします。

同様な問題に対処するためにはたくさんの方法があると思いますが、私はGoogle Chromeユーザーなのでピッタリな機能を使いました。

それはChrome拡張機能です。

Webブラウザーであるには拡張機能という、その名の通り機能を追加する方法があります。

 

ちょっとしたアプリのような感じで使えてしまいます。

「ColorPick Eyedropper」

それはというと、「ColorPick Eyedropper」いうものです。 ➡ Chrome拡張機能を見る

あなたがすでにパソコンでChromeでブラウザーを開いているのなら次の画面で「+無料」というところを選択するだけでインストールされます。

キャプチャ

先のリンクから拡張機能は手に入りますが、Chromeウェブストアにアクセス➡「ColorPick Eyedropper」で検索をしてもインストール可能です。

拡張機能がインストールされたChromeブラウザーには、つぎのようなカラフルなアイコンが表示されます。

中央のアイコンです

キャプチャ

実際に気になるページのカラーコードを見るのには、アイコンをクリックして起動され調べたい色のあるところへマウスオーバー(マウスをかざす)すれば確認できます。

次の画面ではYahoo Japanのロゴのカラーコードを見てみました。

キャプチャ

ボックスの中でカラーコード「#FF0033」が表示されているのがわかりますでしょうか!?

感覚的に使いやすく難しいことが一切ないので、かなりおススメの機能です。

それから、この機能だけでも私には十分ですが、さらにこの細かく色を調べる機能も搭載されています。

先ほどの画面の状態から、もう一度アイコンを押すともっと詳細に色を見ていけます。

次の画面んでマウスを中心あたりにもっていき、左クリックをしたまま話さず移動させると自由自在に座標をずらしながら色をピンポイントで調べられます。

ピクセル単位で調べれるので細かいテキストや、写真などの背景などでもある程度は調べられそうですね。

キャプチャいかがでしょうか、今回お伝えしたカラーコードが調べられる「ColorPick Eyedropper」。

自分のお手本としたいページからカラーコードを調べることで、一からコンテンツを作る際の参考にもなり意外と使う機会はあるものです。

今回の記事が参考になりましたら幸いです。

LEAVE A REPLY

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)