これ何色？画像やテキストなどWEB上の色を簡単に識別するGoogleChromeの機能

これは何色使っているの？

• ロゴはあるけど、何色で作ったかわからない。
• WEBページでテーマカラーをこの色に統一したいけど何色かわからない。

Google Chromeを使って色を識別する方法

1. 識別したい色があるWEBサイトを表示します。（今回は事例としてInstagramを利用します。）
   
   




2. WEBサイト上で「右クリック」→「検証」を選択。
   
   




3. 下記のように右側にでてきます。
   
   




4. 右に表示されたところの◯の部分にカーソルを合わせると
   
   




5. ペンキのマークが表示されるので、そのペンキマークをクリックします。
   
   




6. カーソルが変わり、HTMLカラーコードが表示されるようになります。
   
   




7. カーソルを識別したい色に合わせてクリックすると「#」から始まるHTMLカラーコードが変わり、識別したい色のHTMLカラーコードが表示されます。
   
   



わかりやすく動画を作成しましたので参考にご覧ください。


このHTMLカラーコードを使うことでWEBサイトの色を統一したり、相性の良い色を使い分けたりできるようになります。


【関連記事】

• 簡単にきれいな配色デザインが作れる無料ツール「ColorHexa」
• PCでスマホ、タブレット表示を確認しよう！レスポンシブチェックツール
• WordPressテーマ：ポートフォリオを簡単！きれいに作るテンプレートまとめ6選
• プロが選ぶデザイナー用ポートフォリオAdobePortfolioなどまとめ
• えっ！！Wordpressのパーマリンク設定は意外に重要！？
• SEOって聞くけど、SEO対策とは何？
• サイトのURL変更で旧URLから新URLへ転送する方法（301リダイレクトなど）