【HTML】サイトの色・カラーコードを簡単に調べる方法・ツール紹介

このサイトの色使いオシャレだな。パクれねぇかな・・・

やる木なし男くん

トリ田課長

おやおやなし男くん。サイトのカラーコードは簡単に調べられる方法があるんだよ。

課長たまには役に立つっすね

やる木なし男くん

トリ田課長

・・・

カラーコードの調べ方

今回はこのサイトの見出しタグ(h2)の背景色のコードをGoogleChromeで調べてみよう。FireFoxでも同じような方法で調べられるぞ。

STEP.1
検証をクリック
GoogleChromeでサイトを開き、右クリックを押す。検証をクリック。
STEP.2
選択ツールをクリック
ソースがずらっと並ぶ画面が出てきただろう。画面上の矢印キーをクリック。するとカーソルが選択モードになっているので、そのまま見出しタグ(h2)をクリック。
STEP.3
カラーコードをGET
画面下の#から始まるアルファベット6桁のコードがカラーコードだよ。

少し手間はかかるが、ブラウザの標準機能で調べられるから簡単だね。

ただ、CSSで指定された色しか調べられないため、調べられない色もある。調べられなかった場合は、以下のツールが便利だ。

サイトに表示されているどんな色も調べられるのがColorZillaというツールだ。クリックした場所のカラーコードを瞬時に表示してくれる。

STEP.1
ChromeにColorZillaを追加する
chromeウェブストアでColorZillaを開く。右上の「CHROMEに追加」をクリック。
STEP.2
ColorZillaを起動する
検索バーの右上に追加されたColorZillaのアイコンをクリック。「Pick Color From Page」をクリック。
STEP.3
カラーコードをGET
サイトの好きな場所でクリック。今回はヘッダーの色をクリックしたよ。画面上の黒いバーに出た、#から始まるアルファベット6桁のコードがカラーコードだよ。クリックした時点で自動的にカラーコードがコピーされているから、後は貼り付けるだけなんだ。