気になるあの色を抽出！Chrome拡張機能【ColorZilla】

ブラウザを楽しんでいる時にこの作品のこの箇所の色良いな〜って思った時にその色のカラーコードがわかったら便利ですよね。今回はそんな希望を実現するChrome拡張機能”ColorZilla”を紹介します。

まずはインストールしましょう！

GoogleChromeでColorZillaのページへ移動します。

Chromeに追加ボタンをクリックしましょう。

ポップアップが表示されるので、拡張機能追加ボタンを押します。

追加できました。するとアドレスバーの横にスポイトアイコンが表示されます。

スポイトアイコンをクリックしましょう。プルダウンでメニューが表示されます。

Pick Color from pageをクリックして抽出したい色の上に持っていきクリックします。

ハートの色を抽出できました。一番右側に要素も表示されているので確認に便利です。

因みにFlashや動的なホバー要素の色も取得可能です。以上が基本的な使い方です。

機能一覧

そのほかにも沢山の機能があるので紹介します。

カラーピッカー

パレットから好きな色を抽出することができる機能です。

メニューの上から2番目、ColorPickerをクリックします。

RGBとカラーコードどちらでもコピーすることができます。

最近選んだ色の色履歴も確認して、選択もできます。

CSSグラデーションジェネレーター

任意のグラデーションをブラウザ上で作成してCSSも自動で生成される機能です。

メニューの上から8番目、CSS Gradient Generatorをクリックします。

左上のプリセットから好きなスタイルを選んで、左下のバーで調整します。

右上のプレビューでチェックして、右下の生成されたCSSをコピーして使用します。

任意のサイトのカラーパレットを取得

現在表示されている画面のカラーを一発でまるごと抽出できる機能です。

メニューの上から6番目、Webpage Color Analyzer をクリックします。

Appleの画面の色を抽出したいと思います。

こんな感じで一気にカラーを抽出しています。これはとてもすごい機能です。

選択した色をクリップボードにコピー

5つのカラーコードスタイルからコピーできる機能です。

メニューの上から3番目、Copy to Clipboardをクリックします。

5つのスタイルから選択すればコピーされます。

キーボードショートカット

任意のコマンドでスポイトを呼び出せる機能です。

メニューの一番下、optionsをクリックします。下層部のキーボードショートカットをEnableに変更して、お好きなショートカットコマンドを入力すれば使用可能です。

いちいち右上の拡張機能をクリックしなくて済むのでそこそこ便利です。

まとめ

以上がColorZillaの説明でした。Chromeに追加しておくと、好きな色を好きなタイミングで抽出できるのでとても便利です。

無料なので是非インストールして使ってみてください。

	ColorZilla
提供元	colorzilla.com
評価	4.5 (2,627)
ユーザー数	2,000,000+(人)
twitter	http://twitter.com/colorzilla
ダウンロード	こちらから
説明	ブラウザ上の好きな箇所から色を抽出可能。