Firefoxユーザーなら、そんなときでもCSSを参照したりサードパーティツールを使う必要もなく、アドオンだけでサイト各部のカラーをピックアップすることができます。
こうした機能を持つアドオンの中で有名なのが「ColorZilla」ですが、今回はもう一歩踏み込んだ色の分析ができるアドオン「Rainbow」というものを試してみましたのでご紹介します。
「Rainbow」は、Firefoxで表示しているウェブページ各部の色をピックアップしたり、サイトに含まれている基本カラーを分析したりすることができるというアドオンです。
アドオンをインストールすると、ステータスバーに専用のアイコン が追加されます。
デフォルト設定では、このアイコンをクリックすることによりページカラーピッカーが起動し、ページ内でマウスオーバーされた部位の色を抽出し、カラーコード(Hex)を示してくれるようになります。
ページ上の任意の位置でクリックすることによりピックアップが確定され、表示部にマウスを持って行くことにより、[コピー]と[ブックマーク]ができるようになっています。
*虫眼鏡マークで確定を解除し、ピックアップに戻ります。
*[×]ボタンでピッカーを終了します。
ここで[コピー]ボタンをクリックするとカラーコードをクリップボードにコピーします。
[ブックマーク]ボタンをクリックすることでそのサイトのURL+カラーコードをリスト形式で保存することができるようになっています。
ブックマーク時にはタグも加えることができますので、後から検索するような時に役立ちます。
このブックマーク機能により、サイト固有の色をまとめて後から活用することができるようになるというのが大きな特徴です。
また、ステータスバーアイコンを右クリックすることにより、以下の機能が利用できます。
■Inspector:上述のカラーピッカーです。
■Picker:以下のようなカラーピッカーを単独起動させることができます。
このウィンドウ内の[□]ボタンをクリックすれば、ウェブページ上の要素の色をピックアップすることができるほか、[+]ボタンをクリックしてページ上の任意の位置をクリックすればその色を示すことができ、ページ上の似た色などを探すときに便利です。
このウィンドウ内でピックアップした色も同様にコピーやブックマークが可能です。
■Library
ブックマークしたカラーリストを表示します。
それぞれの項目を右クリックすれば、編集・カラーピッカーで表示・URLを開く・複数形式でコピーなどが可能です。
■Website Analyzer
アクティブぺページの代表的な色(デフォルトでは6色)を抽出して表示します。
抽出後、各色にマウスオーバーすることにより、コピー、ブックマークが可能です。
オプションでは、色情報の表示スタイルやコピースタイルをHex(#ffffffのようなもの)やhls、RGBなどから選択できるほか、コンテキストメニューへのメニュー表示、ステータスバーボタンクリック時の機能選択、Inspector利用時の表示情報、Analyzer利用時の色抽出数などを設定することができます。
このように、ページ各部の色を様々な方法で抽出し、それをブックマークという形式で保存して再利用することができるという便利なアドオンとなっています。
単にカラーコードを知るだけでは満足できない方や、サイト管理者、デベロッパーの方に重宝しそうなアドオンですね。
ダウンロード:Rainbow(Add-ons for Firefox)
<関連記事>
■WEBページのカラーを取得する「ColorZilla」
■表示しているページのカラーパレットを保存してドローソフトで利用できるFirefoxアドオン「Palette Grabber」
■Firefoxで表示している画像からカラースキームを生成できるアドオン「ColorSuckr」