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

4.5
この記事は約3分で読めます。

ColorZillaのサムネイル

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

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

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

 

ColorZillaを追加

 

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

 

ColorZillaをChromeに追加

 

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

 

ColorZilla追加完了

 

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

 

ColorZillaのメニュー

 

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

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

 

ColorZillaの使用例

 

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

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

機能一覧

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

  1. カラーピッカー
  2. CSSグラデーションジェネレーター
  3. 任意のサイトのカラーパレットを取得
  4. 選択した色をクリップボードに自動コピー
  5. キーボードショートカット

カラーピッカー

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

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

 

ColorZillaのColor Picker

 

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

 

ColorZillaのColor Pickerの画面

 

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

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

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

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

CSS Gradient Generator

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

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

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

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

Webpage Color Analyzer

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

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

 

Appleのカラーを抽出

 

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

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

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

Copy to Clipboard

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

Copy to Clipboardのスタイル

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

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

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

ColorZillaのオプション

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

 

ColorZillaのkeyboardショートカット

 

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

まとめ

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

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

ColorZillaColorZilla
提供元colorzilla.com
評価4.5 (2,627)
ユーザー数2,000,000+(人)
twitterhttp://twitter.com/colorzilla
ダウンロードこちらから
説明ブラウザ上の好きな箇所から色を抽出可能。
アプリ
スポンサー
関連記事
当サイトで掲載している画像の著作権・肖像権等は各権利所有者に帰属致します。権利を侵害する目的ではございません。記事の内容や掲載画像等に問題がございましたら、各権利所有者様本人が直接メールでご連絡下さい。確認後、対応させて頂きます。お問い合わせはこちらから。またまとめ記事など不適切な文言は随時修正しております。そのため、本スレッドと異なる部分が出てきますので予めご了承ください。
jupiter

みんなのコメント