Webサイトで使ってる色が分かる カラーコード取得ツールColorZilla

Webサイトを巡回していて、「あ、このブログで使われてるこの色いいな。何色だろ？」って思う時ありますよね。

そういった時に、色の情報=カラーコードを取得出来るのが今回紹介するColorZillaです。

ColorZillaをWebブラウザであるChrome もしくは FireFox にインストールしていれば、クリックするだけでサイトで使われている色のカラーコードが分かりますよ。

今回のこの記事ではColorZillaの導入方法から使い方を解説していますよ。

Colorzillaとは、ブラウザで表示しているWEBページに使われている色を調べることのできる拡張機能です。

このColorZillaをWebブラウザであるChromeかFireFoxにインストールしておくと、色使いが気になったWEBページで使われている色が何色かを知ることができます。

なので、自分のブログのデザインなどに役立ちますよ。

ちなみに何色かはカラーコードで知ることが出来ます。

カラーコードとはWebページ上で表現される色が何色かを表すのに使われるものです。

赤( R : Red ) 緑( G : Green ) 青( B : Blue ) の光の三原色の濃淡の組み合わせで表現し#の後ろに16進数の数字6桁で表現します。

例えば赤だと#ff0000 と表すのですが、最初2桁が赤色、次の2桁が緑色、最後の2桁が青色を表し、赤が16進数のf x f=256 (16 x 16 =256)、緑が0、青が0を混ぜた色と言う意味になります。

Colorzillaではこのカラーコード以外にもRGB形式や、HSV形式でも色情報を得ることができます。

拡張機能とはWebブラウザに必要な機能を好みに応じて追加できる仕組みです。

この拡張機能は今回紹介するColorzilla以外にもたくさんあり、ブログ運営に役立つものもたくさんあります。

自分に必要な機能を好みに応じてインストールしておくと、作業協効率がアップしますよ。

当ブログでは、他にもブログ運営に役立つ拡張機能を紹介しています。

よかったら、ブログ運営に役立つ拡張機能の紹介記事も併せて読んでください。

ColorZillaをインストール(追加)する方法を解説します。

下記の手順で簡単にインストールすることができますよ。

この記事ではWebブラウザChromeにインストールする方法を解説します。

STEP

ColorZillaのウェブストアページへ行く

ColorZillaのウェブストアページへはこちらをクリックしてください

STEP

『Chromeに追加』をクリックする

STEP

『拡張機能を追加』をクリック

STEP

ColorZillaのアイコンが表示されていればインストールは完了です

ブラウザ画面右上にColorZillaのアイコン(スポイトのマーク)が表示されればインストールは完了です。

表示されていない場合はSTEP5からSTEP6の作業をしてください。

STEP

Webブラウザ画面右上のジグソーパズルのアイコンをクリックします

STEP

ColorZillaの欄の押しピンマークをクリックします

押しピンマークが青くなればOKです。

以上でインストール作業は完了しましたので、いつでもColorZillaを使う事ができます。

ColorZillaが不要になってブラウザから削除したい場合は、下記の手順でアンインストール(機能の削除)することができます。

ColorZillaの使い方を解説していきます。

使い方は簡単ですよ。

ブラウザ画面右上に表示されているColorZillaのアイコンをクリックすると、メニューが表示されるので、そのメニューの中から使いたい機能を選択します。

メニューは英語で表示されます。

メニューはそれぞれ下記の機能と対応しています。

基本的なメニューについて解説していきます。

メニューから 『Page Color Picker Active』を選択するとウェブブラウザ上部に黒いツールバーが現れます。

この状態で、マウスのポインターを調べたい色のところへ持っていくと、色情報を知ることが出来ますよ。

Webページ内に表示されているモノであれば、画像内や動画内の色も知ることが出来ます。

そして、色情報を知りたい色の上でマウスを左クリックすると、クリップボードにカラーコードがコピーされます。

下に得られる情報について記しますね。

色情報を得る範囲は6種類から選択することが可能です。

選択範囲はそれぞれ下記のとおりです。

画像の中などの色を知りたいときはaverage (平均値)で得る方法がおすすめです。ピクセルの範囲については好みに応じて合わせてください。

メニューからColor Picker を選択すると、前回取得した色の情報が表示されます。

ここではRGB値、HSV値、カラーコードが表示されますよ。

メニューから Copy To Clipboard を選択すると形式を指定して、色の情報をクリップボードにコピーすることができます。

選べる形式は下記のとおりです。

Re-sample Last Location は前回色情報を取得した場所で色情報を再取得します。

これはリンクなどマウスホバーなどによって色が変わってしまう場所の色情報を取得するのに便利な機能です。

Picked Color Historyでは取得した色情報の履歴が確認できます。

Webpage Color Analyzerを選択すると、表示されているWebページで使われている色一覧が表示されます。

ただ画像内の色も表示されるので注意が必要です。

定義済みのカラーパレットから色を選択することができます。

ベースとなる色を1色選んで配色ルールを選ぶと、配色理論に基づいた似合う色を提示してくれるサービスです。

配色って経験やルールを知らないと難しいですが、このサービスを使えば簡単にお洒落な配色を見つけられますよ。

使い方としては、ColorZillaでベースとなる色を見つけたら、Adobe Colorで配色を探すのがおすすめです。

Adobe Color を使ってみる

Webページを巡回などしていて、気になるフォントがあれば、クリックするだけでそのフォント名やサイズ、スタイルなどの情報を表示してくれる拡張機能です。

当ブログでも導入方法や使い方を解説していますので、よかったら読んでくださいね。

あわせて読みたい

Webサイトに使われているフォントが一瞬で分かる拡張機能 WhatFont ウェブサーフィンをしてる最中、ブログなどを見ていて「あ、このフォントいいな」って思ったことありませんか？ 自分のブログでも使ってみたいなって。 でも何のフォン…

ColorZillaはWebページ内に表示されている「あ、いいな。この色って何色だろう？」って思った色が何色なのかを調べる拡張機能です。

ColorZillaでベースとなる色が決まったら、Adobe Colorと併せて使う事により、お気に入りの配色が見つかりますよ。

当ブログではブログ運営に役立つ拡張機能をまだまだ紹介していますので、よかったら『簡単操作でSEO対策やブログ運営の効率UP! おすすめChrome拡張機能』も読んでください。

あわせて読みたい

簡単操作でSEO対策やブログ運営の効率UP! おすすめChrome拡張機能 拡張機能の便利なところは普段使いできるところですよね。 ネットサーフィンしながら気になった時にキーワードに関するデータを見たり、気になるサイトの分析したり。 …