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

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

やる木なし男くん

トリ田課長

おやおやなし男くん。サイトのカラーコードは簡単に調べられる方法があるんだよ。
課長たまには役に立つっすね

やる木なし男くん

トリ田課長

・・・

カラーコードの調べ方

ブラウザの検証を使う ※CSSで指定された色のみ

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

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

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

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

Chromeの拡張ツール ColorZilla

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

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

どうだい?簡単だろう?

ぜひ使ってみてくれたまえ。

【保存版】WEBデザイン指示書の書き方・無料テンプレート

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です