第十五回　chromeで色情報を取得できる「Color Picker」

web制作をしていると、デザインや配色を参考にしているページの色情報を調べたりします。
そんな時は、プリントスクリーン等をしてphotoshopやfireworks等の画像処理ソフトにおいて調べたりしています。
この作業が結構面倒なのでブラウザ上で簡単に色情報を調べる事が出来たら、少ない作業ですむようになるなと思って調べてみたら「Color Picker」というアドオンをみつけました。
「Color Picker」のアドオンボタンを押すだけで簡単に色情報を取得できるようになります。

アドオンの導入方法は、第一回の記事でご確認ください。
「第一回　便利なchromeのアドオン(拡張機能)をご紹介する前に」

Color Pickerをインストール

chrome web storeよりColor Pickerをインストールしてください。
こちらからインストールできます。

Color Pickerの使用方法

色情報を知りたいホームページを開きます。
ホームページを開いたら、右上のColor Pickerのアイコンをクリックします。

ピッカーの画面がピッカーの画面が開くので、下の十字を選択します。

画面上に十字と色を表示した四角いボックスが表示されるので、右上の拡大画面をみながら欲しい色のポイントをクリックします。

右側に色情報が表示されるので、コピーして画像編集ソフトで色情報を入力して使用します。

色情報を取り終わった後

色情報をピッカーで撮り終わった後は、ページを最更新する事で通常の状態に戻ります。
更新しなければ、何度でもピッカーで色を取得する事が可能です。

ピッカーで色情報を取得できないページ

ピッカーで色情報を取得できないページもあります。
取得出来ない場合は、右上のボックスに以下の画像のような画面が表示されます。

メニュー

右上のColor Pickerのアイコンが表示された時に下の所に出るアイコンは

1.ピッカーで色情報を取り直す
2.サイトの更新
3.設定
4.別ウィンドウで表示
となっています。

まとめ

ホームページに限らずデザインをしていると、色情報を参考にする事はよくあります。
ホームページ制作時に参考にしたいホームページの配色を調べる時にこのアドオンはとても役に立つので一度試してみてはいかがでしょうか？