ブログ運用

ページ上の色を取得できる「ColorZilla」の使い方【カラーピッカー、カラーコード取得】

本ページには広告が含まれています。

ネットサーフィンをしている時、またはご自身でサイトを運営している方で、

このサイトのボタンの色オシャレ…!
何色を使ってるか知りたいな…

気に入ったウェブページのヘッダーやフッター、ボタンなどの色を特定したい…。
と思ったことはありませんか?

今回紹介するプラグイン「ColorZilla」を使えば、簡単かつ正確なカラーピックを行えるため、上記の問題を一瞬で解決してくれます。

当記事では、そんなColorZillaのインストール方法と使い方を説明していきます。
他のサイトの色合いを真似したい方、色を知りたいという方は導入を検討してみてください。

chromeウェブストアのプラグインを使用します。
※chrome以外の一部ブラウザでも使用可

スポンサーリンク

ColorZillaとは?

ColorZillaのページ画像(リンク付き)

ColorZillaとは、一般的には「カラーピッカー(スポイトツール)」と呼ばれるツールで、
ウェブページ上から色をカラーコードで取得できるプラグインです。

取得できる範囲はピクセル単位なので、ピンポイントにカラーコードを拾うことができます。

カラーコードとは?

カラーコードとは、ウェブページで色を定義するためのコードのことです。
各色は「#+6桁(または3桁)の16進数」で表記されており、例えば「#FFFFFF」ならを表します。
カラーコードはウェブサイトを構成するスタイルシート(CSS)上で指定することで、文字や背景の色を指定したカラーコードの色に変更可能です。

CSSへのカラーコードの記述例

以下のサイトではカラーコードの一覧を見ることができます↓

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本
スポンサーリンク

ColorZillaのインストール方法

chromeウェブストアの「ColorZilla」のページに移動し「Chromeに追加」をクリックします。
更に出てきたウィンドウで「拡張機能を追加」をクリックすればインストールは完了です。

ColorZillaのインストール画面

ColorZillaでカラーコードを取得する手順

カラーコード取得の手順
  1. ツールバー上にあるプラグイン一覧から「ColorZilla」のアイコンをクリック
  2. マウスカーソルが十字になり拡大鏡のような状態になるのを確認
  3. 拡大鏡の状態のままカラーコードを取得したい色の箇所でクリック
  4. カラーコードがコピーされる

ColorZillaインストール後、ブラウザのツールバーのプラグイン一覧にColorZillaが追加されます。
スポイトのようなアイコンが目印です。そちらをまずはクリック。

ツールバー上のColorZillaのアイコン
ColorZillaのアイコン

クリック後、ページ上でカラーコードを取得したい箇所にカーソル(十字の状態)を持っていきましょう。
カーソルで選択している箇所が拡大され大きく表示されるようになります。

同時に表示される黒いツールバーには現在選択している箇所のカラーコードが表示されます。

ColorZillaで色を選択時の画像
ウェブページ上での選択箇所

続けて取得したい色の位置で再度クリック。
するとカラーコードがクリップボードにコピーされます。

カラーコードコピー時の画像

コピーしたカラーコードをそのままCSSにペースト(貼り付け)して使うことができます。
使い方は以上です。

まとめ:他のサイトのカラーを自身のサイトにすぐ反映できる

ウェブページは非常に多くのカラーコードで構成されているため、目視のみでカラーコードを指定して色を真似しようとすると「なんか微妙に違うな…」となりがちです。

正確に色を判断したいのであれば、一瞬でコピペまでできるColorZillaを用いるのが一番早いと思ったので、このプラグインはかなりおすすめです!

あとはカラーコードを特に記述する予定が無くても「これ何色だろ?」という時に気軽にポチッと調べられるので、そういう使い方ができる意味でも便利です。

コメント