Webサイトの気になるカラーコードを取得「ColorZilla」

Webサイトを見ている時に、サイトカラーや画像の中で使用されているカラーなど、気になる色のコードを取得できるのが「Colorzilla」です。

Colorzillaの追加方法

ブラウザの拡張機能になります。以下のURLからブラウザに機能を追加できます。
Chrome(Colorzilla)
・Firefox(Colorzilla)

ColorZilla の使い方

ColorZillaをブラウザに追加できましたら、ブラウザの右上にあるスポイトアイコンをクリック。
開いたメニューの中の「Pick Color From Page」をクリックします。

ページ上部にバーが出てきます。
マウスカーソルが十字になりますので、取得したい色の上でクリックして取得します。
今回はYahooのロゴカラーを取得してます。
取得したカラーのコードは自動的にクリップボードへコピーされます。

過去に取得した色を確認することもできます。
ブラウザの右上にあるスポイトアイコンをクリック。
開いたメニューの中の「Color Picker」をクリックして確認できます。

この記事を書いた人
Yoshida

株式会社グロウニッチの制作を担当している吉田です。Web制作に関する記事やちょっと気になったものを紹介します。

関連記事

Googleドキュメントを使ったカラーコード確認方法
サイト制作中にささっと色を探したいとき、色の指定をしたいときにGoogleドキュメントを使えば簡単に調べることが出来ます。また、フォントやオブジェクトにはめて確認したい時にイメージしやすいため便利です。 カラーコードの確認方法 ①文字を選択します②文字の配色アイコンをクリック ③カスタムの「+」をクリック ④選びたい……
Google GeminiとGoogleドキュメント連携で実現する、ビジネスの効率化と情報整理
Google GeminiとGoogleドキュメントの連携は、ビジネス現場における情報整理や業務プロセスの効率化を大幅に推進します。Business StarterからBusiness Standard以上のプランへアップグレードすることで、さらに高度な機能とセキュリティが実現可能です。ここでは、その具体的なメリットや活用シーンを分かりやすく解説します。 ……
カラーコードの検索・抽出に便利なGoogle拡張機能「ColorPick Eyedropper」
ウェブサイト上などにある色のコードを抽出するにはChrome拡張機能の「ColorPick Eyedropper」がおすすめです。 「ColorPick Eyedropper」の使い方 ColorPick Eyedropperにアクセス。「Chromeに追加」をクリックします。 確認用のポップアップが出るので「拡張機能を追加」をク……
Webサイトの画像サイズや位置を測れるツール「Page Ruler Redux」
「Page Ruler Redux」はWebサイトで表示されている画像のサイズや任意の位置を測ることができるChromeの拡張機能です。 Page Ruler Reduxの追加方法 ブラウザの拡張機能になります。以下のURLからブラウザに機能を追加できます。・Chrome(Page Ruler Redux) Page Ruler Redu……