Webサイトからイケてる配色を取得できるChromeの拡張機能「ColorZilla」の使い方

Webデザインやサイト制作時に配色に困ることってありませんか？

かっこいいデザインや配色が綺麗なサイトを参考にすることもあると思います。そこで今回は、WEB上から簡単にサイトのカラーコードを取得できるChromeの拡張機能をご紹介いたします。

「ColorZilla」の機能概要

主に以下のことができます。Webデザインやサイト制作に便利なChromeの拡張機能です。

• Webページ（画像を含む）から簡単にカラーコードを確認できる
• サイトの配色パターンを確認できる
• 取得したカラーコードを履歴として保存できる
• グラデーションを表現するCSSを簡単につくれる

Chromeの拡張機能「ColorZilla」の追加

「ColorZilla」

Chromeをお使いの方は、上記ボタンから簡単に追加いただけます。

「ColorZilla」の使い方

サイト内からカラーコードを取得したり、グラデーションCSSを簡単に作れる方法をご紹介いたします。

Webページからカラーコードを確認する方法

ページ内の要素はもちろん、写真や画像からでも抽出できるので、ある一部分のカラーコードをピンポイントで知りたい時に使える機能です。

まずは、ChromeのURLバーの右側から「ColorZilla」のメニューを開きましょう。

「Pick Color From Page」をクリックするとページ内の任意の箇所からカラーコードを抽出できます。

表示されるカーソルを抽出したい部分に合わせてクリックすると、下記のようなバーが表示されます。

クリックするとクリップボードにコピーされるので、そのままカラーコードをペーストすることが可能です。

サイト全体の配色パターンを確認する方法

サイト全体の配色パターンを参考にしたい時に使える機能です。どこか一箇所ではなく、ページ内の配色を丸ごと確認できます。「ColorZilla」のメニューで「Webpage Color Analyzer」をクリックして確認します。

下記のようにそのページ内の配色が一覧で表示されます。

クリックすると、そのカラーが適用されている箇所が表示され、「OK」をクリックするとそのカラーコードがクリップボードにコピーされます。アイキャッチ画像のカラーなどは反映されないので、純粋にそのページ内の要素に設定されているカラーコードのみを確認可能です。

取得したカラーコードの履歴を一覧で確認する方法

各所から取得したカラーコードを履歴としてまとめて確認できます。自分のサイト等に設定する際に一覧からスムーズに適用できる機能です。「ColorZilla」のメニューで「Picked Color History」をクリックします。

下記のように「Color history」として過去に取得したカラーコードが一覧で表示されます。

サイトやページを変更してもカラーコードを取得するごとに保存されます。また、右下の赤いバツ印をクリックするとすべての配色履歴が削除されますので、その点は注意して活用しましょう。

グラデーションのCSSを簡単につくる方法

こちらはカラーコードを抽出するメインの機能とは別ですが、グラデーションカラーを作る際に便利な機能です。リアルタイムでプレビューしながらグラデーションのCSSをつくれます。「ColorZilla」のメニューで「CSS Gradient Generator」をクリックします。

すると以下のCSSジェネレーターが開かれます。

任意のカラーに変更して、各所のつまみを操作してグラデーションを調整してみてください。生成される上記赤枠のCSSをコピーして使えるので、ページ背景などに適用すると以下のように反映されます。

グラデーションのCSSを書く手間を大幅に削減できる機能ですね。

美しいグラデーションカラーをつくるためのポイントはこちらの記事も参考になります。

まとめ

Chromeの拡張機能「ColorZilla」の主な使い方をご紹介して参りました。

イケてるサイトの配色を参考にできたり、複雑なグラデーションのCSSも簡単に自動生成できて便利です。Webサイトの配色を決める際に活躍する拡張機能なので、ぜひ使ってみてください。

その他、美しい配色を自分で探したいという方は、以下で紹介しているツールも役立つかもしれません。よろしければ参考にご覧ください。