Webサイトで使われている色のカラーコードを簡単に調べて取得する

時々、Webサイトで使われているHTMLの特定のブロックや画像のカラーコードを知りたいときがあるけど、わざわざ何かツールを立ち上げて見るのがめんどくさいときに
ブラウザで色を確認する方法.

手順

  1. Google Chromeで右上の設定ボタンから以下を開くscreenshot.png
  2. 次に「その他のツール」から以下を開くscreen.png
  3. 「デベロッパーツール」を開くと以下のような画面が下にでる.スクリーンショット 2019-01-12 17.39.25.png
  4. もし文字の色を調べたいとかだけなら、その要素をクリック
    下の画面のcolor : の色や background-colorで色がわかります.
    screenx.png
  5. もし画像の中の色を調べたいなら、以下のようにStylesのタブのcolorやbackground-colorの右にあるカラーパネルの四角をクリックするとスポイトが出てきます.
    それを好きな要素を動かせばその位置が拡大されて色が表示されます.
    クリックするとその色を取得してくれます.sssss.png

これで完了.

いちいちなんかの拡張機能入れるのも何かツールを立ち上げるのも面倒臭いのでこれで済ませている.

About the author

コメントを残す