企画・デザイン

ブラウザ上に表示されている要素の色情報を取得できる「ColorZilla」

投稿日:2019年4月5日

ドキュメントやホームページを作成する際に、色使いが上手なWebサイトを参考にしている方も多いかと思います。とはいえ、実際にどのカラーコードを使用しているかを探すのは一苦労でもあります。そこで今回はブラウザ上に表示されている要素の色情報を取得できる「ColorZilla」をご紹介します。GoogleのChromeブラウザの拡張アプリで、簡単にサイト上のカラーコードを採取することができるサービスです。

このアプリで仕事が効率化できる理由

  • Chromeの拡張アプリとして使用することができる
  • サイト上のカラーコードを簡単に採取することができる
  • サイトで使用されている配色パターンを取得することができる

使い方

インストールと設定

サイトのアクセスして「ColorZilla」を有効化します。有効化するには「Chromeに追加」をクリックします。

確認画面が表示されますので、「拡張機能を追加」をクリックします。

有効化が完了すると、完了画面が表示されます。

Chromeのツールバーに以下のようなアイコンが表示されています。

アプリの設定を行うには、ツールバーのアイコンをクリックして「Options」をクリックします。

設定画面が表示されます。

「Eyedropper」ではスポイトの設定を行います。「Outline hovered elements.」にチェックを入れることでマウスカーソルを当てた箇所の色を採取することができます。

「Change cursor to crosshair.」にチェックを入れることでマウスカーソルの形式を十字の形に変更することができます。

「Auto-copy」にチェックを入れることでカラーコードをクリップボードに貼り付けることができます。

カラーコードのフォーマットはドロップリストの中から任意のものを選択することができます。

「Color Format」にチェックを入れることで、カラーコードの表記を小文字にすることができます。

「Keyboard Shortcuts」にチェックを入れることで、キーボードショートカットを有効にすることができます。

Webサイトからカラーコードを採取する

Webサイトからカラーコードを採取するにはアイコンを選択して、「Pick Color From Page」をクリックすることでクリップボードにコピーされます。

Webサイトの配色パターンを取得する

Webサイトの配色パターンを取得するには、アイコンをクリックして「WebPage Color Analyzer」をクリックします。

配色パターンの解析が行われます。

解析が完了するとカラーコードが表示されます。

CSSのグラデーションコードを取得する

「ColorZilla」にはCSSでグラデーションを表現するためのツールもあります。アイコンから「CSS Gradient Generator」をクリックします。

グラデーションのエディター画面が表示されます。

カラーパレットから任意の配色を選択すると、右側にCSSのコードが表示されます。

特徴

類似のブラウザからカラーコードを採取するツールとして「Color Picker」があります。「ColorZilla」と同様にChromeの拡張アドオンとなりますが、こちらはカーソルを合わせた箇所が虫眼鏡で拡大されますので細かな部分のカラーコードを採取するには便利です。一方、Webサイトの配色パターンを取得するような機能は「ColorZilla」にしかありませんので、状況に応じて使い分けると良いでしょう。

サイト情報

URL:https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

ColorZillaの評判(口コミ)

平均:  
 1 件
by Jaまー on ColorZilla
Webデザインには最強のツールです

私はWeb関連の仕事をしていますが、バナーの作成や他のサイトの色味を参考にする際にも重宝しています。
Chrome拡張なのでインストール不要でブラウザから簡単に作業できることもポイントが高いです!

口コミを書く
1
2
3
4
5
送信
     
キャンセル

口コミを書く

-企画・デザイン
-, ,

Copyright© WebCli , 2019 All Rights Reserved.