皆さんは、他のwebサイトを見て「この色が使いたい！でも色をどうやって探せばいいかわからない、、」と思った経験はありませんか？そういう時に便利なのがこの「ColorZilla」という拡張機能です。

ColorZillaはGoogleCromeの拡張機能であり、現在閲覧中のブラウザで拡張機能を起動すると、そのサイト内の色を取得し、カラーコードなどをコピーすることができます。

まず、こちらから「ColorZilla」をインストールしましょう。

では早速ColorZillaの使い方を説明していきたいと思います。

Webサイトで使用している色をコピーする

「Color Zilla」は便利な機能がいくつか搭載されている拡張機能です。ただ多くの人は基本的にこの機能を使うために「Color Zilla」を使用しています。

まず、「Color Zilla」を使用するときは拡張機能ピンをつけます。（これは「Color Zilla」に限ったことではなくChromeの拡張機能を使用する場合はピンをつけます）

次に、「Color Zilla」のアイコンのスポイトのマークを押します。
そうすると「Color Zilla」の機能がいつくか出てきます。

一番上の項目「ページからカラーを選択」を押します。
そうすると閲覧しているサイトの色を選択できるようになります。色を選択すると、自動的にコピーをされるのでカラーコードとしてそのまま利用可能です。

ちなみに、カラーコードのコピーですが形式を選択することも可能です。
色をコピーした後に「特定の形式でコピー」を押すと、以下のように別の形式でもコピーができます。

Webサイトで使用している色を全て確認する

「Color Zilla」にはサイト全体の配色を全て確認する機能もあります。
この機能は例えば、あるサイトのデザインや配色を全体的に参考にしたい時などに活用できます。

「Webページアナライザー」を押すと、以下のようにページで使用されている色が全て確認できます。

グラデーション生成

この機能はシンプルにグラデーションを生成できる機能です。
CSSでグラデーションを使用したい場合はとても便利ですので、知っておいて損はないと思います。

「CSSグラデーション生成ツール」を押すと、グラデーション生成のツールが開かれます。ここで自分の使用したいグラデーションを生成します。

以上「Color Zilla」の紹介でした！

色は少し彩度や明度が変わるだけでもかなり印象が変わるので、1から決めるのは正直非効率です。。なのでぜひ「Color Zilla」を使って効率よく、配色をしてみてください！