Top Firefox拡張機能(アドオン) >ウェブページの色を抽出・分析できるFirefoxアドオン「Rainbow」
2010年03月24日

ウェブページの色を抽出・分析できるFirefoxアドオン「Rainbow」

ウェブデザイナーの方や、サイト管理者なら、ウェブページ各部の色を知りたいときがあると思います。

Firefoxユーザーなら、そんなときでもCSSを参照したりサードパーティツールを使う必要もなく、アドオンだけでサイト各部のカラーをピックアップすることができます。

こうした機能を持つアドオンの中で有名なのが「ColorZilla」ですが、今回はもう一歩踏み込んだ色の分析ができるアドオン「Rainbow」というものを試してみましたのでご紹介します。

「Rainbow」は、Firefoxで表示しているウェブページ各部の色をピックアップしたり、サイトに含まれている基本カラーを分析したりすることができるというアドオンです。

アドオンをインストールすると、ステータスバーに専用のアイコン 01_Rainbow_Firefox_Add-ons.JPG が追加されます。

デフォルト設定では、このアイコンをクリックすることによりページカラーピッカーが起動し、ページ内でマウスオーバーされた部位の色を抽出し、カラーコード(Hex)を示してくれるようになります。


02_Rainbow_Firefox_Add-ons.JPG


ページ上の任意の位置でクリックすることによりピックアップが確定され、表示部にマウスを持って行くことにより、[コピー]と[ブックマーク]ができるようになっています。


03_Rainbow_Firefox_Add-ons.JPG


*虫眼鏡マークで確定を解除し、ピックアップに戻ります。
*[×]ボタンでピッカーを終了します。

ここで[コピー]ボタンをクリックするとカラーコードをクリップボードにコピーします。

[ブックマーク]ボタンをクリックすることでそのサイトのURL+カラーコードをリスト形式で保存することができるようになっています。


04_Rainbow_Firefox_Add-ons.JPG


ブックマーク時にはタグも加えることができますので、後から検索するような時に役立ちます。

このブックマーク機能により、サイト固有の色をまとめて後から活用することができるようになるというのが大きな特徴です。

また、ステータスバーアイコンを右クリックすることにより、以下の機能が利用できます。


05_Rainbow_Firefox_Add-ons.JPG


■Inspector:上述のカラーピッカーです。

■Picker:以下のようなカラーピッカーを単独起動させることができます。


06_Rainbow_Firefox_Add-ons.JPG


このウィンドウ内の[□]ボタンをクリックすれば、ウェブページ上の要素の色をピックアップすることができるほか、[+]ボタンをクリックしてページ上の任意の位置をクリックすればその色を示すことができ、ページ上の似た色などを探すときに便利です。

このウィンドウ内でピックアップした色も同様にコピーやブックマークが可能です。

■Library

ブックマークしたカラーリストを表示します。


07__Rainbow_Firefox_Add-ons.JPG


それぞれの項目を右クリックすれば、編集・カラーピッカーで表示・URLを開く・複数形式でコピーなどが可能です。

■Website Analyzer

アクティブぺページの代表的な色(デフォルトでは6色)を抽出して表示します。


08_Rainbow_Firefox_Add-ons.JPG


抽出後、各色にマウスオーバーすることにより、コピー、ブックマークが可能です。


09_Rainbow_Firefox_Add-ons.JPG


オプションでは、色情報の表示スタイルやコピースタイルをHex(#ffffffのようなもの)やhls、RGBなどから選択できるほか、コンテキストメニューへのメニュー表示、ステータスバーボタンクリック時の機能選択、Inspector利用時の表示情報、Analyzer利用時の色抽出数などを設定することができます。


10_Rainbow_Firefox_Add-ons.JPG


このように、ページ各部の色を様々な方法で抽出し、それをブックマークという形式で保存して再利用することができるという便利なアドオンとなっています。

単にカラーコードを知るだけでは満足できない方や、サイト管理者、デベロッパーの方に重宝しそうなアドオンですね。


ダウンロード:Rainbow(Add-ons for Firefox)


<関連記事>


■WEBページのカラーを取得する「ColorZilla」

■表示しているページのカラーパレットを保存してドローソフトで利用できるFirefoxアドオン「Palette Grabber」

■Firefoxで表示している画像からカラースキームを生成できるアドオン「ColorSuckr」



この記事をはてなブックマークに登録 follow us in feedly このエントリを del.icio.us に登録 この記事をクリップ!Yahoo!ブックマークに登録
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック