デザイナーや開発者向けのツール"ColorZilla"とは？
ColorZillaは、ウェブデザイナーや開発者向けの便利なツールで、Chromeを使用していればウェブページ上の色情報を取得したり、カラーピッカーを使用して色を選択できるツールです。
何ができるのか？
1.カラーピッカー
カラーピッカーは、ウェブページ上のどの色でもクリックして、その色のコードを取得できる機能です。
カラーピッカーを起動するには、ChromeのツールバーにあるColorZillaのアイコンをクリックし、「カラーピッカー」を選択します。
ウェブページ上の色をクリックすると、その色の情報（HEX、RGB、HSLなど）が表示されます。
2.カラーヒストリー
カラーピッカーで選択した過去の色情報を保存し、後でアクセスできるようにする機能です。
カラーヒストリーにアクセスするには、カラーピッカーを開いた後、歯車アイコンをクリックして「カラーヒストリー」を選択します。
ここには最近選択した色のリストが表示され、再度利用する際に便利です。
3.グラディエントジェネレータ
ColorZillaは、グラデーション（色の変化）を生成するためのツールも提供しています。ウェブページ上でのスムーズな色の遷移を作成するために利用できます。
このツールを使用するには、カラーピッカーを開いた後、歯車アイコンをクリックして「グラディエントジェネレータ」を選択します。
異なる色やステップ数を設定して、カスタムのグラディエントを生成できます。
グラデーションを使いたいときは、CSSをコピーして貼り付けるだけでグラデーションを使用することができます。
4.Webページ上の色情報の表示
ウェブページ上で特定の色をポイントすると、その色の情報（HEX、RGB、HSL、カラーネームなど）が表示されます。
カラーピッカーを開いていなくても、カラーピッカーのアイコンをウェブページ上でドラッグして使用することができます。
5.カラーパレット
カラーパレット機能を使用して、カスタムのカラーパレットを作成して保存できます。
デザインプロジェクトで使用する色を統一し、一貫性のあるデザインを保つのに役立ちます。
webページの画像の任意の場所の色も取得することができます。
インストールするだけで余計な初期設定や難しい操作もないので、Chromeを使っている人はこの拡張機能をインストールしていても良いかもしれませんね。
Chromeにインストールする方法
Chromeに追加を押すことで、インストールが開始されます。
以下の画面になればインストールは完了で、ColorZillaの機能を使うことができます。
Chrome用とFirefox用があります
firefox用も同じように拡張機能からインストールして使うことができます。
若干差分はありますが、同等の機能を有しているので基本的には使い方が大きく変わったりすることはありません。
ソフトウェア情報
Google Chrome版
[ 無償/有償 ] 無償
[ バージョン ] 3.4
[ 最終更新日 ] 2023/7/26
[ サイズ ] 292 KB
[ 対応OS ] Windows10(私物のPCで確認)
Firefox版
[ 無償/有償 ] 無償
[ バージョン ] 3.3
[ 最終更新日 ] 2017/2/21
[ サイズ ] 264 KB
[ 対応OS ] Windows10(私物のPCで確認)
※2023/8/31時点
似た拡張機能 (おすすめ)
Palette Creator
特徴
「Palette Creator」は、Google Chromeの拡張機能の一つです。
この拡張機能を使用することで、画像内に含まれる色を迅速に抽出し、それらの色をカラーパレットとして表示することが可能です。
抽出できる色のバリエーションは、最小で4色から最大で256色までの幅広い範囲となっています。
このカラーパレットには、各色のカラーコードが表示されるため、自身が制作中のウェブページなどに簡単にカラーを再現することができます。
すべての機能を無料でご利用いただけます。
メリット
例えば、他社のウェブページから文字の色などを参考にしたい場合、画面キャプチャーを撮る手間をかけずに、右クリック一つで簡単に使用されている色を抽出できるツールがあります。
このツールを使用すると、抽出した色がカラーパレットに表示されます。
カラーパレットから表示されるカラーコードをコピーすれば、すぐにその色を再現することができます。
また、複数のカラーコードを一度にコピーすることも可能です。もし抽出した色情報をダウンロードしたい場合は、DOWNLOADオプションを選ぶことで、GPL形式の色彩データをダウンロードすることができます。
まとめ
ColorZillaは、ウェブデザインや開発の際に役立つツールとして、多くのデザイナーや開発者に愛用されています。
Chromeの拡張機能として提供されており、簡単にインストールして利用することができるので、興味のある方はぜひ入れてみては？
最後まで読んでいただき、ありがとうございます！